import { lazy, Suspense } from "react";
import { useTranslation } from "react-i18next";
import { useAppStore } from "../../stores/useAppStore";
import { SettingsSidebar } from "./SettingsSidebar";
import { BoundedScrollPane } from "../shared/BoundedScrollPane";
import styles from "./Settings.module.css";

// Each section is split into its own chunk so cold start doesn't pay for
// settings panels the user may never open. The first navigation into a section
// fetches its chunk; subsequent navigations are cache hits.
const GeneralSettings = lazy(() =>
  import("./sections/GeneralSettings").then((m) => ({ default: m.GeneralSettings })),
);
const AppsSettings = lazy(() =>
  import("./sections/AppsSettings").then((m) => ({ default: m.AppsSettings })),
);
const ModelSettings = lazy(() =>
  import("./sections/ModelSettings").then((m) => ({ default: m.ModelSettings })),
);
const AppearanceSettings = lazy(() =>
  import("./sections/AppearanceSettings").then((m) => ({ default: m.AppearanceSettings })),
);
const NotificationsSettings = lazy(() =>
  import("./sections/NotificationsSettings").then((m) => ({ default: m.NotificationsSettings })),
);
const AutomationSettings = lazy(() =>
  import("./sections/AutomationSettings").then((m) => ({ default: m.AutomationSettings })),
);
const EditorSettings = lazy(() =>
  import("./sections/EditorSettings").then((m) => ({ default: m.EditorSettings })),
);
const DiagnosticsSettings = lazy(() =>
  import("./sections/DiagnosticsSettings").then((m) => ({ default: m.DiagnosticsSettings })),
);
const StorageSettings = lazy(() =>
  import("./sections/StorageSettings").then((m) => ({ default: m.StorageSettings })),
);
const GitSettings = lazy(() =>
  import("./sections/GitSettings").then((m) => ({ default: m.GitSettings })),
);
const RepoSettings = lazy(() =>
  import("./sections/RepoSettings").then((m) => ({ default: m.RepoSettings })),
);
const ExperimentalSettings = lazy(() =>
  import("./sections/ExperimentalSettings").then((m) => ({ default: m.ExperimentalSettings })),
);
const UsageSettings = lazy(() =>
  import("./sections/UsageSettings").then((m) => ({ default: m.UsageSettings })),
);
const PluginsSettings = lazy(() =>
  import("./sections/PluginsSettings").then((m) => ({ default: m.PluginsSettings })),
);
const ClaudeCodePluginsSettings = lazy(() =>
  import("./sections/ClaudeCodePluginsSettings").then((m) => ({
    default: m.ClaudeCodePluginsSettings,
  })),
);
const CommunitySettings = lazy(() =>
  import("./sections/CommunitySettings").then((m) => ({
    default: m.CommunitySettings,
  })),
);
const PinnedPromptsSettings = lazy(() =>
  import("./sections/PinnedPromptsSettings").then((m) => ({
    default: m.PinnedPromptsSettings,
  })),
);
const KeyboardSettings = lazy(() =>
  import("./sections/KeyboardSettings").then((m) => ({
    default: m.KeyboardSettings,
  })),
);
const CliSettings = lazy(() =>
  import("./sections/CliSettings").then((m) => ({ default: m.CliSettings })),
);
const HelpSettings = lazy(() =>
  import("./sections/HelpSettings").then((m) => ({
    default: m.HelpSettings,
  })),
);
const ClaudeFlagsSettings = lazy(() =>
  import("./sections/ClaudeFlagsSettings").then((m) => ({
    default: m.ClaudeFlagsSettings,
  })),
);

function SectionContent({ section }: { section: string | null }) {
  if (!section || section === "general") return <GeneralSettings />;
  if (section === "apps") return <AppsSettings />;
  if (section === "models") return <ModelSettings />;
  if (section === "usage") return <UsageSettings />;
  if (section === "appearance") return <AppearanceSettings />;
  if (section === "notifications") return <NotificationsSettings />;
  if (section === "automation") return <AutomationSettings />;
  if (section === "editor") return <EditorSettings />;
  if (section === "diagnostics") return <DiagnosticsSettings />;
  if (section === "storage") return <StorageSettings />;
  if (section === "git") return <GitSettings />;
  if (section === "keyboard") return <KeyboardSettings />;
  if (section === "cli") return <CliSettings />;
  if (section === "claude-flags")
    return <ClaudeFlagsSettings scope={{ kind: "global" }} />;
  if (section === "help") return <HelpSettings />;
  if (section === "pinned-prompts") return <PinnedPromptsSettings />;
  if (section === "plugins") return <PluginsSettings />;
  if (section === "claude-code-plugins") return <ClaudeCodePluginsSettings />;
  if (section === "community") return <CommunitySettings />;
  if (section === "experimental") return <ExperimentalSettings />;
  if (section.startsWith("repo:"))
    return <RepoSettings repoId={section.slice(5)} />;
  return <GeneralSettings />;
}

export function SettingsPage() {
  const settingsSection = useAppStore((s) => s.settingsSection);
  const { t } = useTranslation("settings");
  const { t: tCommon } = useTranslation("common");

  return (
    <div className={styles.container}>
      <div className={styles.dragRegion} data-tauri-drag-region />
      <SettingsSidebar />
      <div className={styles.contentArea}>
        <BoundedScrollPane className={styles.content}>
          <Suspense
            fallback={
              <div
                role="status"
                aria-live="polite"
                aria-busy="true"
                style={{ padding: "1rem", color: "var(--text-dim)" }}
              >
                {tCommon("loading")}
              </div>
            }
          >
            <SectionContent section={settingsSection} />
          </Suspense>
        </BoundedScrollPane>
        <div className={styles.attributionBar}>{t("attribution")}</div>
      </div>
    </div>
  );
}
