'use client';

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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { BoardMinutesData } from './types';

interface BoardMinutesFormProps {
  data: BoardMinutesData;
  onChange: (data: BoardMinutesData) => void;
}

const RESULT_OPTIONS = [
  { value: 'approved', label: '가결' },
  { value: 'rejected', label: '부결' },
  { value: 'deferred', label: '보류' },
];

export function BoardMinutesForm({ data, onChange }: BoardMinutesFormProps) {
  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="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>일시 <span className="text-red-500">*</span></Label>
            <DatePicker
              value={data.meetingDate}
              onChange={(date) => onChange({ ...data, meetingDate: date })}
            />
          </div>
          <div className="space-y-2">
            <Label>장소 <span className="text-red-500">*</span></Label>
            <Input
              placeholder="장소를 입력해주세요"
              value={data.meetingPlace}
              onChange={(e) => onChange({ ...data, meetingPlace: e.target.value })}
            />
          </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
              type="number"
              placeholder="이사 총수"
              value={data.totalDirectors || ''}
              onChange={(e) => onChange({ ...data, totalDirectors: Number(e.target.value) })}
            />
          </div>
          <div className="space-y-2">
            <Label>출석 이사 <span className="text-red-500">*</span></Label>
            <Input
              type="number"
              placeholder="출석 이사 수"
              value={data.attendingDirectors || ''}
              onChange={(e) => onChange({ ...data, attendingDirectors: Number(e.target.value) })}
            />
          </div>
          <div className="space-y-2">
            <Label>감사 총수</Label>
            <Input
              type="number"
              placeholder="감사 총수"
              value={data.totalAuditors || ''}
              onChange={(e) => onChange({ ...data, totalAuditors: Number(e.target.value) })}
            />
          </div>
          <div className="space-y-2">
            <Label>출석 감사</Label>
            <Input
              type="number"
              placeholder="출석 감사 수"
              value={data.attendingAuditors || ''}
              onChange={(e) => onChange({ ...data, attendingAuditors: Number(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>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label>제목 <span className="text-red-500">*</span></Label>
            <Input
              placeholder="의안 제목을 입력해주세요"
              value={data.agendaTitle}
              onChange={(e) => onChange({ ...data, agendaTitle: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>결과</Label>
            <Select
              value={data.agendaResult || ''}
              onValueChange={(value) => onChange({ ...data, agendaResult: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="결과를 선택해주세요" />
              </SelectTrigger>
              <SelectContent>
                {RESULT_OPTIONS.map((opt) => (
                  <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* 4. 의사경과 */}
      <div className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">의사경과</h3>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label>의장 <span className="text-red-500">*</span></Label>
            <Input
              placeholder="의장명을 입력해주세요"
              value={data.chairperson}
              onChange={(e) => onChange({ ...data, chairperson: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>내용</Label>
            <Textarea
              placeholder="의사경과 내용을 입력해주세요"
              value={data.proceedings}
              onChange={(e) => onChange({ ...data, proceedings: e.target.value })}
              className="min-h-[150px]"
            />
          </div>
        </div>
      </div>

      {/* 5. 폐회 */}
      <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>
          <Input
            placeholder="예: 16:00"
            value={data.adjournmentTime}
            onChange={(e) => onChange({ ...data, adjournmentTime: e.target.value })}
          />
        </div>
      </div>

      {/* 6. 기명날인 */}
      <div className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">기명날인</h3>
        <Textarea
          placeholder="기명날인 대상자를 입력해주세요 (예: 의장 홍길동, 이사 김영희)"
          value={data.signatories}
          onChange={(e) => onChange({ ...data, signatories: e.target.value })}
          className="min-h-[80px]"
        />
      </div>
    </div>
  );
}
