scoreodonto.com/frontend/components/AgendaSettingsModal.tsx

import React, { useState, useEffect } from 'react';
import { X, ChevronLeft, ChevronRight, Save, Mail, Calendar, Settings as GearIcon, CheckCircle2 } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { Settings, Dentista } from '../types.ts';
import { useToast } from '../contexts/ToastContext.tsx';
import { GoogleConnectButton } from './GoogleConnectButton.tsx';
import { Link as LinkIcon, Copy, Share2 } from 'lucide-react';

interface AgendaSettingsModalProps {
    isOpen: boolean;
    onClose: () => void;
    dentists: Dentista[] | null;
}

export const AgendaSettingsModal: React.FC<AgendaSettingsModalProps> = ({ isOpen, onClose, dentists }) => {
    const [page, setPage] = useState(1);
    const [config, setConfig] = useState<Settings>({
        clinicEmail: '',
        clinicCalendarId: '',
        googleApiKey: '',
        googleCalendarIds: {}
    });
    const [isSaving, setIsSaving] = useState(false);
    const [connectedAccounts, setConnectedAccounts] = useState<any[]>([]);
    const toast = useToast();
    // Escopo: tudo (status Google, convites, settings) é da clínica/workspace ativa.
    const clinicaId = HybridBackend.getActiveWorkspace()?.id;

    const fetchGoogleStatus = async () => {
        try {
            const response = await fetch(`/api/auth/google/status${clinicaId ? `?clinicaId=${clinicaId}` : ''}`);
            const data = await response.json();
            setConnectedAccounts(Array.isArray(data) ? data : []);
        } catch (error) {
            console.error("Erro ao buscar status do Google:", error);
        }
    };

    useEffect(() => {
        if (isOpen) {
            const loadSettings = async () => {
                try {
                    const settings = await HybridBackend.getSettings();
                    setConfig({
                        clinicEmail: settings.clinicEmail || '',
                        clinicCalendarId: settings.clinicCalendarId || '',
                        googleApiKey: settings.googleApiKey || '',
                        googleCalendarIds: settings.googleCalendarIds || {}
                    });
                } catch (error) {
                    console.error("Erro ao carregar configurações:", error);
                }
            };
            loadSettings();
            fetchGoogleStatus();
            setPage(1); // Reset to first page
        }
    }, [isOpen]);

    const copyInviteLink = (dentistId: string) => {
        const url = `/api/auth/google/url?dentistId=${dentistId}${clinicaId ? `&clinicaId=${clinicaId}` : ''}`;
        navigator.clipboard.writeText(url);
        toast.success("LINK DE CONVITE COPIADO!");
    };

    const handleSave = async () => {
        setIsSaving(true);
        try {
            await HybridBackend.saveSettings(config);
            toast.success("CONFIGURAÇÕES SALVAS COM SUCESSO!");
            onClose();
        } catch (error) {
            toast.error("ERRO AO SALVAR CONFIGURAÇÕES.");
        } finally {
            setIsSaving(false);
        }
    };

    if (!isOpen) return null;

    const totalPages = 2;
    // Conta admin/clínica conectada NESTA clínica: usa o owner_id real (email) p/ o
    // disconnect funcionar; 'admin' fica só no connect (o backend resolve o email).
    const adminAccount = connectedAccounts.find(a => a.owner_id && a.owner_id.includes('@'));

    return (
        <div className="fixed inset-0 bg-black/60 z-[60] flex items-center justify-center backdrop-blur-md p-0">
            <div className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-[2.5rem] flex flex-col overflow-hidden border border-gray-100 animate-in fade-in zoom-in-95 duration-300">

                {/* Header */}
                <div className="px-10 py-8 border-b border-gray-50 flex justify-between items-center bg-gradient-to-br from-gray-50 to-white">
                    <div className="flex items-center gap-4">
                        <div className="p-3 bg-teal-600 rounded-2xl shadow-lg shadow-teal-200">
                            <GearIcon size={24} className="text-white animate-spin-slow" />
                        </div>
                        <div>
                            <h2 className="text-xl font-black text-gray-900 uppercase tracking-tighter">Configurações da Agenda</h2>
                            <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-0.5">Integrações e Comunicação</p>
                        </div>
                    </div>
                    <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-xl transition-colors text-gray-400">
                        <X size={24} />
                    </button>
                </div>

                {/* Progress Bar */}
                <div className="h-1.5 w-full bg-gray-100 flex">
                    <div
                        className="h-full bg-teal-600 transition-all duration-500 ease-out shadow-[0_0_10px_rgba(37,99,235,0.5)]"
                        style={{ width: `${(page / totalPages) * 100}%` }}
                    ></div>
                </div>

                {/* Content Area - Horizontal Slider Simulation */}
                <div className="flex-1 relative overflow-hidden bg-white">
                    <div
                        className="absolute inset-0 flex transition-transform duration-500 ease-in-out transform-gpu"
                        style={{ transform: `translateX(-${(page - 1) * 100}%)` }}
                    >
                        {/* Page 1: Clinic Emails */}
                        <div className="w-full shrink-0 p-10 animate-in fade-in duration-700">
                            <div className="flex items-center gap-3 mb-8">
                                <Mail className="text-teal-600" size={24} />
                                <h3 className="text-sm font-black text-gray-800 uppercase tracking-tight">E-mails da Clínica</h3>
                            </div>
                            <div className="space-y-6">
                                <div className="space-y-2">
                                    <label className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] ml-1">E-mail para Notificações</label>
                                    <input
                                        type="email"
                                        placeholder="EX: CONTATO@CLINICA.COM"
                                        className="w-full bg-gray-50 border-2 border-transparent focus:border-teal-600 focus:bg-white rounded-2xl p-4 font-bold text-gray-800 outline-none transition-all shadow-sm"
                                        value={config.clinicEmail}
                                        onChange={(e) => setConfig({ ...config, clinicEmail: e.target.value.toUpperCase() })}
                                    />
                                    <p className="text-[10px] text-gray-400 italic ml-1">* Este e-mail será usado para alertas de sistema e envio de comprovantes.</p>
                                </div>
                            </div>
                        </div>

                        {/* Page 3: Google Calendar Mapping */}
                        <div className="w-full shrink-0 p-10 animate-in fade-in duration-700 overflow-hidden flex flex-col">
                            <div className="flex justify-between items-center mb-8">
                                <div className="flex items-center gap-3">
                                    <Calendar className="text-emerald-600" size={24} />
                                    <h3 className="text-sm font-black text-gray-800 uppercase tracking-tight">Agendas dos Dentistas</h3>
                                </div>
                                <a href="https://calendar.google.com/calendar/u/0/r/settings" target="_blank" rel="noreferrer" className="text-[9px] font-black text-white bg-gray-900 px-3 py-1.5 rounded-lg hover:bg-black transition-colors uppercase tracking-widest">
                                    Abrir Google Calendar
                                </a>
                            </div>

                            <div className="space-y-4 flex-1 overflow-y-auto pr-4 custom-scrollbar">
                                <div className="bg-teal-50/50 p-4 rounded-2xl border border-teal-100 mb-2">
                                    <p className="text-[10px] text-teal-800 font-bold mb-1 uppercase tracking-wider">Conectar Google Agenda</p>
                                    <p className="text-[10px] text-teal-600 italic">É só clicar e autorizar com a conta Google. Você NÃO precisa criar projeto, ativar API nem colar nenhum ID — a integração já está pronta.</p>
                                    <p className="text-[10px] text-teal-700 font-bold mt-1.5">Os agendamentos são copiados para o Google (backup) e o paciente recebe convite + lembretes (1 dia e 1h antes). Se já estava conectado, <u>reconecte uma vez</u> para liberar a escrita.</p>
                                </div>

                                {/* ADMIN / CLINIC CONNECTION */}
                                <div className="space-y-3 mb-6">
                                    <h4 className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Sua Conta (Administrador)</h4>
                                    <GoogleConnectButton
                                        ownerId={adminAccount?.owner_id || 'admin'}
                                        clinicaId={clinicaId}
                                        isConnected={!!adminAccount}
                                        onStatusChange={fetchGoogleStatus}
                                    />
                                </div>

                                <div className="space-y-4">
                                    <h4 className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Contas dos Dentistas</h4>
                                    {dentists?.length ? dentists.map((dentist) => {
                                        const isConnected = connectedAccounts.some(a => a.owner_id === dentist.id);
                                        return (
                                            <div key={dentist.id} className="bg-gray-50 rounded-2xl p-4 border border-transparent hover:border-gray-200 transition-all">
                                                <div className="flex items-center justify-between mb-4">
                                                    <div className="flex items-center gap-3">
                                                        <div className="w-3 h-3 rounded-full" style={{ backgroundColor: dentist.corAgenda }}></div>
                                                        <span className="text-xs font-black text-gray-800 uppercase">{dentist.nome}</span>
                                                    </div>
                                                    {isConnected ? (
                                                        <span className="text-[9px] font-black text-emerald-600 bg-emerald-100 px-2 py-1 rounded-lg uppercase">Conectado</span>
                                                    ) : (
                                                        <span className="text-[9px] font-black text-gray-400 uppercase">Não Vinculado</span>
                                                    )}
                                                </div>

                                                <div className="flex gap-2">
                                                    <div className="flex-1">
                                                        <GoogleConnectButton
                                                            ownerId={dentist.id}
                                                            clinicaId={clinicaId}
                                                            isConnected={isConnected}
                                                            onStatusChange={fetchGoogleStatus}
                                                        />
                                                    </div>
                                                    {!isConnected && (
                                                        <button
                                                            onClick={() => copyInviteLink(dentist.id)}
                                                            className="p-4 bg-gray-100 text-gray-600 rounded-2xl hover:bg-gray-200 transition-all flex items-center justify-center group"
                                                            title="Gerar Link para o Dentista"
                                                        >
                                                            <Share2 size={18} className="group-hover:scale-110 transition-transform" />
                                                        </button>
                                                    )}
                                                </div>

                                            </div>
                                        );
                                    }) : (
                                        <p className="text-center text-xs text-gray-400 py-10 uppercase font-bold">Nenhum dentista cadastrado.</p>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Footer Navigation */}
                <div className="px-10 py-8 bg-gray-50/50 border-t border-gray-100 flex justify-between items-center">
                    <div className="flex gap-2">
                        {page > 1 && (
                            <button
                                onClick={() => setPage(page - 1)}
                                className="flex items-center gap-2 px-6 py-3 text-xs font-black text-gray-500 hover:text-gray-900 bg-white rounded-2xl border border-gray-200 hover:shadow-md transition-all uppercase tracking-widest"
                            >
                                <ChevronLeft size={16} /> Anterior
                            </button>
                        )}
                    </div>

                    <div className="flex gap-4">
                        {page < totalPages ? (
                            <button
                                onClick={() => setPage(page + 1)}
                                className="flex items-center gap-2 px-8 py-4 bg-teal-600 text-white rounded-[1.5rem] text-xs font-black uppercase tracking-widest hover:bg-teal-700 hover:shadow-xl hover:shadow-teal-200 transition-all shadow-lg shadow-teal-100"
                            >
                                Próximo <ChevronRight size={16} />
                            </button>
                        ) : (
                            <button
                                onClick={handleSave}
                                disabled={isSaving}
                                className="flex items-center gap-2 px-10 py-4 bg-emerald-600 text-white rounded-[1.5rem] text-xs font-black uppercase tracking-widest hover:bg-emerald-700 hover:shadow-xl hover:shadow-emerald-200 transition-all shadow-lg shadow-emerald-100 disabled:bg-gray-400"
                            >
                                {isSaving ? 'Salvando...' : <><Save size={16} /> Salvar Tudo</>}
                            </button>
                        )}
                    </div>
                </div>
            </div>

            <style>{`
                .animate-spin-slow {
                    animation: spin 8s linear infinite;
                }
                @keyframes spin {
                    from { transform: rotate(0deg); }
                    to { transform: rotate(360deg); }
                }
                .custom-scrollbar::-webkit-scrollbar {
                    width: 4px;
                }
                .custom-scrollbar::-webkit-scrollbar-track {
                    background: #f1f1f1;
                    border-radius: 10px;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb {
                    background: #cbd5e1;
                    border-radius: 10px;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                    background: #94a3b8;
                }
            `}</style>
        </div>
    );
};