'use client';

import { useState, useEffect } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { VacationGrantFormData, VacationType } from './types';
import { VACATION_TYPE_LABELS } from './types';

interface VacationGrantDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSave: (data: VacationGrantFormData) => void;
}

const mockEmployees = [
  { id: '1', name: '김철수', department: '개발팀' },
  { id: '2', name: '이영희', department: '디자인팀' },
  { id: '3', name: '박민수', department: '기획팀' },
  { id: '4', name: '정수진', department: '영업팀' },
  { id: '5', name: '최동현', department: '인사팀' },
];

export function VacationGrantDialog({
  open,
  onOpenChange,
  onSave,
}: VacationGrantDialogProps) {
  const [formData, setFormData] = useState<VacationGrantFormData>({
    employeeId: '',
    vacationType: 'annual',
    grantDays: 1,
    reason: '',
  });

  useEffect(() => {
    if (open) {
      setFormData({
        employeeId: '',
        vacationType: 'annual',
        grantDays: 1,
        reason: '',
      });
    }
  }, [open]);

  const handleSave = () => {
    if (!formData.employeeId) {
      alert('사원을 선택해주세요.');
      return;
    }
    if (formData.grantDays < 1) {
      alert('부여 일수는 1 이상이어야 합니다.');
      return;
    }
    onSave(formData);
  };

  const handleCancel = () => {
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>휴가 부여 등록</DialogTitle>
        </DialogHeader>

        <div className="grid gap-4 py-4">
          {/* 사원 선택 */}
          <div className="grid gap-2">
            <Label htmlFor="employee">사원 선택</Label>
            <Select
              value={formData.employeeId}
              onValueChange={(value) => setFormData(prev => ({ ...prev, employeeId: value }))}
            >
              <SelectTrigger>
                <SelectValue placeholder="사원을 선택하세요" />
              </SelectTrigger>
              <SelectContent>
                {mockEmployees.map((emp) => (
                  <SelectItem key={emp.id} value={emp.id}>
                    {emp.name} ({emp.department})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 휴가 유형 */}
          <div className="grid gap-2">
            <Label htmlFor="vacationType">휴가 유형</Label>
            <Select
              value={formData.vacationType}
              onValueChange={(value) => setFormData(prev => ({ ...prev, vacationType: value as VacationType }))}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(VACATION_TYPE_LABELS).map(([key, label]) => (
                  <SelectItem key={key} value={key}>
                    {label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 부여 일수 */}
          <div className="grid gap-2">
            <Label htmlFor="grantDays">부여 일수</Label>
            <Input
              id="grantDays"
              type="number"
              min={1}
              value={formData.grantDays}
              onChange={(e) => setFormData(prev => ({ ...prev, grantDays: parseInt(e.target.value) || 1 }))}
            />
          </div>

          {/* 사유 */}
          <div className="grid gap-2">
            <Label htmlFor="reason">사유</Label>
            <Textarea
              id="reason"
              placeholder="부여 사유를 입력하세요 (선택)"
              value={formData.reason || ''}
              onChange={(e) => setFormData(prev => ({ ...prev, reason: e.target.value }))}
              rows={3}
            />
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={handleCancel}>
            취소
          </Button>
          <Button onClick={handleSave}>
            등록
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
