'use client';

/**
 * 공정 상세 - 작업일지 양식 미리보기 모달
 *
 * 기획서 기준 양식:
 * - 신청업체/신청내용 테이블
 * - 순번/작업항목/규격/수량/단위/작업자/비고 테이블
 */

import { Printer, X } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { Button } from '@/components/ui/button';
import type { Process } from '@/types/process';

interface ProcessWorkLogPreviewModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  process: Process;
}

// 공정명을 문서 코드로 매핑
const getDocumentCode = (processName: string): string => {
  if (processName.includes('스크린')) return 'WL-SCR';
  if (processName.includes('슬랫')) return 'WL-SLT';
  if (processName.includes('절곡') || processName.includes('포밍')) return 'WL-BEN';
  return 'WL-STK';
};

// 공정명을 부서명으로 매핑
const getDepartmentName = (processName: string): string => {
  if (processName.includes('스크린')) return '스크린 생산부서';
  if (processName.includes('슬랫')) return '슬랫 생산부서';
  if (processName.includes('절곡')) return '절곡 생산부서';
  if (processName.includes('포밍')) return '포밍 생산부서';
  return process?.department || '생산부서';
};

export function ProcessWorkLogPreviewModal({
  open,
  onOpenChange,
  process
}: ProcessWorkLogPreviewModalProps) {
  const handlePrint = () => {
    window.print();
  };

  const documentCode = getDocumentCode(process.processName);
  const departmentName = getDepartmentName(process.processName);
  const today = new Date().toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).replace(/\. /g, '-').replace('.', '');

  // 샘플 작업항목 데이터 (기획서 기준)
  const workItems = [
    { no: 1, name: '원단 재단', spec: 'W2900 × H3900', qty: 9, unit: 'EA', worker: '이작업', note: '' },
    { no: 2, name: '미싱 작업', spec: 'W2800 × H3800', qty: 8, unit: 'EA', worker: '김작업', note: '' },
    { no: 3, name: '앤드락 조립', spec: 'W2700 × H3700', qty: 7, unit: 'EA', worker: '이작업', note: '' },
    { no: 4, name: '검수', spec: 'W2600 × H3600', qty: 6, unit: 'EA', worker: '김작업', note: '' },
    { no: 5, name: '포장', spec: 'W2500 × H3500', qty: 5, unit: 'EA', worker: '이작업', note: '' },
  ];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-5xl max-h-[90vh] overflow-y-auto p-0 gap-0 bg-gray-100">
        {/* 접근성을 위한 숨겨진 타이틀 */}
        <VisuallyHidden>
          <DialogTitle>{process.workLogTemplate} 미리보기</DialogTitle>
        </VisuallyHidden>

        {/* 모달 헤더 */}
        <div className="flex items-center justify-between px-6 py-4 border-b bg-white sticky top-0 z-10">
          <div className="flex items-center gap-3">
            <span className="font-semibold text-lg">{process.workLogTemplate} 미리보기</span>
            <span className="text-sm text-muted-foreground">({documentCode})</span>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={handlePrint}>
              <Printer className="w-4 h-4 mr-1.5" />
              인쇄
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8"
              onClick={() => onOpenChange(false)}
            >
              <X className="w-4 h-4" />
            </Button>
          </div>
        </div>

        {/* 문서 본문 */}
        <div className="m-6 p-6 bg-white rounded-lg shadow-sm">
          {/* 문서 헤더: 로고 + 제목 + 결재라인 */}
          <div className="flex border border-gray-300 mb-6">
            {/* 좌측: 로고 영역 */}
            <div className="w-24 border-r border-gray-300 flex flex-col items-center justify-center p-3 shrink-0">
              <div className="text-2xl font-bold">KD</div>
              <div className="text-xs text-gray-500">정동기업</div>
            </div>

            {/* 중앙: 문서 제목 */}
            <div className="flex-1 border-r border-gray-300 flex flex-col items-center justify-center p-3">
              <h1 className="text-xl font-bold tracking-widest mb-1">작 업 일 지</h1>
              <p className="text-xs text-gray-500">{documentCode}</p>
              <p className="text-sm font-medium mt-1">{departmentName}</p>
            </div>

            {/* 우측: 결재라인 */}
            <div className="shrink-0">
              <table className="border-collapse text-xs h-full">
                <tbody>
                  <tr>
                    <td rowSpan={3} className="w-8 border-r border-gray-300 text-center align-middle bg-gray-100 font-medium">
                      <div>결</div>
                      <div>재</div>
                    </td>
                    <td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">작성</td>
                    <td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">검토</td>
                    <td className="w-16 p-2 text-center font-medium bg-gray-100 border-b border-gray-300">승인</td>
                  </tr>
                  <tr>
                    <td className="w-16 p-2 text-center border-r border-b border-gray-300">
                      <div>홍길동</div>
                      <div className="text-[10px] text-gray-500">12/17</div>
                    </td>
                    <td className="w-16 p-2 text-center border-r border-b border-gray-300"></td>
                    <td className="w-16 p-2 text-center border-b border-gray-300"></td>
                  </tr>
                  <tr>
                    <td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">판매/전진</td>
                    <td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">생산</td>
                    <td className="w-16 p-2 text-center bg-gray-50">품질</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* 신청업체 / 신청내용 테이블 */}
          <table className="w-full border-collapse border border-gray-300 mb-6 text-sm">
            <thead>
              <tr>
                <th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium border-r border-gray-300">
                  신 청 업 체
                </th>
                <th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium">
                  신 청 내 용
                </th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-gray-300">
                <td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">발 주 일</td>
                <td className="p-3 border-r border-gray-300">{today}</td>
                <td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">현 장 명</td>
                <td className="p-3">송도 오피스텔 A동</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">업 체 명</td>
                <td className="p-3 border-r border-gray-300">(주)인천건설</td>
                <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">작업일자</td>
                <td className="p-3">{today}</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">담 당 자</td>
                <td className="p-3 border-r border-gray-300">김담당</td>
                <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품 LOT NO.</td>
                <td className="p-3">KD-TS-251217-01-01</td>
              </tr>
              <tr>
                <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품명</td>
                <td className="p-3 border-r border-gray-300">SH3040 &nbsp; 방화셔터 W3000×H4000</td>
                <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">마감유형</td>
                <td className="p-3">스크린 &nbsp; 그레이</td>
              </tr>
            </tbody>
          </table>

          {/* 작업항목 테이블 */}
          <table className="w-full border-collapse border border-gray-300 text-sm">
            <thead>
              <tr className="bg-gray-800 text-white">
                <th className="p-2.5 font-medium border-r border-gray-600 w-16">순번</th>
                <th className="p-2.5 font-medium border-r border-gray-600">작업항목</th>
                <th className="p-2.5 font-medium border-r border-gray-600 w-40">규격</th>
                <th className="p-2.5 font-medium border-r border-gray-600 w-20">수량</th>
                <th className="p-2.5 font-medium border-r border-gray-600 w-16">단위</th>
                <th className="p-2.5 font-medium border-r border-gray-600 w-20">작업자</th>
                <th className="p-2.5 font-medium w-24">비고</th>
              </tr>
            </thead>
            <tbody>
              {workItems.map((item, index) => (
                <tr key={item.no} className={index < workItems.length - 1 ? 'border-b border-gray-300' : ''}>
                  <td className="p-3 text-center border-r border-gray-300">{item.no}</td>
                  <td className="p-3 border-r border-gray-300">{item.name}</td>
                  <td className="p-3 text-center border-r border-gray-300">{item.spec}</td>
                  <td className="p-3 text-center border-r border-gray-300">{item.qty}</td>
                  <td className="p-3 text-center border-r border-gray-300">{item.unit}</td>
                  <td className="p-3 text-center border-r border-gray-300">{item.worker}</td>
                  <td className="p-3 text-center">{item.note}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </DialogContent>
    </Dialog>
  );
}