"use client";

import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { getNavItems } from './nav-items';
import { useDataProvider } from '@/lib/demo/data-provider-context';

export function Sidebar() {
  const pathname = usePathname();
  const { basePath } = useDataProvider();
  const navItems = getNavItems(basePath);

  const mainNavItems = navItems.filter((item) => item.label !== 'Settings');
  const settingsItem = navItems.find((item) => item.label === 'Settings');

  return (
    <aside className="hidden md:flex md:flex-col md:fixed md:inset-y-0 md:left-0 md:z-30 w-16 lg:w-64 bg-card border-r border-border">
      {/* Logo */}
      <div className="flex items-center h-16 px-3 lg:px-5">
        <Link href={basePath} className="flex items-center gap-2.5 group">
          <Image
            src="/logo.png"
            alt="honeyDue"
            width={32}
            height={32}
            className="rounded-lg transition-transform group-hover:scale-105"
          />
          <span className="hidden lg:inline font-heading text-lg font-bold text-foreground tracking-tight">
            honeyDue
          </span>
        </Link>
      </div>

      <div className="mx-3 lg:mx-4 h-px bg-border" />

      {/* Main navigation */}
      <nav role="navigation" aria-label="Main navigation" className="flex-1 flex flex-col gap-0.5 p-2 lg:p-3 mt-2">
        {mainNavItems.map((item) => {
          const isActive =
            item.href === basePath
              ? pathname === basePath
              : pathname.startsWith(item.href);

          return (
            <Link
              key={item.href}
              href={item.href}
              aria-label={item.label}
              aria-current={isActive ? 'page' : undefined}
              className={cn(
                'group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200',
                isActive
                  ? 'bg-primary/10 text-primary shadow-sm'
                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
              )}
            >
              <item.icon
                className={cn(
                  'size-[18px] shrink-0 transition-colors',
                  isActive ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
                )}
                aria-hidden="true"
              />
              <span className="hidden lg:inline">{item.label}</span>
            </Link>
          );
        })}
      </nav>

      {/* Settings at bottom */}
      {settingsItem && (
        <div className="p-2 lg:p-3 border-t border-border">
          {(() => {
            const isActive = pathname.startsWith(settingsItem.href);
            return (
              <Link
                href={settingsItem.href}
                aria-label={settingsItem.label}
                aria-current={isActive ? 'page' : undefined}
                className={cn(
                  'group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200',
                  isActive
                    ? 'bg-primary/10 text-primary shadow-sm'
                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                )}
              >
                <settingsItem.icon
                  className={cn(
                    'size-[18px] shrink-0 transition-colors',
                    isActive ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
                  )}
                  aria-hidden="true"
                />
                <span className="hidden lg:inline">{settingsItem.label}</span>
              </Link>
            );
          })()}
        </div>
      )}
    </aside>
  );
}
