scoreodonto.com/frontend/components/Sidebar.tsx

import React from 'react';
import {
  Users, Calendar as CalendarIcon, LayoutDashboard, Stethoscope,
  DollarSign, RefreshCw, Database, Activity, BookOpen, Award, Megaphone, LogOut, ClipboardList, Bell, Building2, User, BarChart3, Settings
} from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';

interface SidebarProps {
  activeTab: string;
  setActiveTab: (t: string) => void;
}

export const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
  const currentRole = HybridBackend.getCurrentRole();
  const userName = HybridBackend.getCurrentUserName();
  const userEmail = HybridBackend.getCurrentUser();
  const activeWorkspace = HybridBackend.getActiveWorkspace();
  const clinColor = activeWorkspace?.cor || '#2563eb';

  const menuItems = [
    { id: 'dashboard', label: 'VISÃO GERAL', icon: LayoutDashboard },
    { id: 'clinicas', label: 'MINHAS CLÍNICAS', icon: Building2 },
    { id: 'leads', label: 'GESTÃO DE LEADS', icon: Megaphone },
    { id: 'pacientes', label: 'PACIENTES', icon: Users },
    { id: 'tratamentos', label: 'MEUS TRATAMENTOS', icon: ClipboardList },
    { id: 'lancar-gto', label: 'LANÇAR GTO', icon: ClipboardList },
    { id: 'agenda', label: 'AGENDA', icon: CalendarIcon },
    { id: 'ortodontia', label: 'ORTODONTIA', icon: Activity },
    { id: 'financeiro', label: 'FINANCEIRO', icon: DollarSign },
    { id: 'relatorios', label: 'RELATÓRIOS', icon: BarChart3 },
    { id: 'dentistas', label: 'DENTISTAS', icon: Stethoscope },
    { id: 'especialidades', label: 'ESPECIALIDADES', icon: Award },
    { id: 'procedimentos', label: 'PROCEDIMENTOS', icon: ClipboardList },
    { id: 'planos', label: 'PLANOS / CONVÊNIOS', icon: BookOpen },
    { id: 'notificacoes', label: 'NOTIFICAÇÕES', icon: Bell },
    { id: 'sync', label: 'SINCRONIZAÇÃO', icon: RefreshCw },
    { id: 'configuracoes', label: 'CONFIGURAÇÕES', icon: Settings },
  ].filter(item => {
    if (['admin', 'donoclinica'].includes(currentRole)) return true;
    if (currentRole === 'paciente') return ['tratamentos', 'notificacoes', 'configuracoes'].includes(item.id);
    if (currentRole === 'dentista') return ['dashboard', 'pacientes', 'tratamentos', 'agenda', 'ortodontia', 'notificacoes', 'clinicas', 'configuracoes'].includes(item.id);
    if (currentRole === 'funcionario') return ['dashboard', 'leads', 'pacientes', 'tratamentos', 'lancar-gto', 'agenda', 'financeiro', 'relatorios', 'notificacoes', 'clinicas', 'configuracoes'].includes(item.id);
    return false;
  });

  const handleLogout = () => {
    if (window.confirm('TEM CERTEZA QUE DESEJA SAIR DO SISTEMA?')) {
      HybridBackend.logout();
    }
  };

  return (
    <div className="w-64 bg-white border-r border-gray-200 h-screen flex flex-col shadow-xl md:shadow-none">
      <div className="p-6 flex items-center gap-3">
        <div
          className="w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold shadow-lg transition-colors duration-500"
          style={{ backgroundColor: clinColor }}
        >
          <Database size={18} />
        </div>
        <div>
          <span className="font-bold text-lg text-gray-800 block leading-tight tracking-tight">SCOREODONTO</span>
          <span className="text-[10px] text-gray-400 font-bold uppercase tracking-wider">POSTGRESQL + GOOGLE</span>
        </div>
      </div>

      <nav className="flex-1 px-4 py-2 space-y-1 overflow-y-auto custom-scrollbar">
        {menuItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeTab === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setActiveTab(item.id)}
              className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-[11px] font-bold uppercase transition-all duration-300 group ${isActive
                ? 'text-white'
                : 'text-gray-500 hover:bg-gray-50'
                }`}
              style={{
                backgroundColor: isActive ? clinColor : 'transparent',
                boxShadow: isActive ? `0 10px 15px -5px ${clinColor}44` : 'none'
              }}
            >
              <Icon size={18} className={`${isActive ? 'text-white' : 'text-gray-400 group-hover:text-gray-600'} transition-colors`}
                style={{ color: isActive ? '#fff' : undefined }} />
              {item.label}
            </button>
          );
        })}
      </nav>

      <div className="p-4 border-t border-gray-100 bg-gray-50/50 space-y-2">
        <button
          onClick={() => setActiveTab('configuracoes')}
          className="w-full flex items-center gap-3 px-3 py-2 rounded-xl transition-all group"
          style={{
            backgroundColor: activeTab === 'configuracoes' ? clinColor : 'transparent',
          }}
        >
          <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 border border-gray-200 flex-shrink-0">
            <User size={15} />
          </div>
          <div className="min-w-0 flex-1 text-left">
            <p className={`text-[10px] font-black uppercase truncate leading-none ${activeTab === 'configuracoes' ? 'text-white' : 'text-gray-700'}`}>{userName}</p>
            <p className={`text-[9px] font-medium truncate mt-0.5 ${activeTab === 'configuracoes' ? 'text-white/70' : 'text-gray-400'}`}>{userEmail}</p>
          </div>
          <Settings size={14} className={activeTab === 'configuracoes' ? 'text-white' : 'text-gray-400'} />
        </button>

        <button
          onClick={handleLogout}
          className="w-full flex items-center gap-3 px-4 py-2 text-red-500 hover:bg-red-50 rounded-xl text-[10px] font-black uppercase transition-all"
        >
          <LogOut size={16} />
          SAIR DO SISTEMA
        </button>
      </div>
    </div>
  );
};