/**
 * 通用待审批列表组件
 */

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Clock, CheckCircle2, ThumbsUp, ThumbsDown } from "lucide-react";

export interface PendingApprovalItem {
  id: string;
  type: string;
  title: string;
  description: string;
  items: number;
  createdBy: string;
  priority: 'urgent' | 'normal';
  requestType?: string;
  amount?: number;
}

interface GenericPendingApprovalsProps {
  approvals: PendingApprovalItem[];
  onApprove: (type: string) => void;
  onReject: (type: string) => void;
  title?: string;
}

export function GenericPendingApprovals({ 
  approvals, 
  onApprove, 
  onReject,
  title = "待审批"
}: GenericPendingApprovalsProps) {
  return (
    <Card className="h-full flex flex-col">
      <CardHeader className="pb-2 shrink-0">
        <div className="flex items-center justify-between">
          <CardTitle className="text-sm flex items-center gap-2">
            <Clock className="h-4 w-4 text-primary" />
            {title}
          </CardTitle>
          <Badge variant="destructive" className="text-xs">
            {approvals.reduce((sum, a) => sum + a.items, 0)} 项
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="flex-1 p-0 overflow-hidden">
        <ScrollArea className="h-full">
          <div className="space-y-2 p-4 pt-0">
            {approvals.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
                <CheckCircle2 className="h-8 w-8 mb-2 opacity-20" />
                <p className="text-sm">暂无待审批</p>
              </div>
            ) : (
              approvals.map((approval) => (
                <div
                  key={approval.id}
                  className="p-3 rounded-lg border bg-card hover:bg-accent/30 transition-colors"
                >
                  <div className="flex items-center justify-between gap-2 mb-2">
                    <div className="flex items-center gap-2">
                      <h4 className="font-medium text-sm">{approval.title}</h4>
                      {approval.priority === "urgent" && (
                        <Badge variant="destructive" className="text-xs">紧急</Badge>
                      )}
                    </div>
                    <Badge variant="outline" className="text-xs">
                      {approval.items} 项
                    </Badge>
                  </div>
                  
                  {approval.amount && approval.amount > 0 && (
                    <p className="text-xs text-amber-600 mb-2">
                      涉及金额: ¥{approval.amount.toFixed(2)}
                    </p>
                  )}
                  
                  <div className="flex items-center gap-2">
                    <Button 
                      size="sm" 
                      className="h-7 text-xs flex-1"
                      onClick={() => onApprove(approval.requestType || approval.type)}
                    >
                      <ThumbsUp className="h-3 w-3 mr-1" />
                      批准
                    </Button>
                    <Button 
                      size="sm" 
                      variant="outline" 
                      className="h-7 text-xs flex-1"
                      onClick={() => onReject(approval.requestType || approval.type)}
                    >
                      <ThumbsDown className="h-3 w-3 mr-1" />
                      拒绝
                    </Button>
                  </div>
                </div>
              ))
            )}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}
