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 RenameAPIDialog = ({ open, onOpenChange, onSubmit, api }) => {
  const [apiName, setApiName] = useState(api?.name || '');
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showErrorDialog, setShowErrorDialog] = useState(false);

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

    if (!apiName.trim()) {
      setError('API 이름을 입력해주세요');
      return;
    }

    setIsSubmitting(true);
    try {
      const success = await onSubmit(api.id, apiName.trim());
      if (success) {
        setApiName('');
        setError('');
        onOpenChange(false);
      } else {
        setError('API 이름 변경에 실패했습니다');
        setShowErrorDialog(true);
      }
    } catch (err) {
      setError(err.message || 'API 이름 변경에 실패했습니다');
      setShowErrorDialog(true);
    } finally {
      setIsSubmitting(false);
    }
  };

  // Reset form when dialog is closed
  const handleOpenChange = (open) => {
    if (!open) {
      setApiName(api?.name || '');
      setError('');
    }
    onOpenChange(open);
  };

  return (
      <>
        <Dialog open={open} onOpenChange={handleOpenChange}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>API 이름 변경</DialogTitle>
              <DialogDescription>
                API의 새로운 이름을 입력해주세요
              </DialogDescription>
            </DialogHeader>
            <form onSubmit={handleSubmit}>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">API 이름</Label>
                  <Input
                      id="name"
                      value={apiName}
                      onChange={(e) => {
                        setApiName(e.target.value);
                        setError('');
                      }}
                      placeholder="API 이름을 입력하세요"
                  />
                </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="API 이름 변경 오류"
            description={error}
        />
      </>
  );
};

export default RenameAPIDialog;
