/**
 * @file SettingsHub.tsx
 * @description Tabbed shell for /settings that hosts the dashboard's own settings plus one configuration panel per AI tool (Claude Code and Codex) plus the AI Router profiles they can be pointed at and the git logins dashboard fetch/pull/push use, with the active tab kept in the `?tool=` query param. A tool's tab is hidden while that tool is disabled in Settings → AI Tools.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
import type { ComponentType } from "react";
import { useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Boxes, KeyRound, Router, Settings as SettingsIcon, SquareTerminal } from "lucide-react";
import { PageTabs } from "../components/PageTabs";
import { Settings } from "./Settings";
import { CcConfig } from "./CcConfig";
import { CodexConfig } from "./CodexConfig";
import { AiRouterConfig } from "./AiRouterConfig";
import { GitCredentialsConfig } from "./GitCredentialsConfig";
import { useAiTools } from "../hooks/useAiTools";

interface ToolTab {
  id: string;
  labelKey: string;
  Icon: ComponentType<{ className?: string }>;
  Panel: ComponentType;
  /** The AI Tools catalog id this tab configures; hidden while it is disabled. */
  aiTool?: string;
}

const DASHBOARD_TAB: ToolTab = {
  id: "dashboard",
  labelKey: "tools.dashboard",
  Icon: SettingsIcon,
  Panel: Settings,
};

/** Add a tool here to give it a tab; that is the whole extension point. */
const TOOL_TABS: ToolTab[] = [
  DASHBOARD_TAB,
  {
    id: "claude-code",
    labelKey: "tools.claudeCode",
    Icon: Boxes,
    Panel: CcConfig,
    aiTool: "claude",
  },
  {
    id: "codex",
    labelKey: "tools.codex",
    Icon: SquareTerminal,
    Panel: CodexConfig,
    aiTool: "codex",
  },
  { id: "ai-router", labelKey: "tools.aiRouter", Icon: Router, Panel: AiRouterConfig },
  {
    id: "git-credentials",
    labelKey: "tools.gitCredentials",
    Icon: KeyRound,
    Panel: GitCredentialsConfig,
  },
];

/**
 * Settings page shell with one tab per configuration surface.
 * @returns The tab bar plus the active tab's panel.
 */
export function SettingsHub() {
  const { t } = useTranslation("settings");
  const [params, setParams] = useSearchParams();
  const requested = params.get("tool");
  const aiTools = useAiTools();
  const tabs = TOOL_TABS.filter(
    (tab) => !tab.aiTool || aiTools.byId(tab.aiTool)?.enabled !== false
  );
  const active = tabs.find((tab) => tab.id === requested) ?? DASHBOARD_TAB;

  return (
    <div className="space-y-6">
      <PageTabs
        ariaLabel={t("tools.label", "Tools")}
        activeId={active.id}
        onSelect={(id) => setParams(id === DASHBOARD_TAB.id ? {} : { tool: id }, { replace: true })}
        tabs={tabs.map(({ id, labelKey, Icon }) => ({
          id,
          Icon,
          label: t(labelKey),
        }))}
      />

      <active.Panel />
    </div>
  );
}