"use client";

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

const ITEMS = [
  { no: 1, name: "프리미엄 제품 A", spec: "Model-X1000", qty: 50, unit: "EA", price: 150000 },
  { no: 2, name: "스탠다드 제품 B", spec: "Model-S500", qty: 100, unit: "EA", price: 80000 },
  { no: 3, name: "베이직 제품 C", spec: "Model-B200", qty: 200, unit: "EA", price: 45000 },
];

const EMPTY_ROWS = 5;

function ApprovalSection({ columns }: { columns: string[] }) {
  return (
    <div className="flex justify-end mb-6">
      <div className="border-2 border-[#1E3A5F]">
        <div className="grid text-center text-xs" style={{ gridTemplateColumns: `repeat(${columns.length}, 80px)` }}>
          {columns.map((col, i) => (
            <div key={i} className={`p-3 ${i < columns.length - 1 ? "border-r-2 border-[#1E3A5F]" : ""}`}>
              <div className="text-[#64748B] mb-6 pb-2 border-b border-[#E2E8F0]">{col}</div>
              <div className="h-12" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

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

  return (
    <DocumentLayout title="견적서" docNumber="QT-2026-01234">
      <div className="p-10">
        {/* ── 헤더 ── */}
        <div className="border-4 border-[#1E3A5F] mb-6">
          <div className="bg-[#1E3A5F] text-white px-6 py-4 text-center">
            <h1 className="text-4xl tracking-[0.5em]">견 적 서</h1>
            <p className="text-xs mt-2 tracking-wider">QUOTATION</p>
          </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]">문서번호: QT-2026-01234</div>
          </div>
        </div>

        {/* ── 날짜 / 수신 ── */}
        <div className="mb-6 text-right">
          <div className="inline-block text-sm">
            <div className="flex items-center gap-3 mb-2">
              <span className="border-b-2 border-[#2563EB] px-8 pb-1">2026</span>
              <span className="text-[#64748B]">년</span>
              <span className="border-b-2 border-[#2563EB] px-6 pb-1">03</span>
              <span className="text-[#64748B]">월</span>
              <span className="border-b-2 border-[#2563EB] px-6 pb-1">09</span>
              <span className="text-[#64748B]">일</span>
            </div>
            <div className="border-b-2 border-[#1E3A5F] pb-2 text-lg">
              <span className="mr-8 text-[#0F172A]">(주) ○○○○</span>
              <span className="text-[#0F172A]">귀하</span>
            </div>
          </div>
        </div>

        {/* ── 견적명 / 공급자 (2열 카드) ── */}
        <div className="grid grid-cols-2 gap-4 mb-6">
          <div className="border-2 border-[#1E3A5F]">
            <div className="bg-[#1E3A5F] text-white px-4 py-2 text-sm text-center border-b-2 border-[#1E3A5F]">
              견 적 명
            </div>
            <div className="p-4 bg-white h-16" />
          </div>
          <div className="border-2 border-[#1E3A5F]">
            <div className="bg-[#1E3A5F] text-white px-4 py-2 text-sm text-center border-b-2 border-[#1E3A5F]">
              공 급 자
            </div>
            <div className="p-3 bg-white text-xs space-y-1">
              <div className="grid grid-cols-2 gap-2 border-b border-[#E2E8F0] pb-1">
                <span className="text-[#64748B]">등록번호</span>
                <span className="text-[#64748B]">상호(법인명) / 성명</span>
              </div>
              <div className="grid grid-cols-2 gap-2 border-b border-[#E2E8F0] pb-1">
                <span className="text-[#64748B]">업태 / 업종</span>
                <span className="text-[#64748B]">주소</span>
              </div>
              <div className="border-b border-[#E2E8F0] pb-1 text-[#64748B]">
                전화번호 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 팩스
              </div>
            </div>
          </div>
        </div>

        {/* ── 합계금액 ── */}
        <div className="border-2 border-[#1E3A5F] mb-6">
          <div className="bg-[#1E3A5F] text-white px-4 py-2 text-sm text-center">합 계 금 액</div>
          <div className="p-4 bg-white text-center text-2xl border-t-2 border-[#1E3A5F] text-[#2563EB]">
            ₩ {total.toLocaleString()} 원정
          </div>
        </div>

        {/* ── 품목 테이블 ── */}
        <div className="mb-6 border-2 border-[#1E3A5F]">
          <table className="w-full text-xs">
            <thead>
              <tr className="bg-[#1E3A5F] text-white">
                {["품번", "품명", "규격", "수량", "단가", "공급가액", "세액", "비고"].map((h, i) => (
                  <th key={i} className={`px-3 py-3 text-center ${i < 7 ? "border-r-2 border-white" : ""}`}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {ITEMS.map((item, idx) => {
                const amount = item.qty * item.price;
                const itemTax = Math.round(amount * 0.1);
                return (
                  <tr key={item.no} className={`border-t-2 border-[#E2E8F0] ${idx % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
                    <td className="px-2 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 border-r border-[#E2E8F0]">{item.spec}</td>
                    <td className="px-2 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]">{amount.toLocaleString()}</td>
                    <td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{itemTax.toLocaleString()}</td>
                    <td className="px-3 py-3 text-center" />
                  </tr>
                );
              })}
              {Array.from({ length: EMPTY_ROWS }).map((_, idx) => (
                <tr key={`e${idx}`} className={`border-t border-[#E2E8F0] ${(ITEMS.length + idx) % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
                  <td className="px-2 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-10" />
                  <td className="px-3 py-3 border-r border-[#E2E8F0]" />
                  <td className="px-2 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>
              ))}
              {/* 합계 행 */}
              <tr className="border-t-2 border-[#1E3A5F] bg-[#EFF6FF]">
                <td colSpan={3} className="px-4 py-3 text-center border-r-2 border-[#1E3A5F] text-[#0F172A]">합 계</td>
                <td className="px-2 py-3 border-r border-[#E2E8F0]" />
                <td className="px-3 py-3 border-r border-[#E2E8F0]" />
                <td className="px-3 py-3 text-right border-r border-[#E2E8F0] text-[#2563EB]">{supplyAmount.toLocaleString()}</td>
                <td className="px-3 py-3 text-right border-r border-[#E2E8F0] text-[#2563EB]">{tax.toLocaleString()}</td>
                <td className="px-3 py-3" />
              </tr>
            </tbody>
          </table>
        </div>

        {/* ── 금액 요약 (우측 정렬) ── */}
        <div className="flex justify-end mb-6">
          <div className="border-2 border-[#1E3A5F] min-w-[300px]">
            <table className="w-full text-sm">
              <tbody>
                <tr className="border-b-2 border-[#E2E8F0]">
                  <td className="px-4 py-2 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">공급가액</td>
                  <td className="px-4 py-2 text-right text-[#0F172A]">₩ {supplyAmount.toLocaleString()}</td>
                </tr>
                <tr className="border-b-2 border-[#1E3A5F]">
                  <td className="px-4 py-2 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">부가세 (10%)</td>
                  <td className="px-4 py-2 text-right text-[#0F172A]">₩ {tax.toLocaleString()}</td>
                </tr>
                <tr className="bg-[#1E3A5F] text-white">
                  <td className="px-4 py-2 border-r-2 border-white">합계금액</td>
                  <td className="px-4 py-2 text-right">₩ {total.toLocaleString()}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* ── 안내문 ── */}
        <div className="border-2 border-[#1E3A5F] p-4 mb-6 bg-[#F8F9FC]">
          <p className="text-sm text-[#0F172A] mb-1">위와 같이 견적합니다.</p>
          <p className="text-sm text-[#0F172A] mb-1">상기 견적서의 품목과 금액을 확인해 주시기 바랍니다.</p>
          <p className="text-sm text-[#0F172A]">감사합니다.</p>
        </div>

        {/* ── 결재란 ── */}
        <ApprovalSection columns={["담당", "검토", "승인", "대표"]} />

        {/* ── 푸터 ── */}
        <div className="text-xs text-[#64748B] border-t-2 border-[#1E3A5F] pt-3">
          <div className="flex justify-between mb-1">
            <div>본 견적서의 유효기간은 견적일로부터 7일입니다.</div>
          </div>
          <div className="flex justify-between">
            <div>결제계좌: (예금주: )</div>
            <div>문의: TEL 000-0000-0000 / FAX 000-0000-0000</div>
          </div>
        </div>
      </div>
    </DocumentLayout>
  );
}
