"use client";

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

const INSPECTION_ITEMS = [
  {
    no: 1,
    item: "외관상태",
    subItem: "ee",
    method: "육안 및 뒤틀림이 없을 것",
    standard: "A",
    measured: ["A", "A", "A", "A", "A", "A", "A", "A"],
    result: "합격" as const,
  },
  {
    no: 2,
    item: "표면 및 표시",
    subItem: "ff",
    method: "100표에서 1시간 방치",
    standard: "O",
    measured: ["O", "O", "O", "O", "O", "O", "O", "O"],
    result: "합격" as const,
  },
  {
    no: 3,
    item: "치수 yy",
    subItem: "yy",
    method: "길이",
    standard: "453.9±0.9",
    measured: ["453.6", "453.6", "454.4", "453.5", "453.1", "454.1", "454.3", "454.7"],
    result: "합격" as const,
  },
  {
    no: 4,
    item: "치수 hhh",
    subItem: "hhh",
    method: "폭",
    standard: "177.3±0.5",
    measured: ["177.4", "177.1", "177.5", "177.6", "177.3", "176.9", "177.7", "176.8"],
    result: "합격" as const,
  },
  {
    no: 5,
    item: "외관상태",
    subItem: "",
    method: "ff",
    standard: "A",
    measured: ["A", "A", "A", "A", "A", "A", "A", "A"],
    result: "합격" as const,
  },
];

// ── 정보 카드 (CardRenderer 구조를 참고한 정적 구현) ────────────────────────

function InfoCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="border-2 border-[#1E3A5F]">
      <div className="bg-[#EFF6FF] border-b-2 border-[#1E3A5F] px-4 py-2">
        <h3 className="text-sm text-[#0F172A]">▣ {title}</h3>
      </div>
      <div className="p-4 space-y-2 text-xs">{children}</div>
    </div>
  );
}

function InfoRow({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {
  return (
    <div className="grid grid-cols-[100px,1fr] border-b border-[#E2E8F0] pb-1">
      <span className="text-[#64748B]">{label}</span>
      <span className={highlight ? "text-[#2563EB]" : "text-[#0F172A]"}>{value}</span>
    </div>
  );
}

// ── 결재란 ────────────────────────────────────────────────────────────────────

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}, 96px)` }}>
          {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 InspectionReportPage() {
  return (
    <DocumentLayout title="검사 보고서" docNumber="IR-2026-00123">
      <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-3xl tracking-widest">검 사 보 고 서</h1>
            <p className="text-xs mt-1 tracking-wider">INSPECTION REPORT</p>
          </div>
          <div className="bg-white px-6 py-3 flex justify-between items-center border-t-2 border-[#1E3A5F]">
            <div className="text-sm text-[#64748B]">문서번호: IR-2026-00123</div>
            <StatusBadge status="합격" size="lg" />
          </div>
        </div>

        {/* ── 기본 정보 (2열 카드) ── */}
        <div className="grid grid-cols-2 gap-4 mb-6">
          <InfoCard title="검사 대상">
            <InfoRow label="발행번호" value="HC2014 - 005" />
            <InfoRow label="협력업체" value="매직볼드" />
            <InfoRow label="규격명" value="SATA-234" highlight />
            <InfoRow label="수주계측기" value="버니어캘리퍼스 (Serial No.) #05233911" />
            <InfoRow label="검사전환일" value="저울 (Serial No.) #258-98-22" />
          </InfoCard>

          <InfoCard title="검사 정보">
            <InfoRow label="생산일자" value="2014-03-10" highlight />
            <InfoRow label="검사수량" value="565" />
            <InfoRow label="검사레벨" value="일반검사1" />
            <InfoRow label="AQL" value="1.5" />
            <InfoRow label="검사일자" value="2014-03-10" highlight />
            <InfoRow label="시료수량" value="8" />
            <InfoRow label="검사자" value="김수로" />
          </InfoCard>
        </div>

        {/* ── 검사 항목 테이블 ── */}
        <div className="mb-6">
          <div className="bg-[#EFF6FF] border-2 border-[#1E3A5F] border-b-0 px-4 py-2">
            <h3 className="text-sm text-[#0F172A]">▣ 검사/시험 측정값</h3>
          </div>
          <div className="border-2 border-[#1E3A5F]">
            <table className="w-full text-xs">
              <thead>
                <tr className="bg-[#1E3A5F] text-white">
                  <th className="px-3 py-2 text-center border-r-2 border-white" rowSpan={2}>검사항목</th>
                  <th className="px-3 py-2 text-center border-r-2 border-white" rowSpan={2}>
                    시험 및 검사대응<br />(검사기준)
                  </th>
                  <th className="px-3 py-2 text-center border-r-2 border-white" colSpan={8}>
                    검사/시험 측정값
                  </th>
                  <th className="px-3 py-2 text-center border-r-2 border-white" rowSpan={2}>X̄</th>
                  <th className="px-3 py-2 text-center" rowSpan={2}>합격 판정</th>
                </tr>
                <tr className="bg-[#1E3A5F] text-white border-t-2 border-white">
                  {["X1", "X2", "X3", "X4", "X5", "X6", "X7", "X8"].map((x) => (
                    <th key={x} className="px-2 py-2 text-center border-r-2 border-white">{x}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {INSPECTION_ITEMS.map((item, idx) => (
                  <tr key={item.no} className={`border-t border-[#E2E8F0] ${idx % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
                    <td className="px-3 py-2 border-r border-[#E2E8F0]">
                      <div>{item.item}</div>
                      {item.subItem && <div className="text-[#64748B]">{item.subItem}</div>}
                    </td>
                    <td className="px-3 py-2 border-r border-[#E2E8F0]">
                      <div>{item.method}</div>
                      {(item.method === "길이" || item.method === "폭") && (
                        <div className="text-[#64748B] mt-1">{item.standard}</div>
                      )}
                    </td>
                    {item.measured.map((val, i) => (
                      <td key={i} className="px-2 py-2 text-center border-r border-[#E2E8F0]">{val}</td>
                    ))}
                    <td className="px-3 py-2 text-center border-r border-[#E2E8F0]">8</td>
                    <td className="px-3 py-2 text-center">
                      <StatusBadge status={item.result} size="sm" />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* 범례 */}
          <div className="mt-3 flex items-center gap-6 text-xs text-[#64748B]">
            <div className="flex items-center gap-2">
              <span className="px-2 py-1 border-2 border-[#D97706] bg-yellow-100 text-[#0F172A]">비 고</span>
              <span>[범례] A : Accept, R : Reject, H : Hold</span>
            </div>
            <div className="flex items-center gap-2">
              <span>중량판정</span>
              <span className="px-2 py-1 bg-[#1E3A5F] text-white border-2 border-[#1E3A5F]">■ 합 격</span>
            </div>
          </div>
        </div>

        {/* ── 결재란 ── */}
        <ApprovalSection columns={["작성", "검토", "승인"]} />

        {/* ── 푸터 ── */}
        <div className="text-xs text-[#64748B] flex justify-between items-center pt-4 border-t-2 border-[#1E3A5F]">
          <div>양식번호 : QF-805-2 (Rev.0)</div>
          <div>A4(210mm×297mm)</div>
        </div>
      </div>
    </DocumentLayout>
  );
}
