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();

    const fetchGoogleStatus = async () => {
        try {
            const response = await fetch('http://localhost:3005/api/auth/google/status');
            const data = await response.json();
            setConnectedAccounts(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 = `http://localhost:3005/api/auth/google/url?dentistId=${dentistId}`;
        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 = 3;

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

                {/* 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-blue-600 rounded-2xl shadow-lg shadow-blue-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-blue-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-blue-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-blue-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 2: Google Setup Tutorial & Central Config */}
                        <div className="w-full shrink-0 p-10 animate-in fade-in duration-700 overflow-y-auto custom-scrollbar">
                            <div className="flex justify-between items-center mb-6">
                                <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">Configuração Google Agenda</h3>
                                </div>
                                <a href="https://console.cloud.google.com/apis/library/calendar-json.googleapis.com" target="_blank" rel="noreferrer" className="text-[9px] font-black text-white bg-black px-3 py-1.5 rounded-lg hover:opacity-80 transition-all uppercase tracking-widest">
                                    1. Ativar API
                                </a>
                            </div>

                            <div className="grid grid-cols-2 gap-6 mb-8">
                                <div className="space-y-4">
                                    <div className="bg-emerald-50 rounded-2xl p-4 border border-emerald-100">
                                        <div className="flex items-center gap-2 mb-2">
                                            <div className="w-5 h-5 bg-emerald-600 text-white text-[10px] font-black flex items-center justify-center rounded-full">1</div>
                                            <span className="text-[10px] font-black text-emerald-800 uppercase">Google API Key</span>
                                        </div>
                                        <input
                                            type="password"
                                            placeholder="COLE A CHAVE AQUI"
                                            className="w-full bg-white border border-emerald-200 rounded-xl px-4 py-2 text-xs font-bold text-gray-700 outline-none focus:ring-2 focus:ring-emerald-100"
                                            value={config.googleApiKey}
                                            onChange={(e) => setConfig({ ...config, googleApiKey: e.target.value })}
                                        />
                                        <a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noreferrer" className="text-[8px] font-black text-emerald-600 hover:underline mt-2 inline-block uppercase">Criar Credenciais ➔</a>
                                    </div>
                                </div>
                                <div className="space-y-4">
                                    <div className="bg-blue-50 rounded-2xl p-4 border border-blue-100">
                                        <div className="flex items-center gap-2 mb-2">
                                            <div className="w-5 h-5 bg-blue-600 text-white text-[10px] font-black flex items-center justify-center rounded-full">2</div>
                                            <span className="text-[10px] font-black text-blue-800 uppercase">ID Agenda Clínica</span>
                                        </div>
                                        <input
                                            type="text"
                                            placeholder="ID DA AGENDA"
                                            className="w-full bg-white border border-blue-200 rounded-xl px-4 py-2 text-xs font-bold text-gray-700 outline-none focus:ring-2 focus:ring-blue-100"
                                            value={config.clinicCalendarId}
                                            onChange={(e) => setConfig({ ...config, clinicCalendarId: e.target.value })}
                                        />
                                        <a href="https://calendar.google.com/calendar/r/settings" target="_blank" rel="noreferrer" className="text-[8px] font-black text-blue-600 hover:underline mt-2 inline-block uppercase">Pegar ID nas Configs ➔</a>
                                    </div>
                                </div>
                            </div>

                            <div className="bg-gray-900 rounded-3xl p-6 text-white">
                                <h4 className="text-[10px] font-black text-blue-400 uppercase tracking-[0.2em] mb-4">Guia de Integração</h4>
                                <ul className="space-y-3">
                                    <li className="flex gap-3 text-xs">
                                        <CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
                                        <span className="text-gray-300">Crie um projeto no <strong>Google Cloud Console</strong>.</span>
                                    </li>
                                    <li className="flex gap-3 text-xs">
                                        <CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
                                        <span className="text-gray-300">No menu 'Biblioteca', ative a <strong>Google Calendar API</strong>.</span>
                                    </li>
                                    <li className="flex gap-3 text-xs">
                                        <CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
                                        <div className="flex flex-col gap-1">
                                            <span className="text-gray-300">Pegue o <strong>ID da Agenda</strong> nas configurações (Integrar agenda).</span>
                                            <a href="https://calendar.google.com/calendar/r/settings" target="_blank" rel="noreferrer" className="text-[9px] font-black text-blue-400 hover:underline flex items-center gap-1 uppercase">
                                                Abrir Configurações de Agenda ➔
                                            </a>
                                        </div>
                                    </li>
                                    <li className="flex gap-3 text-xs">
                                        <CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
                                        <span className="text-gray-300">No Google Agenda, torne a agenda <strong>Pública</strong> nas autorizações de acesso.</span>
                                    </li>
                                </ul>
                            </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 max-h-[250px] overflow-y-auto pr-4 custom-scrollbar">
                                <div className="bg-blue-50/50 p-4 rounded-2xl border border-blue-100 mb-2">
                                    <p className="text-[10px] text-blue-800 font-bold mb-1 uppercase tracking-wider">Nova Integração Inteligente (OAuth2)</p>
                                    <p className="text-[10px] text-blue-600 italic">Agora você pode conectar agendas sem precisar torná-las públicas ou usar API Keys.</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="admin"
                                        isConnected={connectedAccounts.some(a => a.owner_id === 'admin' || a.owner_id.includes('@'))}
                                        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}
                                                            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>

                                                {/* Legacy ID support remains for backward compatibility */}
                                                <div className="mt-3 pt-3 border-t border-gray-200/50">
                                                    <label className="text-[9px] font-bold text-gray-400 uppercase ml-1">ID Alternativo (API Key/Legado)</label>
                                                    <input
                                                        type="text"
                                                        placeholder="ID DA AGENDA GOOGLE (SE NÃO USAR OAUTH2)"
                                                        className="w-full bg-white/50 border border-gray-200 rounded-xl px-4 py-2 text-[10px] font-bold text-gray-500 outline-none focus:ring-1 focus:ring-blue-100 mt-1"
                                                        value={config.googleCalendarIds?.[dentist.id] || ''}
                                                        onChange={(e) => setConfig({
                                                            ...config,
                                                            googleCalendarIds: {
                                                                ...config.googleCalendarIds,
                                                                [dentist.id]: e.target.value
                                                            }
                                                        })}
                                                    />
                                                </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-blue-600 text-white rounded-[1.5rem] text-xs font-black uppercase tracking-widest hover:bg-blue-700 hover:shadow-xl hover:shadow-blue-200 transition-all shadow-lg shadow-blue-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>
    );
};