'use client';

import { useEffect, useState } from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { DatePicker } from '@/components/ui/date-picker';
import { format } from 'date-fns';
import { getCompanyAutoFill } from './form-actions';
import type { SealUsageData } from './types';

interface SealUsageFormProps {
  data: SealUsageData;
  onChange: (data: SealUsageData) => void;
}

export function SealUsageForm({ data, onChange }: SealUsageFormProps) {
  const [isLoadingCompany, setIsLoadingCompany] = useState(false);

  useEffect(() => {
    async function loadCompanyInfo() {
      setIsLoadingCompany(true);
      const result = await getCompanyAutoFill();
      if (result.success && result.data) {
        const c = result.data;
        onChange({
          ...data,
          companyName: data.companyName || c.companyName,
          businessNumber: data.businessNumber || c.businessNumber,
          address: data.address || c.address,
          representativeName: data.representativeName || c.representativeName,
          usageDate: data.usageDate || format(new Date(), 'yyyy-MM-dd'),
        });
      }
      setIsLoadingCompany(false);
    }
    if (!data.companyName) {
      loadCompanyInfo();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="space-y-6">
      {/* 1. 인감 날인 */}
      <div className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">인감 날인</h3>
        <div className="space-y-2">
          <Label>인감 정보</Label>
          <Textarea
            placeholder="사용할 인감 정보를 입력해주세요"
            value={data.sealImprint}
            onChange={(e) => onChange({ ...data, sealImprint: e.target.value })}
            className="min-h-[80px]"
          />
        </div>
      </div>

      {/* 2. 사용 정보 */}
      <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">
          <div className="space-y-2">
            <Label>용도 <span className="text-red-500">*</span></Label>
            <Input
              placeholder="사용 용도를 입력해주세요"
              value={data.purpose}
              onChange={(e) => onChange({ ...data, purpose: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>제출처 <span className="text-red-500">*</span></Label>
            <Input
              placeholder="제출처를 입력해주세요"
              value={data.submitTo}
              onChange={(e) => onChange({ ...data, submitTo: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>첨부 서류</Label>
            <Input
              placeholder="첨부 서류를 입력해주세요"
              value={data.attachedDocuments}
              onChange={(e) => onChange({ ...data, attachedDocuments: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>일자</Label>
            <DatePicker
              value={data.usageDate}
              onChange={(date) => onChange({ ...data, usageDate: date })}
            />
          </div>
        </div>
      </div>

      {/* 3. 회사 정보 */}
      <div className="bg-white rounded-lg border p-6">
        <div className="flex items-center gap-2 mb-4">
          <h3 className="text-lg font-semibold">회사 정보</h3>
          {isLoadingCompany && <span className="text-sm text-gray-400">불러오는 중...</span>}
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>상호</Label>
            <Input value={data.companyName} disabled className="bg-gray-50" />
          </div>
          <div className="space-y-2">
            <Label>사업자번호</Label>
            <Input value={data.businessNumber} disabled className="bg-gray-50" />
          </div>
          <div className="md:col-span-2 space-y-2">
            <Label>주소</Label>
            <Input value={data.address} disabled className="bg-gray-50" />
          </div>
          <div className="space-y-2">
            <Label>대표이사</Label>
            <Input value={data.representativeName} disabled className="bg-gray-50" />
          </div>
        </div>
      </div>
    </div>
  );
}
