"use client";

import { ChevronsUpDown } from "lucide-react";
import { Icon } from "./ui";
import { user } from "./account-data";

export type NavItem = { key: string; label: string; icon: string; subtitle?: string };
export type NavGroup = { title: string; items: NavItem[] };

// Full workspace navigation. The Account group items (profile/support/rules)
// render real views; the rest are workspace modules shown via a placeholder.
export const NAV_GROUPS: NavGroup[] = [
  {
    title: "Workspace",
    items: [
      { key: "dashboard", label: "Dashboard", icon: "dashboard", subtitle: "Welcome back — your territory at a glance" },
      { key: "owners", label: "Owners Box", icon: "owners" },
      { key: "projects", label: "Projects", icon: "projects" },
      { key: "leads", label: "Leads", icon: "leads" },
      { key: "verify", label: "Lead Verification", icon: "verify" },
      { key: "pipeline", label: "Pipeline", icon: "pipeline" },
    ],
  },
  {
    title: "Workspace",
    items: [
      { key: "dispatch", label: "LynkDispatch", icon: "dispatch" },
      { key: "storm", label: "Storm Intel", icon: "storm" },
      { key: "territory", label: "Territory Map", icon: "territory" },
      { key: "procanvas", label: "ProCanvas", icon: "procanvas" },
      { key: "estimates", label: "Estimates", icon: "estimates" },
    ],
  },
  {
    title: "Team",
    items: [
      { key: "team", label: "Team Management", icon: "team", subtitle: "Your crew, roles and permissions" },
      { key: "schedule", label: "Team Schedule", icon: "schedule" },
      { key: "leaderboard", label: "Leaderboard", icon: "leaderboard" },
      { key: "subtasks", label: "Subcontractor Tasks", icon: "subtasks" },
      { key: "people", label: "People", icon: "people" },
    ],
  },
  {
    title: "Workspace AI",
    items: [
      { key: "settings", label: "Org Settings", icon: "settings" },
      { key: "ai", label: "AI Assistant", icon: "ai", subtitle: "Lynk AI — your roofing copilot" },
    ],
  },
  {
    title: "Profile & Documents",
    items: [
      { key: "profile", label: "Profile", icon: "user", subtitle: "Your account, identity and preferences" },
      { key: "support", label: "Support Center", icon: "chat", subtitle: "Get help, track requests and find answers" },
      { key: "rules", label: "Rules Checklist", icon: "check-circle", subtitle: "The 13 rules behind Profile & Support" },
    ],
  },
];

export const NAV_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) => g.items);

export function Sidebar({ active, onSelect }: { active: string; onSelect: (k: string) => void }) {
  return (
    <aside className="dash-sidebar">
      <div className="dash-brand">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/image/logo.png" alt="LynkedUp Pro" />
      </div>

      <nav className="dash-nav">
        {NAV_GROUPS.map((g, gi) => (
          <div className="nav-section" key={gi}>
            <div className="nav-group">{g.title}</div>
            {g.items.map((it) => (
              <button key={it.key} className={`nav-item ${active === it.key ? "active" : ""}`} onClick={() => onSelect(it.key)}>
                <Icon name={it.icon} size={18} />
                <span className="nav-item-label">{it.label}</span>
              </button>
            ))}
          </div>
        ))}
      </nav>

      <div className="sb-foot">
        <button className="sb-user">
          <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{user.initials}</span>
          <div style={{ flex: 1, textAlign: "left" }}>
            <div className="nm">{user.name}</div>
            <div className="rl">{user.role}</div>
          </div>
          <ChevronsUpDown size={15} />
        </button>
      </div>
    </aside>
  );
}