'use client';

import Link from 'next/link';
import { FileText, Heart, Home, LockKeyhole, LogOut, ShieldCheck, UserRound } from 'lucide-react';
import { FamilySidebarPanel } from '@/components/family/family-sidebar-panel';
import { BrandLogo } from '@/components/id/brand-logo';
import { cn } from '@/lib/utils';
import { getAdminLandingPath } from '@/lib/admin-access';
import { useAuth } from './auth-provider';

const baseItems = [
  { href: '/', label: 'Главная', icon: Home },
  { href: '/data', label: 'Данные', icon: UserRound },
  { href: '/documents', label: 'Документы', icon: FileText },
  { href: '/family', label: 'Семья', icon: Heart },
  { href: '/security', label: 'Безопасность', icon: LockKeyhole }
];

export function Sidebar({ active }: { active: string }) {
  const { logout, user } = useAuth();
  const items = user?.canAccessAdmin
    ? [...baseItems, { href: getAdminLandingPath(user), label: 'Админка', icon: ShieldCheck }]
    : baseItems;

  return (
    <aside className="fixed left-0 top-0 hidden h-screen w-[200px] flex-col justify-between border-r border-[#eceef4] bg-white px-3 py-7 text-[13px] lg:flex">
      <div className="flex min-h-0 flex-1 flex-col">
        <Link href="/" className="mb-7 block">
          <BrandLogo size="lg" variant="dark" />
        </Link>
        <nav className="space-y-1.5">
          {items.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex items-center gap-2 rounded-xl px-3 py-2 text-[#1f2430] hover:bg-[#f4f5f8]',
                (active === item.href || (item.href.startsWith('/admin') && active.startsWith('/admin'))) && 'bg-[#f4f5f8]'
              )}
            >
              <item.icon className="h-4 w-4" />
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="min-h-0 flex-1 overflow-hidden">
          <FamilySidebarPanel />
        </div>
      </div>
    </aside>
  );
}