"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ChevronsUpDown, LogOut } from "lucide-react";
import { useAuth } from "@abe-kap/appshell-sdk/react";
import { Icon } from "./ui";
import { user } from "./account-data";
import { useMyAccess } from "@/lib/access";

function initialsOf(name: string): string {
  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
}

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: "Communication",
    items: [
      { key: "messenger", label: "Messenger", icon: "send", subtitle: "Chat with your team and clients" },
      { key: "inbox", label: "Inbox", icon: "bell", subtitle: "Mentions, messages, alerts and mail — all in one" },
    ],
  },
  {
    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);

// Nav visibility by CRM permission. Dashboard + Profile are always visible (even to a
// brand-new user with no membership); every other item requires membership, and the
// items mapped here additionally require the given permission. Unmapped items are
// shown to any member. This is UX only — be-crm still enforces every action.
const ALWAYS_VISIBLE = new Set(["dashboard", "profile", "messenger", "inbox"]);
const NAV_PERMISSION: Record<string, string | undefined> = {
  team: "team.manage",
  people: "team.manage",
  leads: "leads.manage",
  verify: "leads.manage",
  pipeline: "pipeline.manage",
  estimates: "estimates.create",
  procanvas: "estimates.create",
  dispatch: "dispatch.manage",
  schedule: "dispatch.manage",
  storm: "dispatch.manage",
  territory: "dispatch.manage",
  leaderboard: "reports.view",
  settings: "settings.manage",
};

export function Sidebar({ active, onSelect }: { active: string; onSelect: (k: string) => void }) {
  const router = useRouter();
  const { user: me, logout, context } = useAuth();
  const access = useMyAccess();
  const [menuOpen, setMenuOpen] = useState(false);

  // A new user with no membership sees only Dashboard + Profile. Members see the areas
  // their permissions allow. While access is still loading, keep it minimal to avoid
  // flashing items the user can't actually use.
  const canSee = (key: string): boolean => {
    if (ALWAYS_VISIBLE.has(key)) return true;
    if (access.loading || !access.isMember) return false;
    const perm = NAV_PERMISSION[key];
    return perm ? access.can(perm) : true;
  };
  const visibleGroups = NAV_GROUPS
    .map((g) => ({ ...g, items: g.items.filter((it) => canSee(it.key)) }))
    .filter((g) => g.items.length > 0);
  // Real signed-in identity from the App Context Envelope; fall back to the static
  // demo user only when the Shell isn't wired.
  const roleLabel = context?.scope?.role ? context.scope.role.charAt(0).toUpperCase() + context.scope.role.slice(1) : "";
  const name = me?.displayName || user.name;
  const initials = me ? initialsOf(me.displayName) : user.initials;
  const secondary = me?.email || roleLabel || user.role;

  async function signOut() {
    setMenuOpen(false);
    try { await logout(); } catch { /* ignore — proceed to portal either way */ }
    router.replace("/portal/login");
  }

  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">
        {visibleGroups.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" style={{ position: "relative" }}>
        {menuOpen && (
          <>
            <div className="tm-menu-scrim" onClick={() => setMenuOpen(false)} />
            <div className="sb-user-menu" role="menu">
              <button className="danger" onClick={signOut}><LogOut size={15} /> Sign out</button>
            </div>
          </>
        )}
        <button className="sb-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
          <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
          <div style={{ flex: 1, textAlign: "left", minWidth: 0 }}>
            <div className="nm">{name}</div>
            <div className="rl" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{secondary}</div>
          </div>
          <ChevronsUpDown size={15} />
        </button>
      </div>
    </aside>
  );
}