'use client';

import React from 'react';
import { AlertTriangle, Trash2, X } from 'lucide-react';
import { cn } from '@/lib/utils';

interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  isDestructive?: boolean;
}

export function ConfirmDialog({
  isOpen,
  onClose,
  onConfirm,
  title,
  description,
  confirmLabel = 'Konfirmasi',
  cancelLabel = 'Batal',
  isDestructive = false,
}: ConfirmDialogProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-in fade-in duration-300">
      {/* Premium Backdrop Overlay */}
      <div 
        className="fixed inset-0 bg-slate-950/65 backdrop-blur-md transition-opacity duration-300"
        onClick={onClose}
      />

      {/* Dialog Content Box */}
      <div className="bg-card border border-text-muted/10 w-full max-w-md rounded-2xl shadow-2xl relative z-10 overflow-hidden transform scale-100 transition-all duration-300 animate-in zoom-in-95">
        <div className="p-6 text-center space-y-5">
          {/* Close Button top right */}
          <button
            onClick={onClose}
            className="absolute top-4 right-4 p-1 rounded-lg hover:bg-surface text-text-muted hover:text-text-primary transition-colors focus:outline-none"
            title="Close dialog"
          >
            <X className="h-4 w-4" />
          </button>

          {/* Premium Glowing Icon Container */}
          <div className={cn(
            "mx-auto w-14 h-14 rounded-full flex items-center justify-center shadow-inner border",
            isDestructive 
              ? "bg-danger/10 border-danger/25 text-danger" 
              : "bg-warning/10 border-warning/25 text-warning"
          )}>
            {isDestructive ? (
              <Trash2 className="h-6 w-6 animate-pulse" />
            ) : (
              <AlertTriangle className="h-6 w-6 animate-pulse" />
            )}
          </div>
          
          {/* Typography */}
          <div className="space-y-2 px-2">
            <h3 className="text-xl font-bold text-text-primary">
              {title}
            </h3>
            <p className="text-sm text-text-muted leading-relaxed">
              {description}
            </p>
          </div>

          {/* Action Buttons - Symmetrical & Premium styling */}
          <div className="flex items-center justify-center gap-3 pt-3">
            <button
              type="button"
              onClick={onClose}
              className="w-full py-2.5 px-4 border border-text-muted/10 text-text-primary bg-card hover:bg-surface rounded-xl text-sm font-semibold transition-all hover:scale-[1.02] focus:outline-none"
            >
              {cancelLabel}
            </button>
            <button
              type="button"
              onClick={() => {
                onConfirm();
                onClose();
              }}
              className={cn(
                "w-full py-2.5 px-4 text-white rounded-xl text-sm font-semibold shadow-lg transition-all hover:scale-[1.02] focus:outline-none",
                isDestructive 
                  ? "bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 shadow-red-500/20" 
                  : "bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 shadow-amber-500/20"
              )}
            >
              {confirmLabel}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}