import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { LayoutDashboard, Users, Pill, Settings, HeartPulse, Box, Clock, ClipboardList, Activity, Truck, LogOut } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { logoutPharmacist } from '../services/api';

const Sidebar: React.FC = () => {
  const { logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = async () => {
    try {
      await logoutPharmacist();
    } catch (error) {
      console.error('Failed to call logout API, proceeding to clear local state', error);
    } finally {
      logout();
      navigate('/login');
    }
  };

  return (
    <aside className="sidebar">
      <div className="sidebar-logo">
        <HeartPulse size={28} color="#a5b4fc" />
        <span>PharmaAI</span>
      </div>
      
      <nav className="sidebar-nav">
        <NavLink 
          to="/" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <LayoutDashboard className="nav-item-icon" />
          <span>Dashboard</span>
        </NavLink>
        
        <NavLink 
          to="/pharmacy" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <Pill className="nav-item-icon" />
          <span>Pharmacy</span>
        </NavLink>
        
        <NavLink 
          to="/prescriptions" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <ClipboardList className="nav-item-icon" />
          <span>Prescriptions</span>
        </NavLink>

        <NavLink 
          to="/patients" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <Users className="nav-item-icon" />
          <span>Patients</span>
        </NavLink>

        <NavLink 
          to="/registers" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <ClipboardList className="nav-item-icon" />
          <span>Registers</span>
        </NavLink>
        
        <NavLink 
          to="/history" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <Clock className="nav-item-icon" />
          <span>History</span>
        </NavLink>

        <NavLink 
          to="/stock-movements" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <Activity className="nav-item-icon" />
          <span>Stock Movements</span>
        </NavLink>

        <NavLink 
          to="/inventory" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <Box className="nav-item-icon" />
          <span>Inventory</span>
        </NavLink>

        <NavLink 
          to="/suppliers" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <Truck className="nav-item-icon" />
          <span>Suppliers</span>
        </NavLink>
        
        <NavLink 
          to="/settings" 
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <Settings className="nav-item-icon" />
          <span>Settings</span>
        </NavLink>
      </nav>
      
      <div className="sidebar-footer" style={{ marginTop: 'auto' }}>
        <button 
          onClick={handleLogout} 
          className="nav-item" 
          style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', color: 'inherit', padding: '0.75rem 1rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}
        >
          <LogOut className="nav-item-icon" />
          <span style={{ fontSize: '1rem' }}>Logout</span>
        </button>
      </div>
    </aside>
  );
};

export default Sidebar;