import { ChevronLeft, ChevronRight } from 'lucide-react';

import type { SidebarPage } from '@/business/app-shell/types';
import { SidebarBrand } from '@/components/sidebar/SidebarBrand';
import { SidebarCampusRolePanel } from '@/components/sidebar/SidebarCampusRolePanel';
import { SidebarNavigation } from '@/components/sidebar/SidebarNavigation';
import { Button } from '@/components/ui/button';

interface SidebarViewProps {
  readonly page: SidebarPage;
}

export function SidebarView({ page }: SidebarViewProps) {
  return (
    <aside className={`${page.collapsed ? 'w-16' : 'w-64'} bg-gradient-to-b from-slate-900 via-slate-900 to-slate-800 h-full flex flex-col transition-all duration-300 shadow-2xl shadow-black/20 relative`}>
      <SidebarBrand collapsed={page.collapsed} />

      <Button
        type="button"
        variant="ghost"
        size="icon"
        onClick={page.toggleCollapsed}
        aria-label={page.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
        className="absolute top-4 -right-3 w-6 h-6 bg-gradient-to-r from-violet-500 to-violet-600 text-white rounded-full flex items-center justify-center shadow-lg shadow-violet-500/40 hover:shadow-violet-500/60 transition-all z-10"
      >
        {page.collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
      </Button>

      <SidebarNavigation
        modules={page.modules}
        currentModule={page.currentModule}
        collapsed={page.collapsed}
        onSelectModule={page.setCurrentModule}
      />

      <SidebarCampusRolePanel
        collapsed={page.collapsed}
        campusInfo={page.campusInfo}
        campusInitial={page.campusInitial}
        roleLabel={page.roleLabel}
      />
    </aside>
  );
}
