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

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

const ITEMS: Item[] = [
  { key: "home", label: "工作台", icon: "■" },
  { key: "studio", label: "编排", icon: "◆", group: "BUILD", ready: true },
  { key: "kb", label: "知识库", icon: "▣", group: "BUILD", ready: true },
  { key: "report", label: "报告", icon: "▤", group: "BUILD" },
  { key: "runs", label: "运行", icon: "▸", group: "RUN" },
  { key: "memory", label: "记忆", icon: "◇", group: "MANAGE", ready: true },
  { key: "market", label: "市场", icon: "⌧", group: "MANAGE" },
  { key: "admin", label: "管理", icon: "⚙", group: "MANAGE" },
];

// 左导航栏：模块切换，分组 BUILD / RUN / MANAGE；未就绪模块灰显（规划中）。
export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
  let lastGroup: string | undefined;
  return (
    <nav className="flex w-20 shrink-0 flex-col border-r bg-gray-50 py-2">
      {ITEMS.map((it) => {
        const header = it.group && it.group !== lastGroup ? it.group : null;
        lastGroup = it.group ?? lastGroup;
        return (
          <div key={it.key}>
            {header && (
              <div className="mt-2 px-2 text-[9px] font-semibold tracking-wider text-gray-300">
                {header}
              </div>
            )}
            <button
              onClick={() => onSelect(it.key)}
              className={`flex w-full flex-col items-center gap-0.5 py-2 text-[11px] ${
                active === it.key
                  ? "bg-violet-50 font-medium text-violet-700"
                  : "text-gray-500 hover:bg-gray-100"
              }`}
              title={it.ready === false ? `${it.label}（规划中）` : it.label}
            >
              <span className="text-base leading-none">{it.icon}</span>
              {it.label}
              {it.ready === false && <span className="text-[8px] text-gray-300">规划</span>}
            </button>
          </div>
        );
      })}
    </nav>
  );
}