settings.tsx

import { clsx } from "clsx";
import {
  Check,
  Download,
  FolderOpen,
  FolderSearch,
  Loader2,
  Pencil,
  Plus,
  RefreshCw,
  Trash2,
  TriangleAlert,
  X,
} from "lucide-react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useSearchParams } from "react-router-dom";
import { openDirectoryPicker } from "@/lib/dialog";
import {
  applyLanguagePreference,
  getStoredLanguagePreference,
  type LanguagePreference,
} from "@/lib/i18n";
import { api } from "@/lib/invoke";
import { isDesktop } from "@/lib/transport";
import { agentDisplayName, type DiscoveredProject } from "@/lib/types";
import { useAgentStore } from "@/stores/agent-store";
import { useProjectStore } from "@/stores/project-store";
import { toast } from "@/stores/toast-store";
import type { AppIcon, ThemeName } from "@/stores/ui-store";
import { useUIStore } from "@/stores/ui-store";
import { useUpdateStore } from "@/stores/update-store";
import { useWebUpdateStore } from "@/stores/web-update-store";

const THEME_OPTIONS: {
  value: ThemeName;
  label: string;
  colors: [string, string, string];
}[] = [
  {
    value: "tiesen",
    label: "Tiesen",
    colors: [
      "oklch(0.5144 0.1605 267.4400)",
      "oklch(0.9851 0 0)",
      "oklch(0 0 0)",
    ],
  },
  {
    value: "claude",
    label: "Claude",
    colors: [
      "oklch(0.6171 0.1375 39.0427)",
      "oklch(0.9665 0.0067 97.3521)",
      "oklch(0.2679 0.0036 106.6427)",
    ],
  },
];

const ICON_OPTIONS: { value: AppIcon; label: string; src: string }[] = [
  { value: "icon-1", label: "Tiesen", src: "/icons/app-icon-1.png" },
  { value: "icon-2", label: "Claude", src: "/icons/app-icon-2.png" },
];

const LANGUAGE_OPTIONS: {
  value: LanguagePreference;
  labelKey: "language.system" | "language.en" | "language.zh";
}[] = [
  { value: "system", labelKey: "language.system" },
  { value: "en", labelKey: "language.en" },
  { value: "zh", labelKey: "language.zh" },
];

function UpdateSection() {
  const { t } = useTranslation("settings");
  const available = useUpdateStore((s) => s.available);
  const checking = useUpdateStore((s) => s.checking);
  const installing = useUpdateStore((s) => s.installing);
  const checkForUpdate = useUpdateStore((s) => s.checkForUpdate);
  const promptUpdate = useUpdateStore((s) => s.promptUpdate);

  const handleCheck = async () => {
    await checkForUpdate();
    // Show toast if no update found (checked becomes true, available stays null)
    if (!useUpdateStore.getState().available) {
      toast.success(t("update.upToDate"));
    }
  };

  return (
    <div className="flex items-center gap-3">
      <span className="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
      {available ? (
        <button
          onClick={promptUpdate}
          disabled={installing}
          className="flex items-center gap-1.5 rounded-lg bg-primary px-2.5 py-1 text-xs text-primary-foreground shadow-sm hover:bg-primary/90 disabled:opacity-50 transition-colors"
        >
          {installing ? (
            <Loader2 size={12} className="animate-spin" />
          ) : (
            <Download size={12} />
          )}
          {installing
            ? t("update.updating")
            : t("update.updateTo", { version: available.version })}
        </button>
      ) : (
        <button
          onClick={handleCheck}
          disabled={checking}
          className="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
        >
          <RefreshCw
            size={12}
            className={checking ? "origin-center animate-spin" : ""}
          />
          {checking ? t("update.checking") : t("update.checkForUpdates")}
        </button>
      )}
    </div>
  );
}

function WebUpdateSection() {
  const { t } = useTranslation("settings");
  const available = useWebUpdateStore((s) => s.available);
  const checking = useWebUpdateStore((s) => s.checking);
  const checkForUpdate = useWebUpdateStore((s) => s.checkForUpdate);
  const promptUpdate = useWebUpdateStore((s) => s.promptUpdate);

  const handleCheck = async () => {
    await checkForUpdate(true);
    if (!useWebUpdateStore.getState().available) {
      toast.success(t("update.upToDate"));
    }
  };

  return (
    <div className="flex items-center gap-3">
      <span className="text-xs text-muted-foreground">v{__APP_VERSION__}</span>
      {available ? (
        <button
          onClick={promptUpdate}
          className="flex items-center gap-1.5 rounded-lg bg-primary px-2.5 py-1 text-xs text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
        >
          <Download size={12} />
          {t("update.updateTo", { version: available.version })}
        </button>
      ) : (
        <button
          onClick={handleCheck}
          disabled={checking}
          className="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
        >
          <RefreshCw
            size={12}
            className={checking ? "origin-center animate-spin" : ""}
          />
          {checking ? t("update.checking") : t("update.checkForUpdates")}
        </button>
      )}
    </div>
  );
}

export default function SettingsPage() {
  const { t } = useTranslation("settings");
  const { t: tc } = useTranslation("common");
  const languagePreference = getStoredLanguagePreference();
  const {
    themeName,
    mode,
    appIcon,
    setThemeName,
    setMode,
    setAppIcon: setAppIconState,
  } = useUIStore();
  const { projects, loading, loadProjects, addProject, removeProject } =
    useProjectStore();

  const {
    agents,
    fetch: fetchAgents,
    updatePath,
    setEnabled,
  } = useAgentStore();
  const [searchParams, setSearchParams] = useSearchParams();

  const [editingAgent, setEditingAgent] = useState<string | null>(null);
  const [editingPath, setEditingPath] = useState("");
  const [adding, setAdding] = useState(false);
  const [projectPathInput, setProjectPathInput] = useState("");
  const [discoveredProjects, setDiscoveredProjects] = useState<
    DiscoveredProject[] | null
  >(null);
  const [discoveredSelected, setDiscoveredSelected] = useState<Set<string>>(
    new Set(),
  );

  useEffect(() => {
    loadProjects();
  }, [loadProjects]);

  useEffect(() => {
    fetchAgents();
  }, [fetchAgents]);

  useEffect(() => {
    const scrollTo = searchParams.get("scrollTo");
    if (scrollTo) {
      const el = document.getElementById(scrollTo);
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
        searchParams.delete("scrollTo");
        setSearchParams(searchParams, { replace: true });
      }
    }
  }, [searchParams, setSearchParams]);

  const agentOrder = useAgentStore((s) => s.agentOrder);
  const agentNames = agentOrder;
  const agentMap = new Map(agents.map((a) => [a.name.toLowerCase(), a]));

  const existingPaths = new Set(projects.map((p) => p.path));

  const handleAddPath = async (path: string) => {
    if (!path) return;
    setAdding(true);
    try {
      await addProject(path);
      setDiscoveredProjects(null);
      setProjectPathInput("");
      toast.success(t("projectPaths.toast.projectAdded"));
    } catch {
      try {
        const results = await api.discoverProjects(path);
        if (results.length > 0) {
          setDiscoveredProjects(results);
          setDiscoveredSelected(new Set());
        } else {
          toast.error(t("projectPaths.toast.noProjectsFound"));
        }
      } catch (e) {
        console.error("Failed to discover projects:", e);
        toast.error(t("projectPaths.toast.failedDiscover"));
      }
    } finally {
      setAdding(false);
    }
  };

  const handleBrowseProject = async () => {
    const path = await openDirectoryPicker({
      title: t("projectPaths.selectDir"),
    });
    if (path) handleAddPath(path);
  };

  const handleAddDiscovered = async () => {
    setAdding(true);
    let added = 0;
    const failed: string[] = [];
    try {
      for (const path of discoveredSelected) {
        try {
          await addProject(path);
          added++;
        } catch {
          failed.push(path);
        }
      }
      if (added > 0)
        toast.success(t("projectPaths.toast.addedCount", { count: added }));
      if (failed.length > 0)
        toast.error(
          t("projectPaths.toast.failedAdd", {
            count: failed.length,
            paths: failed.join(", "),
          }),
        );
    } finally {
      setAdding(false);
      setDiscoveredProjects(null);
      setDiscoveredSelected(new Set());
    }
  };

  const toggleDiscovered = (path: string) => {
    setDiscoveredSelected((prev) => {
      const next = new Set(prev);
      if (next.has(path)) next.delete(path);
      else next.add(path);
      return next;
    });
  };

  return (
    <div className="flex flex-1 flex-col min-h-0 -mb-6">
      <div className="shrink-0 pb-4">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold tracking-tight select-none">
            {t("title")}
          </h2>
          {isDesktop() ? <UpdateSection /> : <WebUpdateSection />}
        </div>
      </div>
      <div className="flex-1 min-h-0 overflow-y-auto">
        <div className="max-w-2xl mx-auto space-y-8 pb-6">
          {/* Agent Paths */}
          <section className="space-y-4">
            <div>
              <h3 className="text-sm font-medium text-muted-foreground">
                {t("agentPaths.section")}
              </h3>
              <p className="text-xs text-muted-foreground mt-1">
                {t("agentPaths.description")}
              </p>
            </div>
            <div className="flex flex-col rounded-lg border border-border bg-card shadow-sm divide-y divide-border">
              {agentNames.map((agent) => {
                const info = agentMap.get(agent);
                const isEnabled = info?.enabled ?? true;
                return (
                  <div
                    key={agent}
                    className={clsx(
                      "flex items-center gap-3 px-4 py-2.5 transition-opacity",
                      !isEnabled && "opacity-50",
                    )}
                  >
                    <button
                      type="button"
                      onClick={() => setEnabled(agent, !isEnabled)}
                      className={clsx(
                        "shrink-0 w-16 text-center rounded-md px-2 py-0.5 text-xs font-medium transition-colors",
                        isEnabled
                          ? "bg-primary/10 text-primary hover:bg-primary/20"
                          : "bg-muted text-muted-foreground hover:bg-muted/80",
                      )}
                    >
                      {isEnabled
                        ? t("agentPaths.enabled")
                        : t("agentPaths.disabled")}
                    </button>
                    <span className="shrink-0 w-28 text-sm font-medium text-foreground">
                      {agentDisplayName(agent)}
                    </span>
                    <input
                      type="text"
                      readOnly={editingAgent !== agent}
                      disabled={!isEnabled}
                      value={
                        editingAgent === agent
                          ? editingPath
                          : (info?.path ?? "")
                      }
                      placeholder={t("agentPaths.notDetected")}
                      aria-label={t("agentPaths.configPath", { agent })}
                      onChange={(e) => setEditingPath(e.target.value)}
                      onKeyDown={(e) => {
                        if (
                          e.key === "Enter" &&
                          !e.nativeEvent.isComposing &&
                          e.keyCode !== 229 &&
                          editingPath.trim()
                        ) {
                          updatePath(agent, editingPath.trim());
                          setEditingAgent(null);
                        }
                        if (e.key === "Escape") setEditingAgent(null);
                      }}
                      className={clsx(
                        "flex-1 rounded-md border border-border px-3 py-1 text-sm text-foreground placeholder:text-muted-foreground truncate disabled:opacity-40",
                        editingAgent === agent
                          ? "bg-card ring-1 ring-ring"
                          : "bg-muted cursor-default",
                      )}
                    />
                    {editingAgent === agent ? (
                      <>
                        {isDesktop() && (
                          <button
                            type="button"
                            aria-label={t("agentPaths.browse", { agent })}
                            className="shrink-0 rounded-md border border-border p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                            onClick={async () => {
                              const path = await openDirectoryPicker({
                                title: t("agentPaths.selectDir", { agent }),
                              });
                              if (path) {
                                updatePath(agent, path);
                                setEditingAgent(null);
                              }
                            }}
                          >
                            <FolderSearch size={14} />
                          </button>
                        )}
                        <button
                          type="button"
                          aria-label={t("agentPaths.cancel")}
                          className="shrink-0 rounded-md border border-border bg-background p-1.5 text-muted-foreground hover:text-foreground transition-colors"
                          onClick={() => setEditingAgent(null)}
                        >
                          <X size={14} />
                        </button>
                        <button
                          type="button"
                          aria-label={t("agentPaths.save")}
                          disabled={!editingPath.trim()}
                          className="shrink-0 rounded-md bg-primary p-1.5 text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors"
                          onClick={() => {
                            updatePath(agent, editingPath.trim());
                            setEditingAgent(null);
                          }}
                        >
                          <Check size={14} />
                        </button>
                      </>
                    ) : (
                      <button
                        type="button"
                        disabled={!isEnabled}
                        aria-label={t("agentPaths.edit", { agent })}
                        className="shrink-0 rounded-md border border-border p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:pointer-events-none disabled:opacity-40"
                        onClick={() => {
                          setEditingAgent(agent);
                          setEditingPath(info?.path ?? "");
                        }}
                      >
                        <Pencil size={14} />
                      </button>
                    )}
                  </div>
                );
              })}
            </div>
          </section>

          {/* Project Paths */}
          <section
            id="project-paths"
            className="space-y-4 border-t border-border pt-8"
          >
            <div>
              <h3 className="text-sm font-medium text-muted-foreground">
                {t("projectPaths.section")}
              </h3>
              <p className="text-xs text-muted-foreground mt-1">
                {t("projectPaths.description")}
              </p>
            </div>
            <div className="flex items-center gap-1.5">
              <input
                type="text"
                placeholder={
                  isDesktop()
                    ? t("projectPaths.placeholderDesktop")
                    : t("projectPaths.placeholderWeb")
                }
                value={projectPathInput}
                onChange={(e) => setProjectPathInput(e.target.value)}
                onKeyDown={(e) => {
                  if (
                    e.key === "Enter" &&
                    !e.nativeEvent.isComposing &&
                    e.keyCode !== 229 &&
                    projectPathInput.trim()
                  )
                    handleAddPath(projectPathInput.trim());
                }}
                className="flex-1 rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
              />
              {isDesktop() && (
                <button
                  type="button"
                  disabled={adding}
                  onClick={handleBrowseProject}
                  className="shrink-0 rounded-md border border-border bg-card p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors disabled:opacity-40"
                  title={t("projectPaths.browse")}
                >
                  <FolderSearch size={16} />
                </button>
              )}
              <button
                onClick={() => handleAddPath(projectPathInput.trim())}
                disabled={adding || !projectPathInput.trim()}
                className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-sm transition-[color,background-color,box-shadow] duration-200 hover:bg-primary/90 hover:shadow-md disabled:opacity-50"
              >
                {adding ? (
                  <Loader2 size={12} className="animate-spin" />
                ) : (
                  <Plus size={12} />
                )}
                {t("projectPaths.add")}
              </button>
            </div>

            {/* Discovered projects (shown when user selected a non-project root dir) */}
            {discoveredProjects !== null && (
              <div className="rounded-lg border border-border bg-card p-4 space-y-3 shadow-sm">
                <p className="text-xs text-muted-foreground">
                  {t("projectPaths.notProject", {
                    count: discoveredProjects.length,
                  })}
                </p>
                {discoveredProjects.length === 0 ? (
                  <p className="text-xs text-muted-foreground italic">
                    {t("projectPaths.noneFound")}
                  </p>
                ) : (
                  <>
                    <div className="space-y-1 max-h-48 overflow-y-auto overscroll-contain">
                      {discoveredProjects.map((dp) => {
                        const already = existingPaths.has(dp.path);
                        return (
                          <label
                            key={dp.path}
                            className={clsx(
                              "flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm cursor-pointer transition-colors",
                              already
                                ? "opacity-50 cursor-not-allowed"
                                : "hover:bg-muted",
                            )}
                          >
                            <input
                              type="checkbox"
                              disabled={already}
                              checked={discoveredSelected.has(dp.path)}
                              onChange={() => toggleDiscovered(dp.path)}
                              className="rounded border-border"
                            />
                            <div className="min-w-0 flex-1">
                              <span className="font-medium text-foreground">
                                {dp.name}
                              </span>
                              <span className="ml-2 text-xs text-muted-foreground truncate">
                                {dp.path}
                              </span>
                            </div>
                            {already && (
                              <span className="text-xs text-muted-foreground">
                                {t("projectPaths.addedBadge")}
                              </span>
                            )}
                          </label>
                        );
                      })}
                    </div>
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={() => setDiscoveredProjects(null)}
                        className="rounded-lg border border-border px-3 py-1 text-xs text-muted-foreground hover:bg-muted"
                      >
                        {t("projectPaths.cancel")}
                      </button>
                      <button
                        onClick={handleAddDiscovered}
                        disabled={discoveredSelected.size === 0 || adding}
                        className="rounded-lg bg-primary px-3 py-1 text-xs text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                      >
                        {t("projectPaths.addSelected", {
                          count: discoveredSelected.size,
                        })}
                      </button>
                    </div>
                  </>
                )}
              </div>
            )}

            {/* Project list */}
            {loading ? (
              <p className="text-xs text-muted-foreground">
                {tc("status.loading")}
              </p>
            ) : projects.length === 0 ? (
              <div className="rounded-lg border-2 border-dashed border-border bg-muted/20 p-6">
                <h4 className="text-sm font-medium text-foreground">
                  {t("projectPaths.emptyTitle")}
                </h4>
                <p className="mt-1 text-xs text-muted-foreground">
                  {t("projectPaths.emptyDescription")}
                </p>
              </div>
            ) : (
              <div className="space-y-1">
                {projects.map((project) => (
                  <div
                    key={project.id}
                    className={clsx(
                      "flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm border bg-card shadow-sm",
                      project.exists ? "border-border" : "border-border",
                    )}
                  >
                    <FolderOpen
                      size={14}
                      className={clsx(
                        "shrink-0",
                        project.exists
                          ? "text-muted-foreground"
                          : "text-muted-foreground/50",
                      )}
                    />
                    <div className="min-w-0 flex-1">
                      <span
                        className={clsx(
                          "font-medium",
                          project.exists
                            ? "text-foreground"
                            : "text-muted-foreground line-through",
                        )}
                      >
                        {project.name}
                      </span>
                      {!project.exists && (
                        <span className="ml-2 text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground inline-flex items-center gap-1">
                          <TriangleAlert size={10} />{" "}
                          {t("projectPaths.missing")}
                        </span>
                      )}
                      <span className="ml-2 text-xs text-muted-foreground truncate">
                        {project.path}
                      </span>
                    </div>
                    <button
                      type="button"
                      onClick={() => {
                        removeProject(project.id);
                        toast.success(t("projectPaths.toast.projectRemoved"));
                      }}
                      className="text-muted-foreground hover:text-destructive transition-colors cursor-pointer focus:outline-none"
                      aria-label={t("projectPaths.removeAria", {
                        name: project.name,
                      })}
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </section>

          {/* Appearance */}
          <section className="space-y-4 border-t border-border pt-8">
            <h3 className="text-sm font-medium text-muted-foreground">
              {t("appearance.title")}
            </h3>

            <div className="flex flex-col gap-2 rounded-lg border border-border bg-card px-4 py-2.5 shadow-sm">
              {/* Theme */}
              <div className="flex items-center justify-between">
                <span className="text-sm">{t("appearance.theme")}</span>
                <div className="flex rounded-lg border border-border">
                  {THEME_OPTIONS.map((theme, i) => (
                    <button
                      key={theme.value}
                      onClick={() => {
                        setThemeName(theme.value);
                        toast.success(
                          t("appearance.themeToast", { label: theme.label }),
                        );
                      }}
                      aria-pressed={themeName === theme.value}
                      className={clsx(
                        "flex items-center gap-1.5 px-3 py-1 text-xs font-medium transition-colors duration-200",
                        i === 0 && "rounded-l-lg",
                        i === THEME_OPTIONS.length - 1 && "rounded-r-lg",
                        themeName === theme.value
                          ? "bg-primary text-primary-foreground shadow-sm"
                          : "text-muted-foreground hover:bg-accent",
                      )}
                    >
                      <span
                        className="h-2.5 w-2.5 rounded-full border border-primary-foreground/20"
                        style={{
                          backgroundColor:
                            themeName === theme.value
                              ? "oklch(1 0 0 / 0.9)"
                              : theme.colors[0],
                        }}
                      />
                      {theme.label}
                    </button>
                  ))}
                </div>
              </div>

              <div className="border-t border-border" />

              {/* Mode */}
              <div className="flex items-center justify-between">
                <span className="text-sm">{t("appearance.mode.label")}</span>
                <div className="flex rounded-lg border border-border">
                  {(["system", "light", "dark"] as const).map((m, i) => (
                    <button
                      key={m}
                      onClick={() => {
                        setMode(m);
                        toast.success(
                          t("appearance.modeToast", {
                            label: t(`appearance.mode.${m}`),
                          }),
                        );
                      }}
                      aria-pressed={mode === m}
                      className={clsx(
                        "px-3 py-1 text-xs font-medium transition-colors duration-200",
                        i === 0 && "rounded-l-lg",
                        i === 2 && "rounded-r-lg",
                        mode === m
                          ? "bg-primary text-primary-foreground shadow-sm"
                          : "text-muted-foreground hover:bg-accent",
                      )}
                    >
                      {t(`appearance.mode.${m}`)}
                    </button>
                  ))}
                </div>
              </div>

              {isDesktop() && (
                <>
                  <div className="border-t border-border" />

                  {/* App Icon — desktop only */}
                  <div className="flex items-center justify-between">
                    <span className="text-sm">{t("appearance.appIcon")}</span>
                    <div className="flex gap-2">
                      {ICON_OPTIONS.map((icon) => (
                        <button
                          key={icon.value}
                          onClick={() => {
                            setAppIconState(icon.value);
                            api
                              .setAppIcon(icon.value)
                              .then(() => {
                                toast.success(
                                  t("appearance.iconToast", {
                                    label: icon.label,
                                  }),
                                );
                              })
                              .catch(() => {
                                toast.error(t("appearance.iconFailed"));
                              });
                          }}
                          aria-pressed={appIcon === icon.value}
                          className={clsx(
                            "rounded-lg p-0.5 transition-all duration-200",
                            appIcon === icon.value
                              ? "ring-2 ring-primary ring-offset-2 ring-offset-card"
                              : "ring-1 ring-border hover:ring-primary/50",
                          )}
                        >
                          <img
                            src={icon.src}
                            alt={icon.label}
                            className="h-10 w-10 rounded-md"
                          />
                        </button>
                      ))}
                    </div>
                  </div>
                </>
              )}
            </div>
          </section>

          {/* Language */}
          <section className="space-y-4 border-t border-border pt-8">
            <div>
              <h3 className="text-sm font-medium text-muted-foreground">
                {t("language.label")}
              </h3>
              <p className="text-xs text-muted-foreground mt-1">
                {t("language.description")}
              </p>
            </div>
            <div className="flex items-center justify-end rounded-lg border border-border bg-card px-4 py-2.5 shadow-sm">
              <div className="flex rounded-lg border border-border">
                {LANGUAGE_OPTIONS.map((opt, i) => (
                  <button
                    key={opt.value}
                    onClick={() => {
                      void applyLanguagePreference(opt.value);
                    }}
                    aria-pressed={languagePreference === opt.value}
                    className={clsx(
                      "px-3 py-1 text-xs font-medium transition-colors duration-200",
                      i === 0 && "rounded-l-lg",
                      i === LANGUAGE_OPTIONS.length - 1 && "rounded-r-lg",
                      languagePreference === opt.value
                        ? "bg-primary text-primary-foreground shadow-sm"
                        : "text-muted-foreground hover:bg-accent",
                    )}
                  >
                    {t(opt.labelKey)}
                  </button>
                ))}
              </div>
            </div>
          </section>

          {/* Footer */}
          <footer className="border-t border-border pt-6 pb-2 flex items-center justify-center gap-1.5 text-xs text-muted-foreground/50">
            <span>HarnessKit</span>
            <span>&middot;</span>
            <span>{t("footer.tagline")}</span>
            <span>&middot;</span>
            <a
              href="https://github.com/RealZST/HarnessKit"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-muted-foreground transition-colors"
            >
              {t("footer.github")}
            </a>
          </footer>
        </div>
      </div>
    </div>
  );
}