'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Icon } from '@/components/marketing/icons';
import { PanelBrand } from '@/components/panel/panel-brand';
import { desktopSidebar, isNavActive } from '@/components/panel/nav-config';
import { cn } from '@/lib/utils';
import type { SubscriptionSummary } from '@/components/panel/broker-shell';

type SidebarProps = {
  businessName: string;
  businessSlug: string;
  businessLogoUrl?: string | null;
  collapsed?: boolean;
  onToggle?: () => void;
  subscriptionSummary?: SubscriptionSummary;
};

export function PanelSidebar({
  businessName,
  businessSlug,
  businessLogoUrl = null,
  collapsed = false,
  onToggle,
  subscriptionSummary = null,
}: SidebarProps) {
  const pathname = usePathname();
  return (
    <aside
      className={cn(
        'panel-sidebar sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-white/10 text-white transition-[width] duration-300 ease-out lg:flex',
        collapsed ? 'w-[var(--panel-sidebar-collapsed)]' : 'w-[var(--panel-sidebar-w)]',
      )}
      aria-label="Business navigation"
    >
      <div className="panel-sidebar-sheen" aria-hidden />

      <div className={cn('relative z-10 flex h-[var(--panel-header-h)] items-center border-b border-white/10 px-3', collapsed ? 'justify-center' : 'justify-between gap-2')}>
        <PanelBrand compact={collapsed} inverted />
        {onToggle && (
          <button
            type="button"
            onClick={onToggle}
            className="hidden size-9 items-center justify-center rounded-lg text-white/70 transition-colors hover:bg-white/10 hover:text-white xl:inline-flex"
            aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          >
            <Icon name={collapsed ? 'chevron' : 'menu'} size={18} className={collapsed ? 'rotate-180' : undefined} />
          </button>
        )}
      </div>

      {!collapsed && (
        <div className="relative z-10 mx-3 mt-3 rounded-2xl border border-white/12 bg-white/8 p-3 shadow-[inset_0_1px_0_rgb(255_255_255/0.08)] backdrop-blur-sm">
          <div className="flex items-center gap-3">
            <span className="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-[#0b3d34] ring-1 ring-[#22d79a]/35">
              {businessLogoUrl
                ? <img src={businessLogoUrl} alt="" className="size-full object-cover" />
                : <Icon name="store" size={18} className="text-[#7dffc4]" />}
            </span>
            <div className="min-w-0">
              <p className="truncate text-sm font-semibold">{businessName}</p>
              <p className="mt-0.5 truncate text-xs text-white/55">/{businessSlug}</p>
            </div>
          </div>
          {subscriptionSummary && (
            <p className="mt-2 truncate rounded-lg bg-[#08764d]/45 px-2 py-1 text-[11px] font-medium text-[#d9ffe9] ring-1 ring-[#22d79a]/25">
              {subscriptionSummary.planName} · {subscriptionSummary.statusLabel}
            </p>
          )}
        </div>
      )}

      {collapsed && businessLogoUrl && (
        <div className="relative z-10 mx-auto mt-3 size-10 overflow-hidden rounded-xl ring-1 ring-[#22d79a]/30">
          <img src={businessLogoUrl} alt="" className="size-full object-cover" />
        </div>
      )}

      <nav className="panel-sidebar-scroll relative z-10 flex-1 overflow-y-auto px-2 py-4" aria-label="Sidebar">
        {desktopSidebar.map((section, index) => (
          <div key={section.title ?? `section-${index}`} className={cn(index > 0 && 'mt-5')}>
            {section.title && !collapsed && (
              <p className="mb-2 px-3 text-[10px] font-bold uppercase tracking-[0.16em] text-[#8fd9b8]/70">{section.title}</p>
            )}
            <ul className="space-y-1">
              {section.items.map(item => {
                const active = isNavActive(pathname, item);
                return (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      title={collapsed ? item.label : undefined}
                      className={cn(
                        'group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-[background-color,color,transform,box-shadow] duration-200',
                        collapsed && 'justify-center px-0',
                        active
                          ? 'bg-[linear-gradient(135deg,#0ea56a_0%,#08764d_100%)] text-white shadow-[0_10px_24px_rgb(8_118_77/0.35)]'
                          : 'text-white/72 hover:bg-white/8 hover:text-white',
                      )}
                      aria-current={active ? 'page' : undefined}
                    >
                      {active && (
                        <span className="absolute left-0 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r-full bg-[#b8ffd9]" aria-hidden />
                      )}
                      <Icon name={item.icon} size={20} className={cn(!active && 'opacity-80 group-hover:opacity-100')} />
                      {!collapsed && <span className="truncate">{item.label}</span>}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </nav>

      {!collapsed && (
        <div className="relative z-10 border-t border-white/10 p-3">
          <Link
            href="/dashboard/storefront/settings"
            className="flex items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-medium text-white/70 transition-colors hover:bg-white/8 hover:text-white"
          >
            <Icon name="image" size={18} />
            Upload logo
          </Link>
        </div>
      )}
    </aside>
  );
}