import React, { useState, useEffect, useRef } from 'react'; import { Play, LogOut, Shield, User, GraduationCap, DollarSign, Bell, ChevronDown, Check, HelpCircle } from 'lucide-react'; import { SubscriptionStatus } from '../types'; interface NavbarProps { user: { name: string; email: string; role: 'admin' | 'student'; subscriptionStatus: SubscriptionStatus; avatarUrl?: string; } | null; activeView: string; setView: (view: string) => void; onLogout: () => void; settings?: { brandName?: string } | null; } export default function Navbar({ user, activeView, setView, onLogout, settings }: NavbarProps) { const [showNotifications, setShowNotifications] = useState(false); const [showProfileMenu, setShowProfileMenu] = useState(false); const [notifications, setNotifications] = useState([]); const notifRef = useRef(null); const profileRef = useRef(null); useEffect(() => { // Close menus on outside click const handleClickOutside = (e: MouseEvent) => { if (notifRef.current && !notifRef.current.contains(e.target as Node)) { setShowNotifications(false); } if (profileRef.current && !profileRef.current.contains(e.target as Node)) { setShowProfileMenu(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); useEffect(() => { if (user) { fetchNotifications(); } }, [user]); const fetchNotifications = async () => { try { // In a real app we would pass the token or it would be in cookies // Assuming server uses some auth, for demo we might just fetch const token = localStorage.getItem('app_token') || localStorage.getItem('admin_token'); if (!token) return; const res = await fetch('/api/notifications', { headers: { 'Authorization': `Bearer ${token}` } }); if (res.ok) { const data = await res.json(); setNotifications(data); } } catch (err) { console.error(err); } }; const markAsRead = async (id: string) => { try { const token = localStorage.getItem('app_token') || localStorage.getItem('admin_token'); if (!token) return; await fetch(`/api/notifications/${id}/read`, { method: 'PUT', headers: { 'Authorization': `Bearer ${token}` } }); setNotifications(notifications.map(n => n.id === id ? { ...n, read: true } : n)); } catch (err) { console.error(err); } }; const unreadCount = notifications.filter(n => !n.read).length; if (!user) return null; const getStatusColor = (status: SubscriptionStatus) => { switch (status) { case 'ACTIVE': return 'bg-emerald-500 text-emerald-950'; case 'TRIAL': return 'bg-amber-500 text-amber-950'; case 'OVERDUE': return 'bg-red-500 text-white'; case 'CANCELED': return 'bg-zinc-600 text-zinc-200'; default: return 'bg-zinc-500 text-white'; } }; const getStatusLabel = (status: SubscriptionStatus) => { switch (status) { case 'ACTIVE': return 'Assinatura Ativa'; case 'TRIAL': return 'Período de Teste'; case 'OVERDUE': return 'Pagamento Pendente'; case 'CANCELED': return 'Assinatura Cancelada'; default: return status; } }; const navLinks = ( <> ); return ( ); }