'use client';

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 { Textarea } from '@/components/ui/textarea';

interface SectionDialogProps {
  isSectionDialogOpen: boolean;
  setIsSectionDialogOpen: (open: boolean) => void;
  newSectionType: 'fields' | 'bom';
  setNewSectionType: (type: 'fields' | 'bom') => void;
  newSectionTitle: string;
  setNewSectionTitle: (title: string) => void;
  newSectionDescription: string;
  setNewSectionDescription: (description: string) => void;
  handleAddSection: () => void;
}

export function SectionDialog({
  isSectionDialogOpen,
  setIsSectionDialogOpen,
  newSectionType,
  setNewSectionType,
  newSectionTitle,
  setNewSectionTitle,
  newSectionDescription,
  setNewSectionDescription,
  handleAddSection,
}: SectionDialogProps) {
  return (
    <Dialog open={isSectionDialogOpen} onOpenChange={(open) => {
      setIsSectionDialogOpen(open);
      if (!open) {
        setNewSectionType('fields');
        setNewSectionTitle('');
        setNewSectionDescription('');
      }
    }}>
      <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>{newSectionType === 'bom' ? 'BOM 섹션' : '일반 섹션'} 추가</DialogTitle>
          <DialogDescription>
            {newSectionType === 'bom'
              ? '새로운 BOM(자재명세서) 섹션을 추가합니다'
              : '새로운 일반 섹션을 추가합니다'}
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label>섹션 제목 *</Label>
            <Input
              value={newSectionTitle}
              onChange={(e) => setNewSectionTitle(e.target.value)}
              placeholder={newSectionType === 'bom' ? '예: BOM 구성' : '예: 기본 정보'}
            />
          </div>
          <div>
            <Label>설명 (선택)</Label>
            <Textarea
              value={newSectionDescription}
              onChange={(e) => setNewSectionDescription(e.target.value)}
              placeholder="섹션에 대한 설명"
            />
          </div>
          {newSectionType === 'bom' && (
            <div className="bg-blue-50 p-3 rounded-md">
              <p className="text-sm text-blue-700">
                <strong>BOM 섹션:</strong> 자재명세서(BOM) 관리를 위한 전용 섹션입니다.
                부품 구성, 수량, 단가 등을 관리할 수 있습니다.
              </p>
            </div>
          )}
        </div>
        <DialogFooter className="flex-col sm:flex-row gap-2">
          <Button variant="outline" onClick={() => {
            setIsSectionDialogOpen(false);
            setNewSectionType('fields');
          }} className="w-full sm:w-auto">취소</Button>
          <Button onClick={handleAddSection} className="w-full sm:w-auto">추가</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}