/**
 * 审批卡片组件 - 用于售后审批等场景
 */

import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { format } from 'date-fns';
import { CheckCircle, XCircle, Clock, AlertTriangle } from 'lucide-react';
import type { ComponentPropsMap, RenderContext } from '../types';

interface ApprovalCardProps {
  props: ComponentPropsMap['approval_card'];
  context: RenderContext;
}

export function ApprovalCard({ props, context }: ApprovalCardProps) {
  const { data, onApprove = 'approve', onReject = 'reject' } = props;

  const getPriorityBadge = () => {
    const priorityConfig = {
      urgent: { label: '紧急', className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200', icon: AlertTriangle },
      high: { label: '高', className: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200', icon: AlertTriangle },
      medium: { label: '中', className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', icon: Clock },
      low: { label: '低', className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', icon: Clock },
    };

    const config = priorityConfig[data.priority || 'medium'];
    const Icon = config.icon;

    return (
      <Badge variant="outline" className={config.className}>
        <Icon className="h-3 w-3 mr-1" />
        {config.label}
      </Badge>
    );
  };

  return (
    <Card className="overflow-hidden">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div>
            <CardTitle className="text-base">{data.title}</CardTitle>
            <p className="text-sm text-muted-foreground mt-1">
              类型: {data.type}
            </p>
          </div>
          {getPriorityBadge()}
        </div>
      </CardHeader>
      <CardContent className="pb-3">
        <p className="text-sm">{data.description}</p>
        {data.metadata && Object.keys(data.metadata).length > 0 && (
          <div className="mt-3 grid grid-cols-2 gap-2 text-sm">
            {Object.entries(data.metadata).map(([key, value]) => (
              <div key={key}>
                <span className="text-muted-foreground">{key}: </span>
                <span>{String(value)}</span>
              </div>
            ))}
          </div>
        )}
        <p className="text-xs text-muted-foreground mt-3">
          提交时间: {format(new Date(data.createdAt), 'yyyy-MM-dd HH:mm')}
        </p>
      </CardContent>
      <CardFooter className="gap-2 pt-3 border-t">
        <Button
          size="sm"
          className="flex-1"
          disabled={context.loading}
          onClick={() => context.onAction?.(onApprove, { id: data.id })}
        >
          <CheckCircle className="h-4 w-4 mr-1" />
          通过
        </Button>
        <Button
          size="sm"
          variant="outline"
          className="flex-1"
          disabled={context.loading}
          onClick={() => context.onAction?.(onReject, { id: data.id })}
        >
          <XCircle className="h-4 w-4 mr-1" />
          拒绝
        </Button>
      </CardFooter>
    </Card>
  );
}
