import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from './ui/dialog';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Shield, Eye, EyeOff, Loader2 } from 'lucide-react';

/**
 * PasswordConfirmDialog - Dialog requiring admin password re-entry for sensitive actions
 */
const PasswordConfirmDialog = ({
  open,
  onOpenChange,
  onConfirm,
  title = 'Confirm Your Identity',
  description = 'Please enter your password to proceed with this action.',
  loading = false,
}) => {
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState(null);

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

    if (!password.trim()) {
      setError('Password is required');
      return;
    }

    try {
      await onConfirm(password);
      setPassword('');
    } catch (err) {
      setError(err.message || 'Invalid password');
    }
  };

  const handleOpenChange = (isOpen) => {
    if (!isOpen) {
      setPassword('');
      setError(null);
    }
    onOpenChange(isOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="bg-background rounded-2xl border border-[var(--neutral-800)] p-0 overflow-hidden max-w-md">
        <DialogHeader className="bg-brand-purple text-white px-6 py-4">
          <div className="flex items-center gap-3">
            <Shield className="h-6 w-6" />
            <div>
              <DialogTitle
                className="text-lg font-semibold text-white"
                style={{ fontFamily: "'Inter', sans-serif" }}
              >
                {title}
              </DialogTitle>
              <DialogDescription
                className="text-white/80 text-sm"
                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
              >
                {description}
              </DialogDescription>
            </div>
          </div>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          <div className="space-y-2">
            <Label
              htmlFor="password"
              className="text-[var(--purple-ink)]"
              style={{ fontFamily: "'Inter', sans-serif" }}
            >
              Your Password
            </Label>
            <div className="relative">
              <Input
                id="password"
                type={showPassword ? 'text' : 'password'}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Enter your password"
                className="border-[var(--neutral-800)] pr-10"
                autoComplete="current-password"
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-brand-purple hover:text-[var(--purple-ink)]"
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4" />
                ) : (
                  <Eye className="h-4 w-4" />
                )}
              </button>
            </div>
          </div>

          {error && (
            <p
              className="text-sm text-red-500"
              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
            >
              {error}
            </p>
          )}

          <DialogFooter className="flex-row gap-3 justify-end pt-4 border-t border-[var(--neutral-800)]">
            <Button
              type="button"
              variant="outline"
              onClick={() => handleOpenChange(false)}
              disabled={loading}
              className="border-2 border-[var(--neutral-800)] text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-6"
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={loading || !password.trim()}
              className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full px-6"
            >
              {loading ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Verifying...
                </>
              ) : (
                'Confirm'
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};

export default PasswordConfirmDialog;
