import {
  SlidersHorizontal,
  AppWindow,
  Cpu,
  Palette,
  Bell,
  Clock,
  FileCode,
  GitBranch,
  FlaskConical,
  BarChart3,
  Puzzle,
  Bookmark,
  Globe,
  Keyboard,
  Terminal,
  HelpCircle,
  Flag,
  Stethoscope,
  HardDrive,
  ArrowLeft,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import { useAppStore } from "../../stores/useAppStore";
import { RepoIcon } from "../shared/RepoIcon";
import { BoundedScrollPane } from "../shared/BoundedScrollPane";
import styles from "./Settings.module.css";

export function getAppSections() {
  return [
    { id: "general", icon: SlidersHorizontal },
    { id: "apps", icon: AppWindow },
    { id: "models", icon: Cpu },
    { id: "appearance", icon: Palette },
    { id: "notifications", icon: Bell },
    { id: "automation", icon: Clock },
    { id: "editor", icon: FileCode },
    { id: "diagnostics", icon: Stethoscope },
    { id: "storage", icon: HardDrive },
    { id: "git", icon: GitBranch },
    { id: "keyboard", icon: Keyboard },
    { id: "cli", icon: Terminal },
    { id: "claude-flags", icon: Flag },
    { id: "pinned-prompts", icon: Bookmark },
    { id: "plugins", icon: Puzzle },
    { id: "community", icon: Globe },
    { id: "claude-code-plugins", icon: Puzzle },
    { id: "help", icon: HelpCircle },
  ] as const;
}

export function SettingsSidebar() {
  const { t } = useTranslation(["common", "settings"]);
  const settingsSection = useAppStore((s) => s.settingsSection);
  const setSettingsSection = useAppStore((s) => s.setSettingsSection);
  const closeSettings = useAppStore((s) => s.closeSettings);
  const repositories = useAppStore((s) => s.repositories);
  const usageInsightsEnabled = useAppStore((s) => s.usageInsightsEnabled);

  const sectionLabel = (id: string) => {
    if (id === "general") return t("settings:nav_general");
    if (id === "apps") return t("settings:nav_apps");
    if (id === "models") return t("settings:nav_models");
    if (id === "appearance") return t("settings:nav_appearance");
    if (id === "notifications") return t("settings:nav_notifications");
    if (id === "automation") return t("settings:nav_automation");
    if (id === "editor") return t("settings:nav_editor");
    if (id === "diagnostics") return t("settings:nav_diagnostics");
    if (id === "storage") return t("settings:nav_storage");
    if (id === "git") return t("settings:nav_git");
    if (id === "keyboard") return t("settings:nav_keyboard");
    if (id === "cli") return t("settings:nav_cli");
    if (id === "claude-flags") return t("settings:nav_claude_flags");
    if (id === "plugins") return t("settings:nav_plugins");
    if (id === "claude-code-plugins") return t("settings:nav_claude_code_plugins");
    if (id === "community") return t("settings:nav_community");
    if (id === "pinned-prompts") return t("settings:nav_pinned_prompts");
    if (id === "help") return t("settings:nav_help");
    return id;
  };

  return (
    <div className={styles.sidebar}>
      <div className={styles.sidebarHeader}>
        <button className={styles.backLink} onClick={closeSettings}>
          <ArrowLeft size={13} aria-hidden="true" />
          <span>{t("common:back_to_app")}</span>
        </button>
        <h2 className={styles.sidebarTitle}>{t("settings:settings_title")}</h2>
      </div>
      <BoundedScrollPane className={styles.sidebarNav}>

      {getAppSections().map((s) => (
        <button
          key={s.id}
          className={
            settingsSection === s.id ? styles.navItemActive : styles.navItem
          }
          onClick={() => setSettingsSection(s.id)}
        >
          <s.icon size={14} />
          {sectionLabel(s.id)}
        </button>
      ))}

      {usageInsightsEnabled && (
        <button
          className={
            settingsSection === "usage" ? styles.navItemActive : styles.navItem
          }
          onClick={() => setSettingsSection("usage")}
        >
          <BarChart3 size={14} />
          {t("settings:nav_usage")}
        </button>
      )}

      <div className={styles.groupLabel}>{t("settings:group_more")}</div>
      <button
        className={
          settingsSection === "experimental" ? styles.navItemActive : styles.navItem
        }
        onClick={() => setSettingsSection("experimental")}
      >
        <FlaskConical size={14} />
        {t("settings:nav_experimental")}
      </button>

      <div className={styles.groupLabel}>{t("settings:group_repositories")}</div>
      {repositories.map((repo) => {
        const sectionId = `repo:${repo.id}`;
        return (
          <button
            key={repo.id}
            className={
              settingsSection === sectionId
                ? styles.navItemActive
                : styles.navItem
            }
            onClick={() => setSettingsSection(sectionId)}
          >
            {repo.icon && <RepoIcon icon={repo.icon} size={14} className={styles.repoIcon} />}
            <span className={styles.repoName}>{repo.name}</span>
          </button>
        );
      })}
      </BoundedScrollPane>
    </div>
  );
}
