siftlode/frontend/src/components/ConfigPanel.tsx

import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, RotateCcw, Save, Send } from "lucide-react";
import { api, type ConfigItem } from "../lib/api";
import { notify } from "../lib/notifications";
import Tooltip from "./Tooltip";
import Tabs, { usePersistedTab } from "./Tabs";
import { Switch } from "./ui/form";

// Admin Configuration page: edit DB-overridable operational settings (registry-driven from the
// backend — adding a key there makes it appear here automatically). Edits are drafted and
// applied together via one Save/Discard bar (consistent with the Settings page); nothing hits
// the server until Save. Group order is fixed where known so logically related settings (e.g.
// Email/SMTP) stay together.
const GROUP_ORDER = ["access", "email", "youtube", "google", "quota", "backfill", "shorts", "batch"];
type SaveState = "idle" | "saving" | "saved" | "error";

export default function ConfigPanel() {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const q = useQuery({ queryKey: ["admin-config"], queryFn: api.adminConfig });
  const data = q.data;

  const items = useMemo(() => (data ? Object.values(data.groups).flat() : []), [data]);
  const byKey = useMemo(() => Object.fromEntries(items.map((i) => [i.key, i])), [items]);
  // Baseline draft from the server: non-secrets show their effective value; secrets start empty
  // (write-only — we never load them back).
  const baseline = useMemo(() => {
    const m: Record<string, string> = {};
    for (const it of items) m[it.key] = it.secret ? "" : String(it.value ?? "");
    return m;
  }, [items]);

  const [draft, setDraft] = useState<Record<string, string>>({});
  // Secrets the admin marked to reset-to-default on the next Save (can't be expressed by
  // clearing the field, since an empty secret field means "leave unchanged").
  const [secretReset, setSecretReset] = useState<Record<string, boolean>>({});
  const [saveState, setSaveState] = useState<SaveState>("idle");
  // One tab per config group (persisted). Called before the loading guard so hook order is
  // stable; the active id is clamped to a real group at render time once data has loaded.
  const [tab, setTab] = usePersistedTab("siftlode.configTab");

  // Re-seed the draft whenever the server data changes (initial load + after a save/reset).
  useEffect(() => {
    setDraft(baseline);
    setSecretReset({});
  }, [baseline]);

  const isDirty = (it: ConfigItem): boolean => {
    if (it.secret) return (draft[it.key] ?? "").trim() !== "" || !!secretReset[it.key];
    return (draft[it.key] ?? "") !== (baseline[it.key] ?? "");
  };
  const dirtyKeys = items.filter(isDirty).map((i) => i.key);
  const dirty = dirtyKeys.length > 0;

  async function save() {
    setSaveState("saving");
    try {
      for (const key of dirtyKeys) {
        const it = byKey[key];
        const raw = draft[key] ?? "";
        if (it.secret) {
          if (secretReset[key] && !raw.trim()) await api.resetConfig(key);
          else if (raw.trim()) await api.setConfig(key, raw);
        } else if (it.type === "bool") {
          await api.setConfig(key, raw === "true");
        } else if (raw === "") {
          if (it.is_set) await api.resetConfig(key); // cleared → fall back to default
        } else {
          await api.setConfig(key, it.type === "int" ? Number(raw) : raw);
        }
      }
      await qc.invalidateQueries({ queryKey: ["admin-config"] });
      setSaveState("saved");
      setTimeout(() => setSaveState((s) => (s === "saved" ? "idle" : s)), 2500);
    } catch {
      setSaveState("error");
      notify({ level: "error", message: t("config.saveFailed") });
    }
  }

  function discard() {
    setDraft(baseline);
    setSecretReset({});
    setSaveState("idle");
  }

  const testEmail = useMutation({
    mutationFn: () => api.testEmail(),
    onSuccess: (r) => notify({ level: "success", message: t("config.testSent", { to: r.to }) }),
    onError: () => notify({ level: "error", message: t("config.testFailed") }),
  });

  if (q.isLoading || !data) {
    return <div className="p-4 max-w-3xl mx-auto text-muted">{t("config.loading")}</div>;
  }

  const groupKeys = Object.keys(data.groups).sort(
    (a, b) => (GROUP_ORDER.indexOf(a) + 1 || 99) - (GROUP_ORDER.indexOf(b) + 1 || 99)
  );
  // Clamp the persisted tab to a real group (the registry can change between sessions). The
  // tab pill carries a dot when that group has unsaved edits, so a draft in a hidden tab is
  // never silently lost behind the global Save bar.
  const activeGroup = groupKeys.includes(tab) ? tab : groupKeys[0];
  const dirtyByGroup = new Set(dirtyKeys.map((k) => byKey[k]?.group).filter(Boolean));
  const groupTabs = groupKeys.map((g) => ({
    id: g,
    label: `${t(`config.groups.${g}`, g)}${dirtyByGroup.has(g) ? " •" : ""}`,
  }));

  return (
    <div className="p-4 max-w-3xl w-full mx-auto pb-24">
      <p className="text-xs text-muted mb-4 leading-relaxed">{t("config.intro")}</p>

      <Tabs tabs={groupTabs} active={activeGroup} onChange={setTab} />

      {activeGroup && (
        <div className="glass rounded-2xl p-4 mb-4">
          <div className="divide-y divide-border/60">
            {data.groups[activeGroup].map((item) => (
              <Field
                key={item.key}
                item={item}
                value={draft[item.key] ?? ""}
                secretsManageable={data.secrets_manageable}
                pendingSecretReset={!!secretReset[item.key]}
                onChange={(v) => setDraft((d) => ({ ...d, [item.key]: v }))}
                onResetField={() => {
                  if (item.secret) setSecretReset((s) => ({ ...s, [item.key]: !s[item.key] }));
                  else setDraft((d) => ({ ...d, [item.key]: "" }));
                }}
              />
            ))}
          </div>

          {activeGroup === "email" && (
            <div className="mt-3 pt-3 border-t border-border/60">
              <Tooltip hint={t("config.testEmailHint")}>
                <button
                  onClick={() => testEmail.mutate()}
                  disabled={testEmail.isPending || dirty}
                  className="glass-card glass-hover inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
                >
                  <Send className={`w-4 h-4 ${testEmail.isPending ? "animate-pulse" : ""}`} />
                  {t("config.testEmail")}
                </button>
              </Tooltip>
            </div>
          )}
        </div>
      )}

      {(dirty || saveState !== "idle") && (
        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 glass rounded-2xl shadow-lg flex items-center justify-between gap-4 px-4 py-3 w-[min(48rem,calc(100%-2rem))]">
          <span className="text-sm text-muted">
            {saveState === "saved" ? (
              <span className="text-emerald-500 inline-flex items-center gap-1.5">
                <Check className="w-4 h-4" />
                {t("config.saved")}
              </span>
            ) : saveState === "error" ? (
              <span className="text-red-500">{t("config.saveFailed")}</span>
            ) : (
              t("config.unsaved")
            )}
          </span>
          <div className="flex items-center gap-2">
            <button
              onClick={discard}
              disabled={saveState === "saving" || !dirty}
              className="glass-card glass-hover flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm disabled:opacity-40 transition"
            >
              <RotateCcw className="w-4 h-4" />
              {t("config.discard")}
            </button>
            <button
              onClick={save}
              disabled={saveState === "saving" || !dirty}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-accent text-accent-fg font-medium shadow-md shadow-accent/20 disabled:opacity-40 transition"
            >
              <Save className="w-4 h-4" />
              {saveState === "saving" ? t("config.saving") : t("config.save")}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function Field({
  item,
  value,
  secretsManageable,
  pendingSecretReset,
  onChange,
  onResetField,
}: {
  item: ConfigItem;
  value: string;
  secretsManageable: boolean;
  pendingSecretReset: boolean;
  onChange: (v: string) => void;
  onResetField: () => void;
}) {
  const { t } = useTranslation();
  const isNum = item.type === "int";
  const isBool = item.type === "bool";
  const secretDisabled = item.secret && !secretsManageable;

  // Status line: never reveal a secret's value.
  let status: string;
  if (item.secret) {
    status = secretDisabled
      ? t("config.secretsDisabled")
      : pendingSecretReset
        ? t("config.willReset")
        : item.is_set
          ? t("config.secretSet")
          : item.default_is_set
            ? t("config.secretEnv")
            : t("config.secretUnset");
  } else {
    status = item.is_set ? t("config.overridden") : t("config.usingDefault");
  }

  // Reset affordance shows when a DB override exists: clears a non-secret to its default, or
  // toggles a secret's reset-on-save (applied on Save, not immediately). A boolean toggle is
  // its own control — storing its value is equivalent to the default, so no reset link.
  const showReset = item.is_set && !isBool;

  return (
    <div className="flex items-start justify-between gap-3 py-3">
      <div className="min-w-0 flex-1">
        <div className="text-sm font-medium">{t(`config.fields.${item.key}.label`, item.key)}</div>
        <p className="text-xs text-muted leading-relaxed mt-0.5">
          {t(`config.fields.${item.key}.hint`, "")}
        </p>
        <p className="text-[11px] text-muted mt-1">{status}</p>
      </div>

      <div className="flex flex-col items-end gap-1.5 shrink-0">
        {isBool ? (
          <Switch checked={value === "true"} onChange={(v) => onChange(v ? "true" : "false")} />
        ) : (
          <input
            type={item.secret ? "password" : isNum ? "number" : "text"}
            value={value}
            disabled={secretDisabled || (item.secret && pendingSecretReset)}
            onChange={(e) => onChange(e.target.value)}
            min={isNum && item.min != null ? item.min : undefined}
            max={isNum && item.max != null ? item.max : undefined}
            placeholder={item.secret ? "••••••••" : String(item.default ?? "")}
            className="w-52 bg-card border border-border rounded-xl px-3 py-1.5 text-sm outline-none focus:border-accent disabled:opacity-50"
          />
        )}
        {showReset && !secretDisabled && (
          <Tooltip hint={t("config.resetHint")}>
            <button
              onClick={onResetField}
              className={`inline-flex items-center gap-1 text-xs transition ${
                item.secret && pendingSecretReset
                  ? "text-accent"
                  : "text-muted hover:text-fg"
              }`}
            >
              <RotateCcw className="w-3.5 h-3.5" />
              {t("config.reset")}
            </button>
          </Tooltip>
        )}
      </div>
    </div>
  );
}