import { Bot, FolderTree, HardDrive, KeyRound, Link2, Server, Tv, UserCog, Zap } from "lucide-react";
import { useSearchParams } from "react-router";
import { PageHeader } from "~/components/console/page-header.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
import {
  DownloadersSection,
  LibraryRootsSection,
  MediaServersSection,
  PathMappingsSection,
} from "./settings/instances-tab.tsx";
import { ApiKeysSection, SiteCredentialsSection } from "./settings/keys-tab.tsx";
import { AutomationTab, PiTab, StorageTab } from "./settings/prefs-tab.tsx";

export const meta = () => [{ title: "系统设置 · UHD 媒体自动化控制台" }];

const TABS = [
  { value: "automation", label: "自动化", icon: Zap, render: () => <AutomationTab /> },
  { value: "downloaders", label: "下载器", icon: Server, render: () => <DownloadersSection /> },
  { value: "media-servers", label: "媒体服务器", icon: Tv, render: () => <MediaServersSection /> },
  { value: "library-roots", label: "库根", icon: FolderTree, render: () => <LibraryRootsSection /> },
  { value: "path-mappings", label: "路径映射", icon: Link2, render: () => <PathMappingsSection /> },
  { value: "site-credentials", label: "站点凭证", icon: UserCog, render: () => <SiteCredentialsSection /> },
  { value: "api-keys", label: "API Key", icon: KeyRound, render: () => <ApiKeysSection /> },
  { value: "pi", label: "Pi 上游", icon: Bot, render: () => <PiTab /> },
  { value: "storage", label: "缓存与入库", icon: HardDrive, render: () => <StorageTab /> },
] as const;

export default function SettingsPage() {
  const [params, setParams] = useSearchParams();
  const raw = params.get("tab");
  const tab = TABS.some((t) => t.value === raw) ? (raw as string) : "automation";

  return (
    <>
      <PageHeader title="系统设置" description="实例、路径、凭证、密钥、模型上游与自动化开关。凭证一律只写，不回显。" />
      <Tabs
        value={tab}
        onValueChange={(v) =>
          setParams(
            (p) => {
              p.set("tab", v);
              return p;
            },
            { replace: true },
          )
        }
      >
        <TabsList aria-label="设置分节">
          {TABS.map((t) => (
            <TabsTrigger key={t.value} value={t.value}>
              <t.icon />
              {t.label}
            </TabsTrigger>
          ))}
        </TabsList>
        {TABS.map((t) => (
          <TabsContent key={t.value} value={t.value}>
            {tab === t.value ? t.render() : null}
          </TabsContent>
        ))}
      </Tabs>
    </>
  );
}