import React from 'react';
import { toast, ToastOptions } from 'react-toastify';

// Configuración base para los toasts
const defaultOptions: ToastOptions = {
    position: "top-right",
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
};

// Toast de éxito
export const showSuccess = (message: string, options?: ToastOptions) => {
    return toast.success(message, {
        ...defaultOptions,
        className: "!bg-emerald-50 dark:!bg-emerald-900/20 !text-emerald-800 dark:!text-emerald-200 !border !border-emerald-200 dark:!border-emerald-700 !rounded-xl",
        progressClassName: "!bg-emerald-500",
        ...options,
    });
};

// Toast de error
export const showError = (message: string, options?: ToastOptions) => {
    return toast.error(message, {
        ...defaultOptions,
        className: "!bg-red-50 dark:!bg-red-900/20 !text-red-800 dark:!text-red-200 !border !border-red-200 dark:!border-red-700 !rounded-xl",
        progressClassName: "!bg-red-500",
        ...options,
    });
};

// Toast de advertencia
export const showWarning = (message: string, options?: ToastOptions) => {
    return toast.warn(message, {
        ...defaultOptions,
        className: "!bg-yellow-50 dark:!bg-yellow-900/20 !text-yellow-800 dark:!text-yellow-200 !border !border-yellow-200 dark:!border-yellow-700 !rounded-xl",
        progressClassName: "!bg-yellow-500",
        ...options,
    });
};

// Toast de información
export const showInfo = (message: string, options?: ToastOptions) => {
    return toast.info(message, {
        ...defaultOptions,
        className: "!bg-blue-50 dark:!bg-blue-900/20 !text-blue-800 dark:!text-blue-200 !border !border-blue-200 dark:!border-blue-700 !rounded-xl",
        progressClassName: "!bg-blue-500",
        ...options,
    });
};

// Función para confirmaciones con toast
export const showConfirmation = (
    message: string,
    onConfirm: () => void,
    onCancel?: () => void,
    options?: ToastOptions
) => {
    const toastId = toast(
        ({ closeToast }) => (
            <div className="flex flex-col gap-3">
                <p className="text-sm font-medium">{message}</p>
                <div className="flex gap-2 justify-end">
                    <button
                        onClick={() => {
                            onConfirm();
                            closeToast();
                        }}
                        className="px-3 py-1.5 bg-emerald-600 text-white text-xs font-medium rounded-lg hover:bg-emerald-700 transition-colors"
                    >
                        Confirmar
                    </button>
                    <button
                        onClick={() => {
                            onCancel?.();
                            closeToast();
                        }}
                        className="px-3 py-1.5 bg-slate-200 text-slate-700 text-xs font-medium rounded-lg hover:bg-slate-300 transition-colors dark:bg-slate-600 dark:text-slate-200 dark:hover:bg-slate-500"
                    >
                        Cancelar
                    </button>
                </div>
            </div>
        ),
        {
            ...defaultOptions,
            autoClose: false,
            closeOnClick: false,
            className: "!bg-white dark:!bg-slate-800 !text-slate-900 dark:!text-slate-100 !border !border-slate-200 dark:!border-slate-700 !rounded-xl",
            ...options,
        }
    );

    return toastId;
};

// Toast de carga
export const showLoading = (message: string = "Cargando...", options?: ToastOptions) => {
    return toast.loading(message, {
        ...defaultOptions,
        className: "!bg-white dark:!bg-slate-800 !text-slate-900 dark:!text-slate-100 !border !border-slate-200 dark:!border-slate-700 !rounded-xl",
        ...options,
    });
};

// Actualizar toast existente
export const updateToast = (toastId: any, type: 'success' | 'error' | 'warning' | 'info', message: string) => {
    const classNames = {
        success: "!bg-emerald-50 dark:!bg-emerald-900/20 !text-emerald-800 dark:!text-emerald-200 !border !border-emerald-200 dark:!border-emerald-700 !rounded-xl",
        error: "!bg-red-50 dark:!bg-red-900/20 !text-red-800 dark:!text-red-200 !border !border-red-200 dark:!border-red-700 !rounded-xl",
        warning: "!bg-yellow-50 dark:!bg-yellow-900/20 !text-yellow-800 dark:!text-yellow-200 !border !border-yellow-200 dark:!border-yellow-700 !rounded-xl",
        info: "!bg-blue-50 dark:!bg-blue-900/20 !text-blue-800 dark:!text-blue-200 !border !border-blue-200 dark:!border-blue-700 !rounded-xl"
    };

    const progressColors = {
        success: "!bg-emerald-500",
        error: "!bg-red-500",
        warning: "!bg-yellow-500",
        info: "!bg-blue-500"
    };

    toast.update(toastId, {
        render: message,
        type: type,
        isLoading: false,
        autoClose: 5000,
        className: classNames[type],
        progressClassName: progressColors[type],
    });
};