'use client';

/**
 * 제품검사요청서 문서
 *
 * 기획서 기반:
 * - 결재라인 (작성/승인)
 * - 기본정보 (수주처, 업체명, 담당자 등)
 * - 입력사항 (건축공사장, 자재유통업자, 공사시공자, 공사감리자)
 * - 검사대상 사전 고지 정보 테이블
 */

import {
  ConstructionApprovalTable,
  DocumentWrapper,
  DocumentTable,
  DOC_STYLES,
} from '@/components/document-system';
import type { InspectionRequestDocument as InspectionRequestDocumentType } from '../types';

interface InspectionRequestDocumentProps {
  data: InspectionRequestDocumentType;
}

/** 라벨 셀 */
const lbl = `${DOC_STYLES.label} w-28`;
/** 서브 라벨 셀 (bg-gray-50) */
const subLbl = 'bg-gray-50 px-2 py-1 font-medium border-r border-gray-300 w-28';
/** 값 셀 */
const val = DOC_STYLES.value;

export function InspectionRequestDocument({ data }: InspectionRequestDocumentProps) {
  return (
    <DocumentWrapper fontSize="text-[11px]">
      {/* 헤더: 제목 (좌측) + 결재란 (우측) */}
      <div className="flex justify-between items-start mb-4">
        <div>
          <h1 className="text-2xl font-bold tracking-widest mb-2">제 품 검 사 요 청 서</h1>
          <div className="text-[10px] space-y-1">
            <div className="flex gap-4">
              <span>문서번호: <strong>{data.documentNumber}</strong></span>
              <span>작성일자: <strong>{data.createdDate}</strong></span>
            </div>
          </div>
        </div>

        <ConstructionApprovalTable
          approvers={{
            writer: data.approvalLine[0]
              ? { name: data.approvalLine[0].name, department: data.approvalLine[0].department }
              : undefined,
            approver1: data.approvalLine[1]
              ? { name: data.approvalLine[1].name, department: data.approvalLine[1].department }
              : undefined,
            approver2: data.approvalLine[2]
              ? { name: data.approvalLine[2].name, department: data.approvalLine[2].department }
              : undefined,
            approver3: data.approvalLine[3]
              ? { name: data.approvalLine[3].name, department: data.approvalLine[3].department }
              : undefined,
          }}
        />
      </div>

      {/* 기본 정보 */}
      <DocumentTable header="기본 정보" headerVariant="light" spacing="mb-4">
        <tbody>
          <tr className="border-b border-gray-300">
            <td className={lbl}>수주처</td>
            <td className={`${val} border-r border-gray-300`}>{data.client || '-'}</td>
            <td className={lbl}>업체명</td>
            <td className={val}>{data.companyName || '-'}</td>
          </tr>
          <tr className="border-b border-gray-300">
            <td className={lbl}>담당자</td>
            <td className={`${val} border-r border-gray-300`}>{data.manager || '-'}</td>
            <td className={lbl}>수주번호</td>
            <td className={val}>{data.orderNumber || '-'}</td>
          </tr>
          <tr className="border-b border-gray-300">
            <td className={lbl}>담당자 연락처</td>
            <td className={`${val} border-r border-gray-300`}>{data.managerContact || '-'}</td>
            <td className={lbl}>현장명</td>
            <td className={val}>{data.siteName || '-'}</td>
          </tr>
          <tr className="border-b border-gray-300">
            <td className={lbl}>납품일</td>
            <td className={`${val} border-r border-gray-300`}>{data.deliveryDate || '-'}</td>
            <td className={lbl}>현장 주소</td>
            <td className={val}>{data.siteAddress || '-'}</td>
          </tr>
          <tr>
            <td className={lbl}>총 개소</td>
            <td className={`${val} border-r border-gray-300`}>{data.totalLocations || '-'}</td>
            <td className={lbl}>접수일</td>
            <td className={val}>{data.receptionDate || '-'}</td>
          </tr>
          <tr className="border-t border-gray-300">
            <td className={lbl}>검사방문요청일</td>
            <td className={val} colSpan={3}>{data.visitRequestDate || '-'}</td>
          </tr>
        </tbody>
      </DocumentTable>

      {/* 입력사항: 4개 섹션 */}
      <div className="border border-gray-400 mb-4">
        <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">입력사항</div>

        {/* 건축공사장 정보 */}
        <div className="border-b border-gray-300">
          <div className="bg-gray-100 px-2 py-1 font-medium border-b border-gray-300">건축공사장 정보</div>
          <table className="w-full">
            <tbody>
              <tr>
                <td className={subLbl}>현장명</td>
                <td className={`${val} border-r border-gray-300`}>{data.constructionSite.siteName || '-'}</td>
                <td className={subLbl}>대지위치</td>
                <td className={`${val} border-r border-gray-300`}>{data.constructionSite.landLocation || '-'}</td>
                <td className={`${subLbl} w-20`}>지번</td>
                <td className={val}>{data.constructionSite.lotNumber || '-'}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 자재유통업자 정보 */}
        <div className="border-b border-gray-300">
          <div className="bg-gray-100 px-2 py-1 font-medium border-b border-gray-300">자재유통업자 정보</div>
          <table className="w-full">
            <tbody>
              <tr className="border-b border-gray-300">
                <td className={subLbl}>회사명</td>
                <td className={`${val} border-r border-gray-300`}>{data.materialDistributor.companyName || '-'}</td>
                <td className={subLbl}>회사주소</td>
                <td className={val}>{data.materialDistributor.companyAddress || '-'}</td>
              </tr>
              <tr>
                <td className={subLbl}>대표자명</td>
                <td className={`${val} border-r border-gray-300`}>{data.materialDistributor.representativeName || '-'}</td>
                <td className={subLbl}>전화번호</td>
                <td className={val}>{data.materialDistributor.phone || '-'}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 공사시공자 정보 */}
        <div className="border-b border-gray-300">
          <div className="bg-gray-100 px-2 py-1 font-medium border-b border-gray-300">공사시공자 정보</div>
          <table className="w-full">
            <tbody>
              <tr className="border-b border-gray-300">
                <td className={subLbl}>회사명</td>
                <td className={`${val} border-r border-gray-300`}>{data.constructorInfo.companyName || '-'}</td>
                <td className={subLbl}>회사주소</td>
                <td className={val}>{data.constructorInfo.companyAddress || '-'}</td>
              </tr>
              <tr>
                <td className={subLbl}>성명</td>
                <td className={`${val} border-r border-gray-300`}>{data.constructorInfo.name || '-'}</td>
                <td className={subLbl}>전화번호</td>
                <td className={val}>{data.constructorInfo.phone || '-'}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 공사감리자 정보 */}
        <div>
          <div className="bg-gray-100 px-2 py-1 font-medium border-b border-gray-300">공사감리자 정보</div>
          <table className="w-full">
            <tbody>
              <tr className="border-b border-gray-300">
                <td className={subLbl}>사무소명</td>
                <td className={`${val} border-r border-gray-300`}>{data.supervisor.officeName || '-'}</td>
                <td className={subLbl}>사무소주소</td>
                <td className={val}>{data.supervisor.officeAddress || '-'}</td>
              </tr>
              <tr>
                <td className={subLbl}>성명</td>
                <td className={`${val} border-r border-gray-300`}>{data.supervisor.name || '-'}</td>
                <td className={subLbl}>전화번호</td>
                <td className={val}>{data.supervisor.phone || '-'}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 검사 요청 시 필독 */}
      <DocumentTable header="검사 요청 시 필독" headerVariant="dark" spacing="mb-4">
        <tbody>
          <tr>
            <td className="px-4 py-3 text-[11px] leading-relaxed text-center">
              <p>
                발주 사이즈와 시공 완료된 사이즈가 다를 시, 일정 범위를 벗어날 경우
                <br />
                인정마크를 부착할 수 없습니다. 제품검사를 위한 방문 전 미리
                <br />
                <span className="text-red-600 font-medium">변경사항을 고지해주셔야 인정마크를 부착할 수 있습니다.</span>
              </p>
              <p className="mt-2 text-gray-600">
                (사전고지를 하지 않음으로 발생하는 문제의 귀책은 신청업체에 있습니다.)
              </p>
            </td>
          </tr>
        </tbody>
      </DocumentTable>

      {/* 검사대상 사전 고지 정보 */}
      <DocumentTable header="검사대상 사전 고지 정보" headerVariant="dark" spacing="mb-4">
        <thead>
          {/* 1단: 오픈사이즈 병합 */}
          <tr className="bg-gray-100 border-b border-gray-300">
            <th className={`${DOC_STYLES.th} w-12`} rowSpan={3}>No.</th>
            <th className={`${DOC_STYLES.th} w-16`} rowSpan={3}>층수</th>
            <th className={`${DOC_STYLES.th} w-20`} rowSpan={3}>부호</th>
            <th className={DOC_STYLES.th} colSpan={4}>오픈사이즈</th>
            <th className={`${DOC_STYLES.th} border-r-0`} rowSpan={3}>변경사유</th>
          </tr>
          {/* 2단: 발주 규격, 시공후 규격 */}
          <tr className="bg-gray-100 border-b border-gray-300">
            <th className={DOC_STYLES.th} colSpan={2}>발주 규격</th>
            <th className={DOC_STYLES.th} colSpan={2}>시공후 규격</th>
          </tr>
          {/* 3단: 가로, 세로 */}
          <tr className="bg-gray-100 border-b border-gray-400">
            <th className={`${DOC_STYLES.th} w-16`}>가로</th>
            <th className={`${DOC_STYLES.th} w-16`}>세로</th>
            <th className={`${DOC_STYLES.th} w-16`}>가로</th>
            <th className={`${DOC_STYLES.th} w-16`}>세로</th>
          </tr>
        </thead>
        <tbody>
          {data.priorNoticeItems.map((item, index) => (
            <tr key={item.id} className="border-b border-gray-300">
              <td className={DOC_STYLES.tdCenter}>{index + 1}</td>
              <td className={DOC_STYLES.tdCenter}>{item.floor}</td>
              <td className={DOC_STYLES.tdCenter}>{item.symbol}</td>
              <td className={DOC_STYLES.tdCenter}>{item.orderWidth}</td>
              <td className={DOC_STYLES.tdCenter}>{item.orderHeight}</td>
              <td className={DOC_STYLES.tdCenter}>{item.constructionWidth}</td>
              <td className={DOC_STYLES.tdCenter}>{item.constructionHeight}</td>
              <td className={DOC_STYLES.td}>{item.changeReason || '-'}</td>
            </tr>
          ))}
          {data.priorNoticeItems.length === 0 && (
            <tr>
              <td colSpan={8} className="px-2 py-4 text-center text-gray-400">
                검사대상 사전 고지 정보가 없습니다.
              </td>
            </tr>
          )}
        </tbody>
      </DocumentTable>

      {/* 서명 영역 */}
      <div className="mt-8 text-center text-[10px]">
        <p>위 내용과 같이 제품검사를 요청합니다.</p>
        <div className="mt-6">
          <p>{data.createdDate}</p>
        </div>
      </div>
    </DocumentWrapper>
  );
}