import {
  LayoutDashboard, Users, Calendar, ClipboardList, LogOut, Settings, User,
} from 'lucide-react';
import { useLocation, useNavigate } from 'react-router-dom';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarMenuButton,
} from '../components/ui/sidebar';
import { useAuthStore } from '../store/useAuthStore';
import { usePractitionerStore } from './store/usePractitionerStore';

const navItems = [
  { icon: LayoutDashboard, label: 'Dashboard',    path: '/' },
  { icon: Users,           label: 'My Patients',  path: '/patients' },
  { icon: Calendar,        label: 'Schedule',      path: '/schedule' },
  { icon: ClipboardList,   label: 'Appointments',  path: '/appointments' },
];

export function PractitionerSidebar() {
  const location = useLocation();
  const navigate = useNavigate();
  const user = useAuthStore((s) => s.user);
  const logout = useAuthStore((s) => s.logout);
  const enterPatientView = usePractitionerStore((s) => s.enterPatientView);

  const switchToMyPatientView = () => {
    if (!user?._id) return;
    enterPatientView(user._id);
    navigate('/');
  };

  return (
    <Sidebar collapsible="none">
      <SidebarHeader className="justify-center px-4 pb-5 pt-6">
        <div className="flex min-w-0 flex-col items-center gap-2 text-center">
          <img
            src="/images/logo.png"
            alt="Hipograf"
            className="h-12 w-12 shrink-0 object-contain"
          />
          <div className="min-w-0 leading-tight">
            <span className="block truncate font-display text-[18px] font-semibold tracking-tight text-gray-900">
              Hipograf
            </span>
          </div>
        </div>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          {navItems.map((item) => {
            const isActive =
              item.path === '/'
                ? location.pathname === '/'
                : location.pathname.startsWith(item.path);
            return (
              <SidebarMenuButton
                key={item.path}
                icon={<item.icon className="w-[18px] h-[18px]" />}
                label={item.label}
                href={item.path}
                active={isActive}
              />
            );
          })}
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenuButton
          icon={<User className="w-[18px] h-[18px]" />}
          label="My Patient View"
          href="#"
          onClick={switchToMyPatientView}
          className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
        />
        <SidebarMenuButton
          icon={<Settings className="w-[18px] h-[18px]" />}
          label="Settings"
          href="/settings"
          active={location.pathname === '/settings'}
        />
        <SidebarMenuButton
          icon={<LogOut className="w-[18px] h-[18px]" />}
          label="Logout"
          href="#"
          onClick={logout}
          className="text-gray-400 hover:text-red-500 hover:bg-red-50"
        />
      </SidebarFooter>
    </Sidebar>
  );
}
