import { useState, useEffect } from 'react';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { Dropdown } from 'primereact/dropdown';
import BaseFormDialog from '@/core/components/BaseFormDialog';
import type { Project } from '../project.types';

interface Props {
  visible: boolean;
  onHide: () => void;
  project: Project | null;
  onSave: (data: Partial<Project>) => Promise<void>;
}

export default function ProjectFormDialog({ visible, onHide, project, onSave }: Props) {
  const [code, setCode] = useState('');
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [type, setType] = useState('');
  const [status, setStatus] = useState('ACTIVE');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (project) {
      setCode(project.code);
      setName(project.name);
      setDescription(project.description ?? '');
      setType(project.type ?? '');
      setStatus(project.status);
    } else {
      setCode(''); setName(''); setDescription(''); setType(''); setStatus('ACTIVE');
    }
  }, [project, visible]);

  async function handleSubmit() {
    setLoading(true);
    try {
      await onSave({ code, name, description, type, status });
    } finally {
      setLoading(false);
    }
  }

  const typeOptions = [
    { label: 'EPC', value: 'EPC' },
    { label: 'Other', value: 'OTHER' },
    { label: 'Internal', value: 'INTERNAL' },
  ];
  const statusOptions = [
    { label: '진행중', value: 'ACTIVE' },
    { label: '종료', value: 'CLOSED' },
    { label: '보류', value: 'HOLD' },
  ];

  return (
    <BaseFormDialog visible={visible} onHide={onHide} title={project ? '프로젝트 수정' : '프로젝트 생성'} loading={loading} onSubmit={handleSubmit}>
      <div className="form-grid">
        <div className="col-6 form-field">
          <label className="form-field__label form-field__label--required">코드</label>
          <InputText value={code} onChange={(e) => setCode(e.target.value)} disabled={!!project} />
        </div>
        <div className="col-6 form-field">
          <label className="form-field__label form-field__label--required">프로젝트명</label>
          <InputText value={name} onChange={(e) => setName(e.target.value)} />
        </div>
        <div className="col-6 form-field">
          <label className="form-field__label">유형</label>
          <Dropdown value={type} options={typeOptions} onChange={(e) => setType(e.value)} placeholder="선택" />
        </div>
        <div className="col-6 form-field">
          <label className="form-field__label">상태</label>
          <Dropdown value={status} options={statusOptions} onChange={(e) => setStatus(e.value)} />
        </div>
        <div className="col-12 form-field">
          <label className="form-field__label">설명</label>
          <InputTextarea value={description} onChange={(e) => setDescription(e.target.value)} rows={3} />
        </div>
      </div>
    </BaseFormDialog>
  );
}
