clube67_newwhats.local/newwhats.clube67.com/newwhats.local/frontend/components/SettingsPanel.tsx

import React, { useEffect, useState, useCallback } from 'react';
import { ShieldCheck, LayoutGrid, Check, Loader2, Tag } from 'lucide-react';

interface SettingsPanelProps {
    instanceId: string | null;
}

// Engines oferecidas no painel. A 'official' (Baileys 6, que dá 401) fica de fora.
//   baileys7 → Baileys 7 oficial (a que conecta) → rótulo "API estável"
//   infinite → InfinityAPI (com botões)
const ENGINES: {
    value: string; titulo: string; desc: string; icon: any;
    iconCls: string; activeBorder: string; activeBg: string; checkCls: string; btnCls: string;
}[] = [
    {
        value: 'baileys7', titulo: 'API estável', desc: 'Conexão recomendada do WhatsApp',
        icon: ShieldCheck, iconCls: 'text-emerald-500',
        activeBorder: 'border-emerald-400', activeBg: 'bg-emerald-50', checkCls: 'text-emerald-600',
        btnCls: 'bg-emerald-500 hover:bg-emerald-600',
    },
    {
        value: 'infinite', titulo: 'InfinityAPI', desc: 'Com botões interativos (experimental)',
        icon: LayoutGrid, iconCls: 'text-amber-500',
        activeBorder: 'border-amber-400', activeBg: 'bg-amber-50', checkCls: 'text-amber-600',
        btnCls: 'bg-amber-500 hover:bg-amber-600',
    },
];

export default function SettingsPanel({ instanceId }: SettingsPanelProps) {
    const [engine, setEngine] = useState<string | null>(null);
    const [loading, setLoading] = useState(false);
    const [saving, setSaving] = useState<string | null>(null);
    const [error, setError] = useState<string | null>(null);
    const [version, setVersion] = useState<any>(null);

    const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8008';
    const authHeader = (): Record<string, string> => {
        const t = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
        return t ? { Authorization: `Bearer ${t}` } : {};
    };

    // Versão do sistema (servida em /version.json)
    useEffect(() => {
        fetch('/version.json')
            .then((r) => (r.ok ? r.json() : null))
            .then(setVersion)
            .catch(() => {});
    }, []);

    // Engine atual da instância
    useEffect(() => {
        if (!instanceId) return;
        setLoading(true);
        fetch(`${API_URL}/api/instances`, { headers: authHeader() })
            .then((r) => (r.ok ? r.json() : []))
            .then((list) => {
                const inst = Array.isArray(list) ? list.find((i: any) => i.id === instanceId) : null;
                setEngine(inst?.engine ?? null);
            })
            .catch(() => {})
            .finally(() => setLoading(false));
    }, [instanceId]);

    const selectEngine = useCallback(async (value: string) => {
        if (!instanceId || saving || value === engine) return;
        setSaving(value);
        setError(null);
        try {
            const res = await fetch(`${API_URL}/api/instances/${instanceId}/engine`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', ...authHeader() },
                body: JSON.stringify({ engine: value }),
            });
            if (res.status === 429) {
                const d = await res.json().catch(() => ({}));
                throw new Error(d.error ?? 'Aguarde o intervalo entre trocas.');
            }
            if (!res.ok) throw new Error('Falha ao trocar a API.');
            setEngine(value);
        } catch (e: any) {
            setError(e?.message ?? 'Erro ao trocar a API.');
        } finally {
            setSaving(null);
        }
    }, [instanceId, saving, engine]);

    return (
        <div className="relative z-[1] flex-1 h-full overflow-y-auto bg-[#f0f2f5] p-6 md:p-10">
            <div className="max-w-2xl mx-auto">
                <h1 className="text-3xl font-light text-[#41525d] mb-2">Configurações</h1>
                <p className="text-base text-[#667781] mb-8">Escolha a API de conexão do WhatsApp para esta instância.</p>

                {!instanceId && (
                    <p className="text-base text-[#667781] mb-6">Selecione uma instância primeiro.</p>
                )}

                {/* ── Engines ─────────────────────────────────────────────── */}
                <div className="flex flex-col gap-4 mb-6">
                    {ENGINES.map((opt) => {
                        const Icon = opt.icon;
                        const ativa = engine === opt.value;
                        const salvando = saving === opt.value;
                        return (
                            <div
                                key={opt.value}
                                className={`rounded-2xl border-2 bg-white p-8 transition-colors ${ativa ? `${opt.activeBorder} ${opt.activeBg}` : 'border-[#e9edef]'}`}
                            >
                                <div className="flex items-center gap-4">
                                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center ${ativa ? 'bg-white' : 'bg-[#f0f2f5]'}`}>
                                        <Icon className={`w-8 h-8 ${opt.iconCls}`} />
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <h2 className="text-2xl font-semibold text-[#111b21]">{opt.titulo}</h2>
                                        <p className="text-base text-[#667781]">{opt.desc}</p>
                                    </div>
                                    {ativa ? (
                                        <span className={`flex items-center gap-1 font-medium text-lg ${opt.checkCls}`}>
                                            <Check className="w-6 h-6" /> Ativa
                                        </span>
                                    ) : (
                                        <button
                                            onClick={() => selectEngine(opt.value)}
                                            disabled={!instanceId || !!saving}
                                            className={`inline-flex items-center gap-2 rounded-xl text-white text-lg font-medium px-6 py-3 disabled:opacity-60 ${opt.btnCls}`}
                                        >
                                            {salvando ? <Loader2 className="w-5 h-5 animate-spin" /> : <Icon className="w-5 h-5" />}
                                            Ativar
                                        </button>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                </div>

                {loading && <p className="text-sm text-[#8696a0] mb-4">Carregando configuração atual…</p>}
                {error && <p className="text-sm text-red-500 mb-4">{error}</p>}

                {/* ── Versão ──────────────────────────────────────────────── */}
                <div className="rounded-2xl border-2 border-[#e9edef] bg-white p-8">
                    <div className="flex items-center gap-4">
                        <div className="w-14 h-14 rounded-2xl bg-[#f0f2f5] flex items-center justify-center">
                            <Tag className="w-8 h-8 text-[#54656f]" />
                        </div>
                        <div className="flex-1">
                            <h2 className="text-2xl font-semibold text-[#111b21]">Versão</h2>
                            <p className="text-3xl font-light text-[#41525d] mt-1">{version?.version ?? '—'}</p>
                            {version?.buildCount != null && (
                                <p className="text-base text-[#667781]">build {version.buildCount}</p>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}