'use client';

import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

const ITEM_TYPE_OPTIONS = [
  { value: 'FG', label: '제품 (FG)' },
  { value: 'PT', label: '부품 (PT)' },
  { value: 'SM', label: '부자재 (SM)' },
  { value: 'RM', label: '원자재 (RM)' },
  { value: 'CS', label: '소모품 (CS)' },
];

interface PageDialogProps {
  isPageDialogOpen: boolean;
  setIsPageDialogOpen: (open: boolean) => void;
  newPageName: string;
  setNewPageName: (name: string) => void;
  newPageItemType: 'FG' | 'PT' | 'SM' | 'RM' | 'CS';
  setNewPageItemType: React.Dispatch<React.SetStateAction<'FG' | 'PT' | 'SM' | 'RM' | 'CS'>>;
  handleAddPage: () => void;
}

export function PageDialog({
  isPageDialogOpen,
  setIsPageDialogOpen,
  newPageName,
  setNewPageName,
  newPageItemType,
  setNewPageItemType,
  handleAddPage,
}: PageDialogProps) {
  const [isSubmitted, setIsSubmitted] = useState(false);

  // 유효성 검사
  const isPageNameEmpty = !newPageName.trim();

  const handleSubmit = () => {
    setIsSubmitted(true);
    if (!isPageNameEmpty) {
      handleAddPage();
      setIsSubmitted(false);
    }
  };

  const handleClose = () => {
    setIsPageDialogOpen(false);
    setNewPageName('');
    setNewPageItemType('FG');
    setIsSubmitted(false);
  };

  return (
    <Dialog open={isPageDialogOpen} onOpenChange={(open) => {
      if (!open) {
        handleClose();
      } else {
        setIsPageDialogOpen(open);
      }
    }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>페이지 추가</DialogTitle>
          <DialogDescription>품목 유형별 관리 페이지를 생성합니다</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label>페이지명 *</Label>
            <Input
              value={newPageName}
              onChange={(e) => setNewPageName(e.target.value)}
              placeholder="예: 제품 등록"
              className={isSubmitted && isPageNameEmpty ? 'border-red-500 focus-visible:ring-red-500' : ''}
            />
            {isSubmitted && isPageNameEmpty && (
              <p className="text-xs text-red-500 mt-1">
                페이지명을 입력해주세요
              </p>
            )}
          </div>
          <div>
            <Label>품목유형 *</Label>
            <Select value={newPageItemType} onValueChange={(v: any) => setNewPageItemType(v)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {ITEM_TYPE_OPTIONS.map(opt => (
                  <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={handleClose}>취소</Button>
          <Button onClick={handleSubmit}>추가</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
