"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { House, Search, Settings, Sparkles, FolderKanban, ShieldCheck } from "lucide-react";
import { PRODUCT_NAME } from "@/lib/product-config";

const navItems = [
  { href: "/dashboard", label: "Dashboard", icon: House },
  { href: "/workspaces", label: "Workspaces", icon: FolderKanban },
  { href: "/reviews", label: "Reviews", icon: ShieldCheck },
  { href: "/search", label: "Search", icon: Search },
  { href: "/settings", label: "Settings", icon: Settings },
];

export function Sidebar() {
  const pathname = usePathname() ?? "";

  return (
    <aside className="sidebar" style={{ padding: "var(--ml-space-6)" }} aria-label="Primary">
      <div style={{ display: "grid", gap: "var(--ml-space-6)" }}>
        <div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
          <div className="badge" style={{ width: "fit-content" }}>
            <Sparkles size={14} />
            Web Agent workstream
          </div>
          <div>
            <div style={{ fontSize: "var(--ml-fs-xl)", fontFamily: "var(--ml-font-display)", fontWeight: 700 }}>{PRODUCT_NAME}</div>
            <div style={{ color: "var(--ml-text-secondary)", marginTop: 6 }}>
              Human-first notes UX with agent-safe structure and review surfaces.
            </div>
          </div>
        </div>

        <nav aria-label="Primary navigation" style={{ display: "grid", gap: "var(--ml-space-2)" }}>
          {navItems.map((item) => {
            const Icon = item.icon;
            const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
            return (
              <Link
                key={item.href}
                href={item.href}
                className="surface-muted nav-link"
                aria-current={active ? "page" : undefined}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "var(--ml-space-3)",
                  padding: "12px 14px",
                  borderColor: active ? "var(--ml-accent-primary)" : undefined,
                  background: active ? "rgba(90, 140, 255, 0.16)" : undefined,
                }}
              >
                <Icon size={18} />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>

        <div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-2)" }}>
          <strong>Keyboard flow</strong>
          <span style={{ color: "var(--ml-text-secondary)" }}>Use Tab to move between navigation, filters, and dense result surfaces.</span>
          <span style={{ color: "var(--ml-text-secondary)" }}>Use the skip link to jump directly into page content.</span>
        </div>
      </div>
    </aside>
  );
}