import React, { useState } from "react";
import { X, AlertTriangle } from "lucide-react";

interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string | React.ReactNode;
  confirmText?: string;
  cancelText?: string;
  requireTypedConfirmation?: boolean;
  confirmationWord?: string;
  isDangerous?: boolean;
}

export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = "Confirmar",
  cancelText = "Cancelar",
  requireTypedConfirmation = false,
  confirmationWord = "CONFIRMAR",
  isDangerous = false,
}) => {
  const [typedConfirmation, setTypedConfirmation] = useState("");

  if (!isOpen) return null;

  const handleConfirm = () => {
    if (requireTypedConfirmation && typedConfirmation !== confirmationWord) {
      return;
    }
    onConfirm();
    setTypedConfirmation("");
    onClose();
  };

  const handleCancel = () => {
    setTypedConfirmation("");
    onClose();
  };

  const isConfirmDisabled =
    requireTypedConfirmation && typedConfirmation !== confirmationWord;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 overflow-hidden animate-in fade-in duration-200">
        {/* Header */}
        <div
          className={`px-6 py-4 border-b flex items-center justify-between ${
            isDangerous
              ? "bg-red-50 border-red-200"
              : "bg-blue-50 border-blue-200"
          }`}
        >
          <div className="flex items-center gap-3">
            {isDangerous ? (
              <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                <AlertTriangle className="w-5 h-5 text-red-600" />
              </div>
            ) : (
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                <AlertTriangle className="w-5 h-5 text-blue-600" />
              </div>
            )}
            <h3
              className={`text-lg font-semibold ${
                isDangerous ? "text-red-900" : "text-blue-900"
              }`}
            >
              {title}
            </h3>
          </div>
          <button
            onClick={handleCancel}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="px-6 py-5">
          <div className="text-gray-700 mb-4">{message}</div>

          {requireTypedConfirmation && (
            <div className="mt-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Digite <span className="font-bold">{confirmationWord}</span>{" "}
                para confirmar:
              </label>
              <input
                type="text"
                value={typedConfirmation}
                onChange={(e) => setTypedConfirmation(e.target.value)}
                className="form-input"
                placeholder={confirmationWord}
                autoFocus
              />
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-end gap-3">
          <button
            onClick={handleCancel}
            className="px-5 py-2.5 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium"
          >
            {cancelText}
          </button>
          <button
            onClick={handleConfirm}
            disabled={isConfirmDisabled}
            className={`px-5 py-2.5 text-white rounded-lg font-medium transition-all ${
              isDangerous
                ? "bg-red-600 hover:bg-red-700 disabled:bg-red-300"
                : "bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300"
            } disabled:cursor-not-allowed`}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
};


