import React from 'react';
import { Input } from './Input';
import { TextArea } from './TextArea';
import { Button } from './Button';

export interface ProjectFormData {
  title: string;
  companyName: string;
  contactName: string;
  contactEmail: string;
  startDate: string;
  endDate: string;
  memo: string;
}

export interface ProjectFormProps {
  initialData?: ProjectFormData;
  onSubmit: (data: ProjectFormData) => void;
  submitButtonText: string;
  cancelButtonText?: string;
  onCancel?: () => void;
  submitIcon?: React.ReactNode;
}

export const ProjectForm: React.FC<ProjectFormProps> = ({
  initialData,
  onSubmit,
  submitButtonText,
  cancelButtonText,
  onCancel,
  submitIcon,
}) => {
  const [title, setTitle] = React.useState('');
  const [companyName, setCompanyName] = React.useState('');
  const [contactName, setContactName] = React.useState('');
  const [contactEmail, setContactEmail] = React.useState('');
  const [memo, setMemo] = React.useState('');
  const [startDate, setStartDate] = React.useState('2026-07-01');
  const [endDate, setEndDate] = React.useState('2026-07-15');

  // Sync initial data when loaded/changed
  React.useEffect(() => {
    if (initialData) {
      setTitle(initialData.title);
      setCompanyName(initialData.companyName);
      setContactName(initialData.contactName);
      setContactEmail(initialData.contactEmail);
      setMemo(initialData.memo);
      setStartDate(initialData.startDate);
      setEndDate(initialData.endDate);
    }
  }, [initialData]);



  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({
      title,
      companyName,
      contactName,
      contactEmail,
      startDate,
      endDate,
      memo,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6" id="common-project-form">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div>
          <Input
            label="고객사 명칭 *"
            type="text"
            value={companyName}
            onChange={(e) => setCompanyName(e.target.value)}
            placeholder="예: 삼성전자, 하이닉스"
            className="text-sm"
            required
          />
        </div>

        <div>
          <Input
            label="진단 타이틀 *"
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="예: 2026년 하반기 전사 조직 협업도 네트워크 분석 진단"
            className="text-sm"
            required
          />
        </div>

        <div>
          <Input
            label="담당자명 (이름/직급/직책)"
            type="text"
            value={contactName}
            onChange={(e) => setContactName(e.target.value)}
            placeholder="예: 김길동 부장"
            className="text-sm"
          />
        </div>

        <div>
          <Input
            label="담당자 이메일"
            type="email"
            value={contactEmail}
            onChange={(e) => setContactEmail(e.target.value)}
            placeholder="client@company.com"
            className="text-sm"
          />
        </div>

        <div>
          <Input
            label="설문 시작일 *"
            type="date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}
            className="text-sm"
            required
          />
        </div>

        <div>
          <Input
            label="설문 마감일 *"
            type="date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}
            className="text-sm"
            required
          />
        </div>

        <div className="md:col-span-2">
          <TextArea
            label="고객사 메모"
            value={memo}
            onChange={(e) => setMemo(e.target.value)}
            placeholder="부서 네트워크 전사 모니터링 MVP 적용 목적 기입..."
            rows={3}
            className="text-sm resize-none"
          />
        </div>
      </div>

      <div className="flex justify-end gap-3 border-t border-slate-100 pt-4" id="project-form-btn-wrapper">
        {onCancel && (
          <Button
            type="button"
            onClick={onCancel}
            variant="secondary"
            size="md"
            id="project-form-cancel-btn"
          >
            {cancelButtonText || '취소'}
          </Button>
        )}
        <Button
          type="submit"
          variant="primary"
          size="md"
          leftIcon={submitIcon}
          id="project-form-submit-btn"
        >
          {submitButtonText}
        </Button>
      </div>
    </form>
  );
};