"use client";

import Link from "next/link";
import { ArrowLeft, ClipboardCheck, FileText, ShoppingCart } from "lucide-react";

const SAMPLES = [
  {
    title: "검사 보고서",
    titleEng: "Inspection Report",
    description: "품질 검사 결과를 기록하고 관리하는 문서입니다. 검사 항목, 측정값, 합격/불합격 판정을 포함합니다.",
    path: "/admin/screenMng/reportList/samples/inspection",
    icon: ClipboardCheck,
    docNo: "IR-2026-XXXX",
  },
  {
    title: "견적서",
    titleEng: "Quotation",
    description: "고객에게 제공하는 견적 문서입니다. 품목별 단가, 수량, 공급가액, 세액을 포함합니다.",
    path: "/admin/screenMng/reportList/samples/quotation",
    icon: FileText,
    docNo: "QT-2026-XXXX",
  },
  {
    title: "발주서",
    titleEng: "Purchase Order",
    description: "공급업체에 발주하는 공식 문서입니다. 발주처 정보, 발주 내역, 납기일 등을 포함합니다.",
    path: "/admin/screenMng/reportList/samples/purchase-order",
    icon: ShoppingCart,
    docNo: "PO-2026-XXXX",
  },
];

export default function SamplesPage() {
  return (
    <div className="min-h-screen bg-[#F8F9FC]">
      {/* Header */}
      <div className="bg-[#1E3A5F] border-b-4 border-[#0F172A] px-6 py-3">
        <div className="max-w-5xl mx-auto flex items-center gap-4">
          <Link
            href="/admin/screenMng/reportList"
            className="flex items-center gap-2 text-white hover:text-[#EFF6FF] transition-colors border-2 border-white px-3 py-1 text-sm"
          >
            <ArrowLeft className="w-4 h-4" />
            리포트 목록
          </Link>
          <div className="h-6 w-px bg-[#64748B]" />
          <h1 className="text-white text-lg">리포트 디자인 샘플</h1>
        </div>
      </div>

      <div className="py-10 px-6">
        <div className="max-w-5xl mx-auto">
          {/* Title Section */}
          <div className="bg-white border-4 border-[#1E3A5F] p-8 mb-8 text-center">
            <h2 className="text-3xl text-[#0F172A] border-b-4 border-[#2563EB] pb-4 mb-4">
              WACE PLM — 문서 양식 샘플
            </h2>
            <p className="text-[#64748B] text-sm">
              리포트 디자이너에서 활용 가능한 표준 문서 양식 샘플입니다.
              <br />
              카드(정보패널), 테이블, 결재란 등 기본 컴포넌트로 구성되었습니다.
            </p>
          </div>

          {/* Sample Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {SAMPLES.map((sample) => (
              <Link
                key={sample.path}
                href={sample.path}
                className="bg-white border-2 border-[#1E3A5F] hover:bg-[#EFF6FF] transition-colors group block"
              >
                <div className="border-b-2 border-[#1E3A5F] bg-[#EFF6FF] p-5 text-center group-hover:bg-[#DBEAFE] transition-colors">
                  <sample.icon className="w-10 h-10 mx-auto text-[#2563EB] mb-2" />
                  <p className="text-xs text-[#64748B]">{sample.docNo}</p>
                </div>
                <div className="p-6">
                  <h3 className="text-xl text-[#0F172A] text-center border-b border-[#E2E8F0] pb-2 mb-3">
                    {sample.title}
                  </h3>
                  <p className="text-xs text-[#64748B] text-center mb-1">{sample.titleEng}</p>
                  <p className="text-[#64748B] text-sm leading-relaxed text-center mt-3">
                    {sample.description}
                  </p>
                  <div className="mt-6 text-center">
                    <span className="inline-block border-2 border-[#2563EB] px-4 py-2 text-sm text-[#2563EB] hover:bg-[#2563EB] hover:text-white transition-colors">
                      샘플 보기 →
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          <div className="mt-12 text-center bg-white border-2 border-[#1E3A5F] p-4">
            <p className="text-[#64748B] text-xs">A4 인쇄 최적화 · WACE PLM 리포트 디자이너 v2.0</p>
          </div>
        </div>
      </div>
    </div>
  );
}
