/**
 * 驗收明細元件 - 支援響應式卡片和表格視圖
 * 手機版：卡片列表
 * 桌面版：表格
 */

import { InspectionItemCard } from "./InspectionItemCard";
import { AlertCircle } from "lucide-react";
import { Input } from "../ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../ui/table";
import type { InspectionItem } from "../../types/purchase-order";
import { ISSUE_REASONS } from "../../constants/purchase-order";
import { formatCurrency } from "../../utils/purchase-order";

interface InspectionTableProps {
  items: InspectionItem[];
  onReceivedQuantityChange: (index: number, value: number) => void;
  onIssueNoteChange: (index: number, note: string) => void;
}

export function InspectionTable({
  items,
  onReceivedQuantityChange,
  onIssueNoteChange,
}: InspectionTableProps) {
  return (
    <>
      {/* 手機版：卡片列表 */}
      <div className="md:hidden">
        <div className="mb-4">
          <h3>商品驗收</h3>
          <p className="body-sm text-muted-foreground mt-1">
            請輸入實際收貨數量
          </p>
        </div>
        <div className="space-y-4">
          {items.map((item, index) => (
            <InspectionItemCard
              key={index}
              item={item}
              index={index}
              onReceivedQuantityChange={onReceivedQuantityChange}
              onIssueNoteChange={onIssueNoteChange}
            />
          ))}
        </div>
      </div>

      {/* 桌面版：表格 */}
      <div className="hidden md:block bg-card rounded-lg border-2 border-border">
        <div className="p-6 border-b-2 border-border">
          <h3>商品驗收</h3>
        </div>
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/50">
                <TableHead className="w-[180px]">商品名稱</TableHead>
                <TableHead className="w-[100px] text-center bg-muted/70">
                  應到貨數量
                </TableHead>
                <TableHead className="w-[100px] text-center bg-muted/70">
                  實際收貨
                </TableHead>
                <TableHead className="w-[90px] text-center">短缺數量</TableHead>
                <TableHead className="w-[70px]">單位</TableHead>
                <TableHead className="w-[90px]">單價</TableHead>
                <TableHead className="w-[110px]">實收金額</TableHead>
                <TableHead className="min-w-[200px]">異常說明</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {items.map((item, index) => {
                const hasIssue = item.issueType !== "none";
                return (
                  <TableRow
                    key={index}
                    className={hasIssue ? "bg-warning/5" : ""}
                  >
                    <TableCell>
                      <div className="flex items-center gap-2">
                        {hasIssue && <AlertCircle className="h-4 w-4 text-warning" />}
                        <span>{item.productName}</span>
                      </div>
                    </TableCell>
                    <TableCell className="text-center bg-muted/30">
                      <span className="font-medium">{item.quantity}</span>
                    </TableCell>
                    <TableCell className="bg-muted/30">
                      <Input
                        type="number"
                        min="0"
                        max={item.quantity}
                        value={item.receivedQuantity}
                        onChange={(e) => onReceivedQuantityChange(index, Number(e.target.value))}
                        className="h-11 text-center font-medium border-2 border-input"
                      />
                    </TableCell>
                    <TableCell className="text-center bg-muted/30">
                      <span className="font-medium">
                        {item.quantity - item.receivedQuantity}
                      </span>
                    </TableCell>
                    <TableCell className="text-center text-muted-foreground">
                      {item.unit}
                    </TableCell>
                    <TableCell className="text-right">
                      {formatCurrency(item.unitPrice)}
                    </TableCell>
                    <TableCell className="text-right">
                      <span className={hasIssue ? "text-warning font-medium" : ""}>
                        {formatCurrency(item.receivedQuantity * item.unitPrice)}
                      </span>
                    </TableCell>
                    <TableCell>
                      {hasIssue && (
                        <Select
                          value={item.issueNote || ""}
                          onValueChange={(value) => onIssueNoteChange(index, value)}
                        >
                          <SelectTrigger className="h-11 border-2 border-input">
                            <SelectValue placeholder="選擇原因" />
                          </SelectTrigger>
                          <SelectContent>
                            {ISSUE_REASONS.map((reason) => (
                              <SelectItem key={reason.value} value={reason.value}>
                                {reason.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      )}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      </div>
    </>
  );
}