import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Clock, ThumbsUp, ThumbsDown, ArrowRight, Bot } from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { zhCN } from "date-fns/locale";

export interface FinancePendingApproval {
  id: string;
  type: 'refund' | 'expense' | 'settlement' | 'adjustment';
  title: string;
  amount: number;
  reason: string;
  aiConfidence?: number;
  priority: 'urgent' | 'normal' | 'low';
  createdAt: Date;
}

interface FinancePendingApprovalsProps {
  approvals: FinancePendingApproval[];
  onApprove?: (id: string) => void;
  onReject?: (id: string) => void;
  onViewDetail?: (id: string) => void;
}

const typeConfig = {
  refund: { label: "退款", color: "bg-red-500" },
  expense: { label: "费用", color: "bg-amber-500" },
  settlement: { label: "结算", color: "bg-blue-500" },
  adjustment: { label: "调整", color: "bg-purple-500" }
};

export function FinancePendingApprovals({ 
  approvals, 
  onApprove, 
  onReject, 
  onViewDetail 
}: FinancePendingApprovalsProps) {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amount);
  };

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base flex items-center gap-2">
            <Clock className="h-4 w-4 text-emerald-500" />
            待审批事项
            <Badge variant="secondary" className="ml-1">{approvals.length}</Badge>
          </CardTitle>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <ScrollArea className="h-[320px]">
          <div className="space-y-3 p-4 pt-0">
            {approvals.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                <Clock className="h-12 w-12 mb-3 opacity-20" />
                <p>暂无待审批事项</p>
              </div>
            ) : (
              approvals.map((approval) => (
                <div
                  key={approval.id}
                  className="p-4 rounded-lg border bg-card hover:bg-accent/30 transition-colors"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <Badge className={`${typeConfig[approval.type].color} text-white text-xs`}>
                          {typeConfig[approval.type].label}
                        </Badge>
                        <span className="font-medium text-sm">{approval.title}</span>
                        {approval.priority === 'urgent' && (
                          <Badge variant="destructive" className="text-xs">紧急</Badge>
                        )}
                      </div>
                      <p className="text-lg font-bold text-emerald-600 my-1">
                        {formatCurrency(approval.amount)}
                      </p>
                      <p className="text-xs text-muted-foreground mb-3">
                        {approval.reason}
                      </p>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
                          <span>
                            {formatDistanceToNow(approval.createdAt, { addSuffix: true, locale: zhCN })}
                          </span>
                          {approval.aiConfidence && (
                            <span className="flex items-center gap-1">
                              <Bot className="h-3 w-3" />
                              {approval.aiConfidence}%
                            </span>
                          )}
                        </div>
                        <div className="flex items-center gap-2">
                          <Button size="sm" className="h-7 text-xs" onClick={() => onApprove?.(approval.id)}>
                            <ThumbsUp className="h-3 w-3 mr-1" />
                            批准
                          </Button>
                          <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => onReject?.(approval.id)}>
                            <ThumbsDown className="h-3 w-3 mr-1" />
                            拒绝
                          </Button>
                          <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => onViewDetail?.(approval.id)}>
                            详情
                            <ArrowRight className="h-3 w-3 ml-1" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}
