'use client';

import React, { useEffect, useState } from 'react';
import { AlertTriangle, Info, ShieldAlert, X } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface ConfirmationDialogProps {
  isOpen: boolean;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  variant?: 'danger' | 'warning' | 'info';
  isLoading?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function ConfirmationDialog({
  isOpen,
  title,
  description,
  confirmLabel = 'Confirm Action',
  cancelLabel = 'Cancel',
  variant = 'danger',
  isLoading = false,
  onConfirm,
  onCancel,
}: ConfirmationDialogProps) {
  const [animate, setAnimate] = useState(false);

  useEffect(() => {
    if (isOpen) {
      setAnimate(true);
      document.body.style.overflow = 'hidden';
    } else {
      setAnimate(false);
      document.body.style.overflow = 'unset';
    }
    return () => { document.body.style.overflow = 'unset'; };
  }, [isOpen]);

  if (!isOpen) return null;

  const variantStyles = {
    danger: {
      icon: ShieldAlert,
      iconClass: 'text-rose-500 bg-rose-500/10 border-rose-500/20',
      btnClass: 'bg-rose-500 hover:bg-rose-600 text-white focus:ring-rose-500',
    },
    warning: {
      icon: AlertTriangle,
      iconClass: 'text-amber-500 bg-amber-500/10 border-amber-500/20',
      btnClass: 'bg-amber-500 hover:bg-amber-600 text-white focus:ring-amber-500',
    },
    info: {
      icon: Info,
      iconClass: 'text-primary bg-primary/10 border-primary/20',
      btnClass: 'bg-primary hover:bg-primary/90 text-primary-foreground focus:ring-primary',
    },
  };

  const currentVariant = variantStyles[variant];
  const IconComponent = currentVariant.icon;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 select-none">
      {/* Dynamic backdrop fog overlay */}
      <div 
        onClick={isLoading ? undefined : onCancel}
        className={`fixed inset-0 bg-black/50 backdrop-blur-xs transition-opacity duration-300 ease-in-out ${
          animate ? 'opacity-100' : 'opacity-0'
        }`} 
      />

      {/* Pop Modal Box Container */}
      <div 
        className={`relative w-full max-w-md transform bg-background border border-border/50 rounded-2xl shadow-2xl p-5 flex flex-col gap-4 transition-all duration-300 ease-out-back ${
          animate ? 'scale-100 opacity-100 translate-y-0' : 'scale-95 opacity-0 translate-y-2'
        }`}
      >
        {/* Header Section */}
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className={`h-8 w-8 rounded-lg border flex items-center justify-center shrink-0 ${currentVariant.iconClass}`}>
              <IconComponent className="h-4 w-4 stroke-[2.5]" />
            </div>
            <h3 className="text-sm font-bold text-foreground tracking-tight text-left leading-tight">
              {title}
            </h3>
          </div>
          <button 
            onClick={onCancel}
            disabled={isLoading}
            className="p-1 rounded-lg text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50 cursor-pointer"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        {/* Content Body Description */}
        <p className="text-xs font-medium text-muted-foreground/90 leading-relaxed text-left pl-11">
          {description}
        </p>

        {/* Form Action Controls Footer */}
        <div className="flex items-center justify-end gap-2 border-t border-border/10 pt-3 mt-1">
          <Button 
            type="button" 
            variant="ghost" 
            onClick={onCancel} 
            disabled={isLoading}
            className="h-8 text-xs font-semibold cursor-pointer"
          >
            {cancelLabel}
          </Button>
          <Button
            type="button"
            onClick={onConfirm}
            disabled={isLoading}
            className={`h-8 rounded-lg px-3 text-xs font-semibold shadow-xs focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all cursor-pointer ${currentVariant.btnClass}`}
          >
            {isLoading ? 'Processing...' : confirmLabel}
          </Button>
        </div>
      </div>
    </div>
  );
}