'use client';

/**
 * 작업일지 모달
 *
 * document-system 통합 버전 (2026-01-22)
 * - DocumentViewer 사용
 * - WorkLogContent로 문서 본문 분리
 */

import { useState, useEffect } from 'react';
import { Loader2 } from 'lucide-react';
import { DocumentViewer } from '@/components/document-system';
import { getWorkOrderById } from '../WorkOrders/actions';
import type { WorkOrder } from '../WorkOrders/types';
import { WorkLogContent } from './WorkLogContent';

interface WorkLogModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  workOrderId: string | null;
}

export function WorkLogModal({ open, onOpenChange, workOrderId }: WorkLogModalProps) {
  const [order, setOrder] = useState<WorkOrder | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 모달 열릴 때 데이터 fetch
  useEffect(() => {
    if (open && workOrderId) {
      setIsLoading(true);
      setError(null);

      getWorkOrderById(workOrderId)
        .then((result) => {
          if (result.success && result.data) {
            setOrder(result.data);
          } else {
            setError(result.error || '데이터를 불러올 수 없습니다.');
          }
        })
        .catch(() => {
          setError('서버 오류가 발생했습니다.');
        })
        .finally(() => {
          setIsLoading(false);
        });
    } else if (!open) {
      // 모달 닫힐 때 상태 초기화
      setOrder(null);
      setError(null);
    }
  }, [open, workOrderId]);

  if (!workOrderId) return null;

  // 로딩/에러 상태는 DocumentViewer 내부에서 처리
  const subtitle = order ? `${order.processName} 생산부서` : undefined;

  return (
    <DocumentViewer
      title="작업일지"
      subtitle={subtitle}
      preset="inspection"
      open={open}
      onOpenChange={onOpenChange}
    >
      {isLoading ? (
        <div className="flex items-center justify-center h-64 bg-white">
          <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
        </div>
      ) : error || !order ? (
        <div className="flex flex-col items-center justify-center h-64 gap-4 bg-white">
          <p className="text-muted-foreground">{error || '데이터를 불러올 수 없습니다.'}</p>
        </div>
      ) : (
        <WorkLogContent data={order} />
      )}
    </DocumentViewer>
  );
}