'use client';

import { useCallback } from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { FormSelector } from './FormSelector';
import type { BasicInfo } from './types';

interface BasicInfoSectionProps {
  data: BasicInfo;
  onChange: (data: BasicInfo) => void;
}

// 양식 코드 → documentType 매핑 (전용 폼 호환)
const FORM_CODE_TO_DOC_TYPE: Record<string, string> = {
  // 기존 3종
  'proposal': 'proposal',
  'expense_report': 'expenseReport',
  'expenseReport': 'expenseReport',
  'expense_estimate': 'expenseEstimate',
  'expenseEstimate': 'expenseEstimate',
  // 일반
  'official_letter': 'officialDocument',
  // 인사/근태
  'resignation': 'resignation',
  'leave_promotion_1st': 'leaveNotice1st',
  'leave_promotion_2nd': 'leaveNotice2nd',
  'delegation': 'powerOfAttorney',
  'board_minutes': 'boardMinutes',
  // 증명서
  'employment_cert': 'employmentCert',
  'career_cert': 'careerCert',
  'appointment_cert': 'appointmentCert',
  'seal_usage': 'sealUsage',
  // 재무
  'quotation': 'quotation',
};

export function BasicInfoSection({ data, onChange }: BasicInfoSectionProps) {
  const handleFormSelect = useCallback((form: { id: number; code: string; name: string; category: string } | null) => {
    if (!form) {
      onChange({
        ...data,
        formId: undefined,
        formCode: undefined,
        formName: undefined,
        formCategory: undefined,
        documentType: 'proposal', // 기본값
      });
      return;
    }

    // 기존 전용 폼 코드면 documentType으로 매핑
    const docType = FORM_CODE_TO_DOC_TYPE[form.code] || form.code;

    onChange({
      ...data,
      formId: form.id,
      formCode: form.code,
      formName: form.name,
      formCategory: form.category,
      documentType: docType,
    });
  }, [data, onChange]);

  return (
    <div className="bg-white rounded-lg border p-6">
      <h3 className="text-lg font-semibold mb-4">기본 정보</h3>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        {/* 기안자 */}
        <div className="space-y-2">
          <Label htmlFor="drafter">기안자</Label>
          <Input
            id="drafter"
            value={data.drafter}
            disabled
            className="bg-gray-50"
          />
        </div>

        {/* 작성일 */}
        <div className="space-y-2">
          <Label htmlFor="draftDate">작성일</Label>
          <Input
            id="draftDate"
            value={data.draftDate}
            disabled
            className="bg-gray-50"
          />
        </div>

        {/* 문서번호 */}
        <div className="space-y-2">
          <Label htmlFor="documentNo">문서번호</Label>
          <Input
            id="documentNo"
            placeholder="자동 생성"
            value={data.documentNo}
            disabled
            className="bg-gray-50"
          />
        </div>

        {/* 긴급 여부 */}
        <div className="flex items-end space-x-2 pb-2">
          <Checkbox
            id="isUrgent"
            checked={data.isUrgent || false}
            onCheckedChange={(checked) => onChange({ ...data, isUrgent: checked === true })}
          />
          <Label htmlFor="isUrgent" className="cursor-pointer">긴급</Label>
        </div>
      </div>

      {/* 2단계 양식 선택 */}
      <FormSelector
        selectedFormId={data.formId}
        selectedFormCode={data.formCode}
        onFormSelect={handleFormSelect}
      />
    </div>
  );
}
