"use client";

import DocumentLayout from "../components/DocumentLayout";
import StatusBadge from "../components/StatusBadge";

const ITEMS = [
  { no: 1, code: "P-001", name: "원자재 A", spec: "KS-100", unit: "KG", qty: 500, price: 5000 },
  { no: 2, code: "P-002", name: "부품 B", spec: "ISO-200", unit: "EA", qty: 1000, price: 3000 },
  { no: 3, code: "P-003", name: "자재 C", spec: "JIS-300", unit: "M", qty: 200, price: 8000 },
];

const EMPTY_ROWS = 10;

// ── 발주처 정보 테이블 행 ─────────────────────────────────────────────────────

function InfoRow({
  label,
  children,
  highlight,
  colSpan,
}: {
  label: string;
  children?: React.ReactNode;
  highlight?: boolean;
  colSpan?: number;
}) {
  const labelBg = highlight ? "bg-yellow-100" : "bg-[#EFF6FF]";
  return (
    <>
      <td className={`py-2 px-3 ${labelBg} border-r-2 border-[#1E3A5F] text-[#0F172A] w-28`}>{label}</td>
      <td className={`py-2 px-3 text-[#64748B]`} colSpan={colSpan ?? 1}>
        {children}
      </td>
    </>
  );
}

export default function PurchaseOrderPage() {
  const totalAmount = ITEMS.reduce((sum, item) => sum + item.qty * item.price, 0);
  const tax = Math.round(totalAmount * 0.1);
  const grandTotal = totalAmount + tax;

  return (
    <DocumentLayout title="발주서" docNumber="PO-2026-00789">
      <div className="p-10">
        {/* ── 헤더 ── */}
        <div className="border-4 border-[#1E3A5F] mb-6">
          <div className="flex items-center justify-between bg-[#1E3A5F] text-white px-6 py-4">
            <div>
              <h1 className="text-3xl tracking-[0.5em]">발 주 서</h1>
              <p className="text-xs mt-1 tracking-wider">PURCHASE ORDER</p>
            </div>
            <div className="flex items-center gap-4">
              <StatusBadge status="발주완료" size="md" />
              {/* 결재란 인라인 */}
              <div className="border-2 border-white">
                <div className="grid grid-cols-4 text-xs">
                  {["담당", "부서장", "임원", "사장"].map((col, i) => (
                    <div key={i} className={`px-3 py-2 text-center ${i < 3 ? "border-r-2 border-white" : ""}`}>
                      {col}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── 문서 번호 ── */}
        <div className="mb-6 text-right">
          <div className="inline-block border-2 border-[#1E3A5F] px-6 py-2 bg-[#F8F9FC]">
            <div className="text-sm text-[#64748B]">발주번호: PO-2026-00789</div>
          </div>
        </div>

        {/* ── 발주처 정보 카드 ── */}
        <div className="mb-6 border-2 border-[#1E3A5F]">
          <div className="bg-[#EFF6FF] border-b-2 border-[#1E3A5F] px-4 py-2 text-sm text-[#0F172A]">
            ▣ 발주처 정보
          </div>
          <div className="p-4 bg-white">
            <table className="w-full text-xs border-collapse">
              <tbody>
                <tr className="border-b border-[#E2E8F0]">
                  <InfoRow label="수 신 처" />
                  <td className="py-2 px-3 border-r border-[#E2E8F0] w-1/3" />
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] w-20 text-[#0F172A]">TEL</td>
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] w-20 text-[#0F172A]">담당</td>
                  <td className="py-2 px-3" />
                </tr>
                <tr className="border-b border-[#E2E8F0]">
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F]" />
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">FAX</td>
                  <td className="py-2 px-3" colSpan={3} />
                </tr>
                <tr className="border-b border-[#E2E8F0]">
                  <InfoRow label="발 신 처" />
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">TEL</td>
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">담당</td>
                  <td className="py-2 px-3" />
                </tr>
                <tr className="border-b-2 border-[#1E3A5F]">
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F]" />
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">FAX</td>
                  <td className="py-2 px-3" colSpan={3} />
                </tr>
                <tr className="border-b border-[#E2E8F0]">
                  <InfoRow label="납품일정" highlight />
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A]">TEL</td>
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A]">현장담당</td>
                  <td className="py-2 px-3" />
                </tr>
                <tr className="border-b border-[#E2E8F0]">
                  <td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F]" />
                  <td className="py-2 px-3 border-r border-[#E2E8F0]" />
                  <td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A]">FAX</td>
                  <td className="py-2 px-3" colSpan={3} />
                </tr>
                <tr className="border-b-2 border-[#1E3A5F]">
                  <InfoRow label="납 기 일" highlight />
                  <td className="py-2 px-3 text-[#64748B]" colSpan={3}>20___년 ___월 ___일</td>
                  <td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A] w-20">인도조건</td>
                  <td className="py-2 px-3" />
                </tr>
                <tr className="border-b border-[#E2E8F0]">
                  <InfoRow label="대금결제조건" highlight colSpan={5} />
                </tr>
                <tr>
                  <InfoRow label="검 수 방 법" highlight colSpan={5} />
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* ── 발주 내역 테이블 ── */}
        <div className="mb-6">
          <div className="bg-[#EFF6FF] border-2 border-[#1E3A5F] border-b-0 px-4 py-2 text-sm text-[#0F172A]">
            ▣ 발주 내역
          </div>
          <div className="border-2 border-[#1E3A5F]">
            <table className="w-full text-xs">
              <thead>
                <tr className="bg-[#1E3A5F] text-white">
                  {["NO", "품 명", "규격", "단위", "수량", "단가", "금액", "비고"].map((h, i) => (
                    <th key={i} className={`px-3 py-3 text-center ${i < 7 ? "border-r-2 border-white" : ""} ${i === 0 ? "w-12" : ""} ${i === 3 || i === 4 ? "w-16" : ""} ${i === 7 ? "w-20" : ""}`}>
                      {h}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {ITEMS.map((item, idx) => (
                  <tr key={item.no} className={`border-b border-[#E2E8F0] ${idx % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
                    <td className="px-3 py-3 text-center border-r border-[#E2E8F0]">{item.no}</td>
                    <td className="px-3 py-3 border-r border-[#E2E8F0]">{item.name}</td>
                    <td className="px-3 py-3 text-center border-r border-[#E2E8F0]">{item.spec}</td>
                    <td className="px-3 py-3 text-center border-r border-[#E2E8F0]">{item.unit}</td>
                    <td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{item.qty.toLocaleString()}</td>
                    <td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{item.price.toLocaleString()}</td>
                    <td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{(item.qty * item.price).toLocaleString()}</td>
                    <td className="px-3 py-3 text-center" />
                  </tr>
                ))}
                {Array.from({ length: EMPTY_ROWS }).map((_, idx) => (
                  <tr key={`e${idx}`} className={`border-b border-[#E2E8F0] ${(ITEMS.length + idx) % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
                    <td className="px-3 py-3 text-center border-r border-[#E2E8F0] text-[#CBD5E1]">{ITEMS.length + idx + 1}</td>
                    <td className="px-3 py-3 border-r border-[#E2E8F0] h-8" />
                    <td className="px-3 py-3 border-r border-[#E2E8F0]" />
                    <td className="px-3 py-3 border-r border-[#E2E8F0]" />
                    <td className="px-3 py-3 border-r border-[#E2E8F0]" />
                    <td className="px-3 py-3 border-r border-[#E2E8F0]" />
                    <td className="px-3 py-3 border-r border-[#E2E8F0]" />
                    <td className="px-3 py-3" />
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* ── 금액 요약 ── */}
        <div className="border-2 border-[#1E3A5F] mb-6">
          <table className="w-full text-sm">
            <tbody>
              <tr>
                <td className="px-4 py-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-center w-32 text-[#0F172A]">공급가액</td>
                <td className="px-4 py-3 text-right border-r-2 border-[#1E3A5F] text-[#0F172A]">₩ {totalAmount.toLocaleString()}</td>
                <td className="px-4 py-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-center w-32 text-[#0F172A]">부가세액</td>
                <td className="px-4 py-3 text-right border-r-2 border-[#1E3A5F] text-[#0F172A]">₩ {tax.toLocaleString()}</td>
                <td className="px-4 py-3 bg-[#1E3A5F] text-white text-center w-32">합계금액</td>
                <td className="px-4 py-3 text-right bg-[#1E3A5F] text-white">₩ {grandTotal.toLocaleString()}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* ── 안내문 ── */}
        <div className="border-2 border-[#1E3A5F] p-4 text-center mb-6 bg-[#F8F9FC]">
          <p className="text-sm text-[#0F172A]">상기 자재를 발주하오니 납기를 준수하여 인도 바랍니다.</p>
        </div>

        {/* ── 푸터 ── */}
        <div className="text-xs text-[#64748B] border-t-2 border-[#1E3A5F] pt-3 flex justify-between">
          <div>양식번호: PO-001 (Rev.2)</div>
          <div>문의: TEL 000-0000-0000 / FAX 000-0000-0000</div>
        </div>
      </div>
    </DocumentLayout>
  );
}
