Sidebar Adaptive

"use client";

import type { ReactNode } from "react";
import { BarChart3, CalendarDays, Home, Plus, Sparkles, Video, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarAdaptiveItem {
  label: string;
  href: string;
  icon: LucideIcon;
}

export interface SidebarAdaptiveProps {
  brand?: string;
  items?: SidebarAdaptiveItem[];
  activeHref?: string;
  /** Primary action (big “+” on mobile, full button on desktop). */
  action?: { label: string; href: string };
  usage?: { used: number; total: number; label: string };
  children?: ReactNode;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

const DEFAULT_ITEMS: SidebarAdaptiveItem[] = [
  { label: "Home", href: "#home", icon: Home },
  { label: "Meetings", href: "#meetings", icon: Video },
  { label: "Calendar", href: "#calendar", icon: CalendarDays },
  { label: "Insights", href: "#insights", icon: BarChart3 },
];

/** Adaptive navigation: a full glass sidebar with labels, action button and usage meter on desktop; a bottom tab bar with a raised center “+” on mobile. */
export function SidebarAdaptive({
  brand = "Halo",
  items = DEFAULT_ITEMS,
  activeHref = "#home",
  action = { label: "Record a video", href: "#record" },
  usage = { used: 42, total: 50, label: "recaps this month" },
  children,
  className,
}: SidebarAdaptiveProps) {
  const half = Math.ceil(items.length / 2);
  const tab = (it: SidebarAdaptiveItem) => {
    const active = it.href === activeHref;
    return (
      <a
        key={it.href}
        href={it.href}
        aria-current={active ? "page" : undefined}
        className={cn(
          "da-focus flex flex-1 flex-col items-center gap-1 rounded-da-md py-1.5 text-[11px] font-medium",
          active ? "text-da-primary" : "text-da-muted-fg",
        )}
      >
        <it.icon aria-hidden className="size-5" />
        {it.label}
      </a>
    );
  };

  return (
    <div className={cn("min-h-dvh text-da-fg lg:flex", className)}>
      <aside className="hidden p-4 lg:block">
        <div className={cn("sticky top-4 flex h-[calc(100dvh-2rem)] w-64 flex-col rounded-da-lg p-4 shadow-da-lg", GLASS)}>
          <p className="flex items-center gap-2 px-2 font-da-display text-lg font-semibold">
            <span aria-hidden className="size-7 rounded-full bg-gradient-to-br from-da-primary to-da-accent" />
            {brand}
          </p>
          <a
            href={action.href}
            className="da-focus da-transition mt-6 flex h-11 items-center justify-center gap-2 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5"
          >
            <Plus aria-hidden className="size-4" /> {action.label}
          </a>
          <nav aria-label="Main" className="mt-6 flex-1 space-y-1">
            {items.map((it) => {
              const active = it.href === activeHref;
              return (
                <a
                  key={it.href}
                  href={it.href}
                  aria-current={active ? "page" : undefined}
                  className={cn(
                    "da-focus da-transition flex h-11 items-center gap-3 rounded-da-md px-3 text-[15px] font-medium",
                    active ? "bg-da-surface text-da-fg shadow-da-sm" : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
                  )}
                >
                  <it.icon aria-hidden className={cn("size-5", active && "text-da-primary")} />
                  {it.label}
                </a>
              );
            })}
          </nav>
          <div className="rounded-da-md bg-da-surface-2 p-4">
            <p className="flex items-center gap-1.5 text-xs font-semibold">
              <Sparkles aria-hidden className="size-3.5 text-da-primary" /> {usage.used} / {usage.total} {usage.label}
            </p>
            <div
              className="mt-2 h-2 overflow-hidden rounded-full bg-da-muted"
              role="progressbar"
              aria-valuenow={usage.used}
              aria-valuemax={usage.total}
              aria-label={usage.label}
            >
              <div className="h-full rounded-full bg-gradient-to-r from-da-primary to-da-accent" style={{ width: `${(usage.used / usage.total) * 100}%` }} />
            </div>
            <a href="#upgrade" className="da-focus mt-3 inline-block rounded-da-sm text-xs font-semibold text-da-primary hover:underline">
              Upgrade for unlimited
            </a>
          </div>
        </div>
      </aside>
      <main className="min-w-0 flex-1 pb-28 lg:pb-0">{children}</main>
      <nav aria-label="Main" className={cn("fixed inset-x-3 bottom-3 z-30 flex items-center rounded-da-lg px-2 py-1.5 shadow-da-lg lg:hidden", GLASS)}>
        {items.slice(0, half).map(tab)}
        <a
          href={action.href}
          aria-label={action.label}
          className="da-focus -mt-8 grid size-14 shrink-0 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg shadow-da-lg ring-4 ring-da-bg"
        >
          <Plus aria-hidden className="size-6" />
        </a>
        {items.slice(half).map(tab)}
      </nav>
    </div>
  );
}

export default SidebarAdaptive;