import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { X, AlertTriangle, Loader2 } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface DeleteAccountConfirmModalProps {
  onClose: () => void;
  onConfirm: () => void;
}

export const DeleteAccountConfirmModal: React.FC<
  DeleteAccountConfirmModalProps
> = ({ onClose, onConfirm }) => {
  const { addToast } = useToast();
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  const handleDelete = () => {
    if (!password) {
      addToast('Please enter your password to confirm', 'error');
      return;
    }
    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      setLoading(false);
      onConfirm();
    }, 2000);
  };

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={loading ? undefined : onClose}
      ></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
        <div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
          <h3 className="font-bold text-kodo-red flex items-center gap-2">
            <AlertTriangle className="w-5 h-5 fill-current" /> PERMANENT
            DELETION
          </h3>
          <button
            onClick={onClose}
            disabled={loading}
            className="text-kodo-content-dim hover:text-white disabled:opacity-50"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="p-6 space-y-4">
          <p className="text-kodo-text-main text-sm">
            This is the final step. Once you click delete, your account will be
            queued for immediate removal. You will be logged out.
          </p>

          <div className="bg-kodo-ink p-4 rounded border border-kodo-steel">
            <ul className="text-xs text-kodo-content-dim space-y-2 list-disc pl-4">
              <li>All uploaded tracks and assets will be deleted.</li>
              <li>Your username will be released.</li>
              <li>Any active subscriptions will be cancelled immediately.</li>
            </ul>
          </div>

          <div>
            <label className="block text-sm font-bold text-white mb-2">
              Confirm Password
            </label>
            <Input
              type="password"
              placeholder="Enter your password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoFocus
            />
          </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose} disabled={loading}>
            Cancel
          </Button>
          <Button
            variant="primary"
            className="bg-kodo-red hover:bg-kodo-red border-kodo-red text-white"
            onClick={handleDelete}
            disabled={loading}
          >
            {loading ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              'DELETE FOREVER'
            )}
          </Button>
        </div>
      </div>
    </div>
  );
};