/**
 * 驗收統計摘要元件
 */

import { CheckCircle2, AlertCircle } from "lucide-react";
import { Alert, AlertDescription } from "../ui/alert";
import { Label } from "../ui/label";
import type { InspectionItem } from "../../types/purchase-order";
import { formatCurrency } from "../../utils/purchase-order";

interface InspectionSummaryProps {
  hasIssues: boolean;
  issueItems: InspectionItem[];
  totalExpectedAmount: number;
  totalReceivedAmount: number;
}

export function InspectionSummary({
  hasIssues,
  issueItems,
  totalExpectedAmount,
  totalReceivedAmount,
}: InspectionSummaryProps) {
  return (
    <>
      {/* 異常項目摘要 */}
      {hasIssues && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>
            <div className="space-y-2">
              <p className="font-medium">偵測到 {issueItems.length} 個異常項目：</p>
              <ul className="list-disc list-inside space-y-1 text-sm">
                {issueItems.map((item, idx) => (
                  <li key={idx}>
                    {item.productName}：
                    {item.shortageQuantity > 0 && ` 短缺 ${item.shortageQuantity}${item.unit}`}
                    {item.shortageQuantity > 0 && item.damagedQuantity > 0 && "、"}
                    {item.damagedQuantity > 0 && ` 損壞 ${item.damagedQuantity}${item.unit}`}
                    {item.issueNote && ` (${item.issueNote})`}
                  </li>
                ))}
              </ul>
            </div>
          </AlertDescription>
        </Alert>
      )}

      {/* 統計卡片 */}
      <div className="grid grid-cols-2 gap-6">
        {/* 金額統計 */}
        <div className="bg-card rounded-lg border border-border p-6">
          <h3 className="mb-4">金額統計</h3>
          <div className="space-y-3">
            <div className="flex justify-between items-center">
              <span className="text-muted-foreground">原訂總金額：</span>
              <span className="text-lg">{formatCurrency(totalExpectedAmount)}</span>
            </div>
            <div className="flex justify-between items-center pt-3 border-t border-border">
              <span className="text-muted-foreground">實收總金額：</span>
              <span className="text-lg font-medium text-green-600">
                {formatCurrency(totalReceivedAmount)}
              </span>
            </div>
            {totalReceivedAmount !== totalExpectedAmount && (
              <div className="flex justify-between items-center text-sm text-red-600">
                <span>差異金額：</span>
                <span className="font-medium">
                  {formatCurrency(Math.abs(totalReceivedAmount - totalExpectedAmount))}
                </span>
              </div>
            )}
          </div>
        </div>

        {/* 自動化作業說明 */}
        <div className="bg-card rounded-lg border border-border p-6">
          <h3 className="mb-4">驗收後自動執行</h3>
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-green-600" />
              <span>更新庫存數量</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-green-600" />
              <span>產生應付帳款記錄</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-green-600" />
              <span>更新採購單狀態為已完成</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
