/**
 * 驗收頁面 - 商品驗收卡片 (Level 2 - 手機版)
 */

import { AlertCircle } from "lucide-react";
import { Input } from "../ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import type { InspectionItem } from "../../types/purchase-order";
import { ISSUE_REASONS } from "../../constants/purchase-order";
import { formatCurrency } from "../../utils/purchase-order";

interface InspectionItemCardProps {
  item: InspectionItem;
  index: number;
  onReceivedQuantityChange: (index: number, value: number) => void;
  onIssueNoteChange: (index: number, note: string) => void;
}

export function InspectionItemCard({
  item,
  index,
  onReceivedQuantityChange,
  onIssueNoteChange,
}: InspectionItemCardProps) {
  const hasIssue = item.issueType !== "none";

  return (
    <div
      className={`bg-card rounded-lg border-2 p-4 ${
        hasIssue ? "border-warning bg-warning/5" : "border-border"
      }`}
    >
      {/* 商品標題與異常標示 */}
      <div className="flex items-start justify-between gap-4 mb-4">
        <div className="flex-1">
          <div className="flex items-center gap-2">
            {hasIssue && <AlertCircle className="h-4 w-4 text-warning shrink-0" />}
            <h4 className="break-words">{item.productName}</h4>
          </div>
        </div>
      </div>

      {/* 基本資訊 - 雙欄排版 */}
      <div className="grid grid-cols-2 gap-4 mb-4 pb-4 border-b border-border">
        <div>
          <div className="caption text-muted-foreground mb-1">應到貨數量</div>
          <p>{item.quantity} {item.unit}</p>
        </div>
        <div>
          <div className="caption text-muted-foreground mb-1">單價</div>
          <p>{formatCurrency(item.unitPrice)}</p>
        </div>
      </div>

      {/* 驗收輸入區 */}
      <div className="space-y-4">
        {/* 實際收貨量 */}
        <div>
          <label htmlFor={`received-${index}`} className="caption text-muted-foreground mb-2 block">
            實際收貨量 *
          </label>
          <Input
            id={`received-${index}`}
            type="number"
            min="0"
            max={item.quantity}
            value={item.receivedQuantity}
            onChange={(e) => onReceivedQuantityChange(index, Number(e.target.value))}
            className="h-12 border-2 border-input"
          />
        </div>

        {/* 短缺數量（自動計算） */}
        <div>
          <div className="caption text-muted-foreground mb-2">短缺數量（自動計算）</div>
          <div className={`p-3 rounded-md border-2 ${hasIssue ? "bg-warning/10 border-warning/30" : "bg-muted/50 border-border"}`}>
            <span className={hasIssue ? "text-warning font-medium" : ""}>
              {item.quantity - item.receivedQuantity} {item.unit}
            </span>
          </div>
        </div>

        {/* 異常說明（僅在有異常時顯示） */}
        {hasIssue && (
          <div>
            <label htmlFor={`issue-${index}`} className="caption text-muted-foreground mb-2 block">
              異常說明 *
            </label>
            <Select
              value={item.issueNote || ""}
              onValueChange={(value) => onIssueNoteChange(index, value)}
            >
              <SelectTrigger id={`issue-${index}`} className="h-12 border-2 border-input">
                <SelectValue placeholder="請選擇異常原因" />
              </SelectTrigger>
              <SelectContent>
                {ISSUE_REASONS.map((reason) => (
                  <SelectItem key={reason.value} value={reason.value}>
                    {reason.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )}

        {/* 實收金額（僅顯示） */}
        <div className="pt-4 border-t border-border">
          <div className="flex justify-between items-center">
            <span className="caption text-muted-foreground">實收金額</span>
            <span className={`${hasIssue ? "text-warning" : "text-primary-main"}`}>
              {formatCurrency(item.receivedQuantity * item.unitPrice)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}