import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Label } from '@/components/ui/label';
import { getCSRFToken } from '@/services/token.js';

const PasswordChangeDialog = ({ open, onOpenChange }) => {
  const [formData, setFormData] = useState({
    oldPassword: '',
    newPassword: '',
    newPassword2: ''
  });
  const [message, setMessage] = useState({ type: '', content: '' });
  const [isLoading, setIsLoading] = useState(false);

  const resetForm = () => {
    setFormData({
      oldPassword: '',
      newPassword: '',
      newPassword2: ''
    });
    setMessage({ type: '', content: '' });
  };

  const handleClose = () => {
    resetForm();
    onOpenChange(false);
  };

  const validateForm = () => {
    if (!formData.oldPassword) {
      setMessage({ type: 'error', content: '현재 비밀번호를 입력해주세요.' });
      return false;
    }
    if (!formData.newPassword) {
      setMessage({ type: 'error', content: '새 비밀번호를 입력해주세요.' });
      return false;
    }
    if (formData.newPassword !== formData.newPassword2) {
      setMessage({ type: 'error', content: '새 비밀번호가 일치하지 않습니다.' });
      return false;
    }
    return true;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!validateForm()) return;

    setIsLoading(true);
    setMessage({ type: '', content: '' });

    try {
      const response = await fetch('/api/account/password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-XSRF-TOKEN': getCSRFToken()
        },
        body: JSON.stringify(formData)
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || '비밀번호 변경에 실패했습니다.');
      }

      setMessage({ type: 'success', content: '비밀번호가 성공적으로 변경되었습니다.' });
      setTimeout(() => {
        handleClose();
      }, 2000);
    } catch (error) {
      setMessage({ type: 'error', content: error.message });
    } finally {
      setIsLoading(false);
    }
  };

  return (
      <Dialog open={open} onOpenChange={handleClose}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>비밀번호 변경</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleSubmit}>
            <div className="grid gap-4 py-4">
              {message.content && (
                  <Alert variant={message.type === 'error' ? 'destructive' : 'default'}>
                    <AlertDescription>{message.content}</AlertDescription>
                  </Alert>
              )}
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="oldPassword" className="text-right">
                  현재 비밀번호
                </Label>
                <Input
                    id="oldPassword"
                    type="password"
                    value={formData.oldPassword}
                    onChange={(e) => setFormData(prev => ({ ...prev, oldPassword: e.target.value }))}
                    className="col-span-3"
                    required
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="newPassword" className="text-right">
                  새 비밀번호
                </Label>
                <Input
                    id="newPassword"
                    type="password"
                    value={formData.newPassword}
                    onChange={(e) => setFormData(prev => ({ ...prev, newPassword: e.target.value }))}
                    className="col-span-3"
                    required
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="newPassword2" className="text-right">
                  새 비밀번호 확인
                </Label>
                <Input
                    id="newPassword2"
                    type="password"
                    value={formData.newPassword2}
                    onChange={(e) => setFormData(prev => ({ ...prev, newPassword2: e.target.value }))}
                    className="col-span-3"
                    required
                />
              </div>
            </div>
            <DialogFooter>
              <Button type="button" variant="secondary" onClick={handleClose}>
                취소
              </Button>
              <Button type="submit" disabled={isLoading}>
                {isLoading ? '변경 중...' : '변경'}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
  );
};

export default PasswordChangeDialog;
