/**
 * 驗收頁面 - 訂單資訊卡片 (Level 1)
 */

import { AlertCircle, CheckCircle2, Package } from "lucide-react";
import type { PurchaseOrder } from "../../types/purchase-order";
import { formatCurrency } from "../../utils/purchase-order";
import { StatusProgressBar } from "../purchase-order/StatusProgressBar";

interface InspectionOrderInfoProps {
  order: PurchaseOrder;
  hasIssues: boolean;
}

export function InspectionOrderInfo({ order, hasIssues }: InspectionOrderInfoProps) {
  return (
    <div className="bg-card rounded-lg border-2 border-border p-6">
      {/* 狀態流程條 */}
      <StatusProgressBar currentStatus={order.status} />

      {/* 狀態指示 */}
      <div className="flex items-center gap-2 mb-4">
        {hasIssues ? (
          <>
            <AlertCircle className="h-5 w-5 text-warning" />
            <span className="text-warning">部分異常</span>
          </>
        ) : (
          <>
            <CheckCircle2 className="h-5 w-5 text-success" />
            <span className="text-success">驗收正常</span>
          </>
        )}
      </div>

      {/* 訂單資訊 */}
      <div className="space-y-4">
        {/* 採購單編號 */}
        <div>
          <div className="flex items-center gap-2 mb-1">
            <Package className="h-4 w-4 text-muted-foreground" />
            <span className="caption text-muted-foreground">採購單編號</span>
          </div>
          <p className="font-mono">{order.poNumber}</p>
        </div>

        {/* 供應商與日期 - 手機單欄，平板以上雙欄 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <div className="caption text-muted-foreground mb-1">供應商</div>
            <p>{order.supplierName}</p>
          </div>
          <div>
            <div className="caption text-muted-foreground mb-1">預計到貨日</div>
            <p>{order.expectedDate}</p>
          </div>
        </div>

        {/* 原訂金額 */}
        <div>
          <div className="caption text-muted-foreground mb-1">原訂金額</div>
          <p className="text-primary-main">{formatCurrency(order.totalAmount)}</p>
        </div>
      </div>
    </div>
  );
}