'use client'; import { useState, useEffect, useRef } from 'react'; interface DashboardHeaderProps { activeTab: 'chats' | 'leads' | 'settings' | 'security'; onChangeTab: (tab: 'chats' | 'leads' | 'settings' | 'security') => void; showSettings?: boolean; onToggleSettings?: () => void; } const ICONS = { sun: ( ), moon: ( ), gear: ( ), disconnect: ( ) }; export function DashboardHeader({ showSettings, onToggleSettings, activeTab, onChangeTab }: DashboardHeaderProps) { const [phone, setPhone] = useState(null); const [connStatus, setConnStatus] = useState<'disconnected' | 'qr' | 'connecting' | 'connected'>('connecting'); const [loading, setLoading] = useState(false); const [confirmStep, setConfirmStep] = useState(false); const [globalModeLoading, setGlobalModeLoading] = useState(false); const [showGlobalMenu, setShowGlobalMenu] = useState(false); const globalMenuRef = useRef(null); const [theme, setTheme] = useState<'dark' | 'light'>('dark'); useEffect(() => { const savedTheme = localStorage.getItem('theme') as 'dark' | 'light' | null; if (savedTheme) { setTheme(savedTheme); if (savedTheme === 'light') { document.documentElement.classList.add('light'); document.documentElement.classList.remove('dark'); } else { document.documentElement.classList.add('dark'); document.documentElement.classList.remove('light'); } } }, []); const toggleTheme = () => { const newTheme = theme === 'dark' ? 'light' : 'dark'; setTheme(newTheme); localStorage.setItem('theme', newTheme); if (newTheme === 'light') { document.documentElement.classList.add('light'); document.documentElement.classList.remove('dark'); } else { document.documentElement.classList.add('dark'); document.documentElement.classList.remove('light'); } }; // Close global menu on outside click useEffect(() => { const handler = (e: MouseEvent) => { if (globalMenuRef.current && !globalMenuRef.current.contains(e.target as Node)) { setShowGlobalMenu(false); } }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); const handleGlobalMode = async (mode: 'AI' | 'HUMAN') => { setGlobalModeLoading(true); setShowGlobalMenu(false); try { await fetch('/api/mode/global', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ mode }), }); } catch (err) { console.error('Error cambiando modo global:', err); } finally { setGlobalModeLoading(false); } }; useEffect(() => { const fetchStatus = async () => { try { const res = await fetch('/api/connection/status'); const data = await res.json(); setConnStatus(data.status); if (data.phone) { setPhone(data.phone); } else { setPhone(null); } } catch (err) { console.error('Error fetching connection status:', err); } }; fetchStatus(); const interval = setInterval(fetchStatus, 5000); return () => clearInterval(interval); }, []); const handleDisconnect = async () => { if (!confirmStep) { setConfirmStep(true); setTimeout(() => setConfirmStep(false), 3000); return; } setLoading(true); try { const res = await fetch('/api/connection/disconnect', { method: 'POST' }); if (res.ok) { window.location.reload(); } } catch (err) { console.error('Error en desconexión:', err); } finally { setLoading(false); setConfirmStep(false); } }; return (
Reservame
Command Center
{connStatus === 'connected' && phone ? ( <>En línea · {phone} ) : connStatus === 'qr' ? ( ⚠ Escanea el QR ) : connStatus === 'connecting' ? ( Conectando… ) : ( Desconectado )}
{/* Global Mode Toggle Dropdown (adapted to Epic styles) */}
{showGlobalMenu && (

Cambiar TODAS a:

)}
); }