import { router } from '@inertiajs/react';
import { Play, Pause } from 'lucide-react';
import { useState } from 'react';

/**
 * Liga/desliga um flag de master-switch da integração (integration_enterprises_configurations),
 * ex: create_products, orders — ativa/desativa todos os fluxos daquele tipo de uma vez.
 */
export function MasterSwitch({ intEnterId, field, noun, value }: { intEnterId: number; field: string; noun: string; value: boolean }) {
    const [enabled, setEnabled] = useState(!!value);
    const [loading, setLoading] = useState(false);

    const toggle = () => {
        const next = !enabled;
        setEnabled(next);
        setLoading(true);
        router.put(route('integracoes.toggleFlag', { intEnterId }), { field, value: next }, {
            preserveScroll: true,
            preserveState: true,
            onError: () => setEnabled(!next),
            onFinish: () => setLoading(false),
        });
    };

    return (
        <button
            type="button"
            onClick={toggle}
            disabled={loading}
            className={[
                'inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg border transition-colors disabled:opacity-50',
                enabled
                    ? 'border-rose-200 dark:border-rose-800 text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950'
                    : 'border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-950',
            ].join(' ')}
        >
            {enabled
                ? <><Pause size={12} strokeWidth={2.5} /> Desativar integração master de {noun}</>
                : <><Play  size={12} strokeWidth={2.5} /> Ativar integração master de {noun}</>
            }
        </button>
    );
}