import {
  LayoutDashboard,
  Workflow,
  Database,
  FileText,
  Activity,
  Bookmark,
  Boxes,
  Settings,
  type LucideIcon,
} from "lucide-react";
import { cn } from "../ui";

export type ViewKey = "home" | "studio" | "kb" | "report" | "runs" | "memory" | "market" | "admin";

interface Item {
  key: ViewKey;
  label: string;
  icon: LucideIcon;
  group?: string;
  ready?: boolean;
}

const ITEMS: Item[] = [
  { key: "home", label: "工作台", icon: LayoutDashboard, ready: true },
  { key: "studio", label: "编排", icon: Workflow, group: "BUILD", ready: true },
  { key: "kb", label: "知识库", icon: Database, group: "BUILD", ready: true },
  { key: "report", label: "报告", icon: FileText, group: "BUILD", ready: true },
  { key: "runs", label: "运行", icon: Activity, group: "RUN", ready: true },
  { key: "memory", label: "记忆", icon: Bookmark, group: "MANAGE", ready: true },
  { key: "market", label: "市场", icon: Boxes, group: "MANAGE" },
  { key: "admin", label: "管理", icon: Settings, group: "MANAGE" },
];

// 左导航：深色，激活态紫色高亮 + 左侧光条，描线图标。
export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
  let lastGroup: string | undefined;
  return (
    <nav className="flex w-[68px] shrink-0 flex-col gap-0.5 border-r border-line bg-ink-900 py-2">
      {ITEMS.map((it) => {
        const header = it.group && it.group !== lastGroup ? it.group : null;
        lastGroup = it.group ?? lastGroup;
        const isActive = active === it.key;
        const Icon = it.icon;
        return (
          <div key={it.key}>
            {header && <div className="mt-3 px-2 text-[9px] font-semibold tracking-widest text-slate-600">{header}</div>}
            <button
              onClick={() => onSelect(it.key)}
              className={cn(
                "relative flex w-full flex-col items-center gap-1 py-2.5 text-[11px] transition",
                isActive ? "text-brand-400" : "text-slate-500 hover:bg-ink-800 hover:text-slate-300",
              )}
              title={it.ready === false ? `${it.label}（规划中）` : it.label}
            >
              {isActive && (
                <span className="absolute left-0 top-1/2 h-6 w-0.5 -translate-y-1/2 rounded-r bg-gradient-to-b from-brand-400 to-accent-400" />
              )}
              <Icon
                className={cn("h-[18px] w-[18px]", isActive && "drop-shadow-[0_0_6px_rgba(139,92,246,0.6)]")}
                strokeWidth={isActive ? 2.2 : 1.8}
              />
              {it.label}
              {it.ready === false && <span className="text-[8px] text-slate-600">规划</span>}
            </button>
          </div>
        );
      })}
    </nav>
  );
}