import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatCurrency, formatNumber } from "@/lib/utils"

interface ContractItem {
  materialNo?: string
  itemDescription?: string
  specification?: string
  quantity?: number
  quantityUnit?: string
  ZPO_UNIT?: string
  unitPrice?: number | string
  contractAmount?: number | string
  
  // SAP ECC 금액 필드
  NETWR?: number
  BRTWR?: number
  ZPDT_EXDS_AMT?: number
  
  // SAP 날짜 필드
  ZPO_DLV_DT?: string
  ZPLN_ST_DT?: string
  ZPLN_ED_DT?: string
}

interface ContractItemsCardProps {
  items: ContractItem[]
  currency?: string | null
}

export function ContractItemsCard({ items, currency }: ContractItemsCardProps) {
  if (!items || items.length === 0) {
    return null
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">계약 품목</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="border-b bg-muted/50">
              <tr>
                <th className="px-4 py-3 text-left font-medium">자재번호</th>
                <th className="px-4 py-3 text-left font-medium">품목/자재내역</th>
                <th className="px-4 py-3 text-left font-medium">규격</th>
                <th className="px-4 py-3 text-right font-medium">수량</th>
                <th className="px-4 py-3 text-right font-medium">단가</th>
                <th className="px-4 py-3 text-right font-medium">기본총액(BRTWR)</th>
                <th className="px-4 py-3 text-right font-medium">조정금액(ZPDT)</th>
                <th className="px-4 py-3 text-right font-medium">최종정가(NETWR)</th>
                <th className="px-4 py-3 text-center font-medium">납기일자</th>
              </tr>
            </thead>
            <tbody>
              {items.map((item, idx) => (
                <tr key={idx} className="border-b last:border-0">
                  <td className="px-4 py-3">{item.materialNo || "-"}</td>
                  <td className="px-4 py-3">{item.itemDescription || "-"}</td>
                  <td className="px-4 py-3">{item.specification || "-"}</td>
                  <td className="px-4 py-3 text-right">
                    {item.quantity} {item.ZPO_UNIT || item.quantityUnit || ""}
                  </td>
                  <td className="px-4 py-3 text-right font-mono">
                    {item.unitPrice
                      ? currency
                        ? formatCurrency(
                            parseFloat(item.unitPrice.toString()),
                            currency
                          )
                        : formatNumber(parseFloat(item.unitPrice.toString()))
                      : "-"}
                  </td>
                  <td className="px-4 py-3 text-right font-mono">
                    {item.BRTWR
                      ? currency
                        ? formatCurrency(item.BRTWR, currency)
                        : formatNumber(item.BRTWR)
                      : "-"}
                  </td>
                  <td className="px-4 py-3 text-right font-mono">
                    {item.ZPDT_EXDS_AMT
                      ? currency
                        ? formatCurrency(item.ZPDT_EXDS_AMT, currency)
                        : formatNumber(item.ZPDT_EXDS_AMT)
                      : "-"}
                  </td>
                  <td className="px-4 py-3 text-right font-mono font-medium">
                    {item.NETWR
                      ? currency
                        ? formatCurrency(item.NETWR, currency)
                        : formatNumber(item.NETWR)
                      : "-"}
                  </td>
                  <td className="px-4 py-3 text-center">
                    {item.ZPO_DLV_DT || "-"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  )
}