'use client';

import { useState, useEffect } from 'react';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { DatePicker } from '@/components/ui/date-picker';
import { format } from 'date-fns';
import type {
  ReasonInfoDialogProps,
  ReasonFormData,
  ReasonType,
} from './types';
import { REASON_TYPE_LABELS } from './types';

const initialFormData: ReasonFormData = {
  employeeId: '',
  baseDate: format(new Date(), 'yyyy-MM-dd'),
  reasonType: '',
};

export function ReasonInfoDialog({
  open,
  onOpenChange,
  employees,
  onSubmit,
}: ReasonInfoDialogProps) {
  const [formData, setFormData] = useState<ReasonFormData>(initialFormData);

  // 데이터 초기화
  useEffect(() => {
    if (open) {
      setFormData(initialFormData);
    }
  }, [open]);

  // 입력 변경 핸들러
  const handleChange = (field: keyof ReasonFormData, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  // 등록 (문서 작성 화면으로 이동)
  const handleSubmit = () => {
    onSubmit(formData);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>사유 정보</DialogTitle>
        </DialogHeader>

        <div className="space-y-4 py-4">
          {/* 대상 선택 */}
          <div className="flex items-center justify-between">
            <Label className="text-sm font-medium min-w-[80px]">대상</Label>
            <Select
              value={formData.employeeId}
              onValueChange={(value) => handleChange('employeeId', value)}
            >
              <SelectTrigger className="w-[200px]">
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {employees.map((employee) => (
                  <SelectItem key={employee.id} value={employee.id}>
                    {[employee.department, employee.position, employee.rank, employee.name].filter(Boolean).join(' / ')}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 기준일 */}
          <div className="flex items-center justify-between">
            <Label className="text-sm font-medium min-w-[80px]">기준일</Label>
            <DatePicker
              value={formData.baseDate}
              onChange={(date) => handleChange('baseDate', date)}
              className="w-[200px]"
              align="end"
            />
          </div>

          {/* 유형 선택 */}
          <div className="flex items-center justify-between">
            <Label className="text-sm font-medium min-w-[80px]">유형</Label>
            <Select
              value={formData.reasonType}
              onValueChange={(value) => handleChange('reasonType', value)}
            >
              <SelectTrigger className="w-[200px]">
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(REASON_TYPE_LABELS).map(([value, label]) => (
                  <SelectItem key={value} value={value}>
                    {label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>

        <DialogFooter className="gap-2">
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="bg-gray-900 text-white hover:bg-gray-800"
          >
            취소
          </Button>
          <Button
            onClick={handleSubmit}
            className="bg-gray-900 text-white hover:bg-gray-800"
          >
            등록
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}