import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import ErrorAlertDialog from '@/components/shared/ErrorAlertDialog.jsx';

const AddScenarioDialog = ({ open, onOpenChange, onSubmit }) => {
  const [scenarioName, setScenarioName] = useState('');
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showErrorDialog, setShowErrorDialog] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!scenarioName.trim()) {
      setError('시나리오 이름을 입력해주세요');
      return;
    }

    setIsSubmitting(true);
    try {
      const success = await onSubmit(scenarioName.trim());
      if (success) {
        setScenarioName('');
        setError('');
        onOpenChange(false);
      } else {
        setError('시나리오 생성에 실패했습니다');
        setShowErrorDialog(true);
      }
    } catch (err) {
      setError(err.message || '시나리오 생성에 실패했습니다');
      setShowErrorDialog(true);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleOpenChange = (open) => {
    if (!open) {
      setScenarioName('');
      setError('');
    }
    onOpenChange(open);
  };

  return (
      <>
        <Dialog open={open} onOpenChange={handleOpenChange}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>새 시나리오 추가</DialogTitle>
              <DialogDescription>
                새로운 시나리오의 이름을 입력해주세요
              </DialogDescription>
            </DialogHeader>
            <form onSubmit={handleSubmit}>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">시나리오 이름</Label>
                  <Input
                      id="name"
                      value={scenarioName}
                      onChange={(e) => {
                        setScenarioName(e.target.value);
                        setError('');
                      }}
                      placeholder="시나리오 이름을 입력하세요"
                  />
                </div>
              </div>
              <DialogFooter>
                <Button
                    type="button"
                    variant="outline"
                    onClick={() => handleOpenChange(false)}
                    disabled={isSubmitting}
                >
                  취소
                </Button>
                <Button
                    type="submit"
                    disabled={isSubmitting}
                >
                  {isSubmitting ? '생성 중...' : '생성'}
                </Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </Dialog>

        <ErrorAlertDialog
            open={showErrorDialog}
            onOpenChange={setShowErrorDialog}
            title="시나리오 생성 오류"
            description={error}
        />
      </>
  );
};

export default AddScenarioDialog;