'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 { getCompanyAutoFill } from './form-actions';
import type { PowerOfAttorneyData } from './types';

interface PowerOfAttorneyFormProps {
  data: PowerOfAttorneyData;
  onChange: (data: PowerOfAttorneyData) => void;
}

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

  // 위임인(회사) 정보 자동입력
  useEffect(() => {
    async function loadCompanyInfo() {
      setIsLoadingCompany(true);
      const result = await getCompanyAutoFill();
      if (result.success && result.data) {
        onChange({
          ...data,
          principalCompanyName: data.principalCompanyName || result.data.companyName,
          principalBusinessNumber: data.principalBusinessNumber || result.data.businessNumber,
          principalAddress: data.principalAddress || result.data.address,
          principalRepresentative: data.principalRepresentative || result.data.representativeName,
        });
      }
      setIsLoadingCompany(false);
    }
    if (!data.principalCompanyName) {
      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">
        <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.principalCompanyName} disabled className="bg-gray-50" />
          </div>
          <div className="space-y-2">
            <Label>사업자번호</Label>
            <Input value={data.principalBusinessNumber} disabled className="bg-gray-50" />
          </div>
          <div className="md:col-span-2 space-y-2">
            <Label>주소</Label>
            <Input value={data.principalAddress} disabled className="bg-gray-50" />
          </div>
          <div className="space-y-2">
            <Label>대표자</Label>
            <Input value={data.principalRepresentative} disabled className="bg-gray-50" />
          </div>
        </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.agentName}
              onChange={(e) => onChange({ ...data, agentName: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>생년월일</Label>
            <DatePicker
              value={data.agentBirthDate}
              onChange={(date) => onChange({ ...data, agentBirthDate: date })}
            />
          </div>
          <div className="md:col-span-2 space-y-2">
            <Label>주소</Label>
            <Input
              placeholder="주소를 입력해주세요"
              value={data.agentAddress}
              onChange={(e) => onChange({ ...data, agentAddress: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>연락처</Label>
            <Input
              placeholder="연락처를 입력해주세요"
              value={data.agentPhone}
              onChange={(e) => onChange({ ...data, agentPhone: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>소속</Label>
            <Input
              placeholder="소속을 입력해주세요"
              value={data.agentDepartment}
              onChange={(e) => onChange({ ...data, agentDepartment: e.target.value })}
            />
          </div>
        </div>
      </div>

      {/* 3. 위임 사항 */}
      <div className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">위임 사항</h3>
        <Textarea
          placeholder="위임 사항을 입력해주세요"
          value={data.delegationDetails}
          onChange={(e) => onChange({ ...data, delegationDetails: e.target.value })}
          className="min-h-[120px]"
        />
      </div>

      {/* 4. 위임 기간 */}
      <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>시작일</Label>
            <DatePicker
              value={data.delegationPeriodStart}
              onChange={(date) => onChange({ ...data, delegationPeriodStart: date })}
            />
          </div>
          <div className="space-y-2">
            <Label>종료일</Label>
            <DatePicker
              value={data.delegationPeriodEnd}
              onChange={(date) => onChange({ ...data, delegationPeriodEnd: date })}
            />
          </div>
        </div>
      </div>

      {/* 5. 첨부 서류 */}
      <div className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">첨부 서류</h3>
        <Textarea
          placeholder="첨부 서류 목록을 입력해주세요"
          value={data.attachedDocuments}
          onChange={(e) => onChange({ ...data, attachedDocuments: e.target.value })}
          className="min-h-[80px]"
        />
      </div>
    </div>
  );
}
