import { useEffect, useState } from "react";
import { PageHeader } from "../components/layout/PageHeader";
import { Button, Card, Input, Select } from "../components/ui";
import { useData, useRepos } from "../data/DataContext";
import type { AiSettings, PlacementSettings } from "../domain/types";
import { useI18n } from "../i18n/I18nContext";
import { CURRENCIES, LOCALES, type AppCurrency, type AppLocale } from "../lib/i18n/types";
import type { ThemePreference } from "../lib/theme";
import { useTheme } from "../theme/ThemeContext";

export function SettingsPage() {
  const repos = useRepos();
  const { refresh } = useData();
  const { t, locale, currency, setPrefs } = useI18n();
  const { preference, setPreference } = useTheme();

  const [ai, setAi] = useState<AiSettings | null>(null);
  const [placement, setPlacement] = useState<PlacementSettings | null>(null);
  const [apiKey, setApiKey] = useState("");
  const [researchKey, setResearchKey] = useState("");
  const [braveKey, setBraveKey] = useState("");
  const [exaKey, setExaKey] = useState("");
  const [copyModels, setCopyModels] = useState<string[]>([]);
  const [researchModels, setResearchModels] = useState<string[]>([]);
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState("");
  const [draftLocale, setDraftLocale] = useState<AppLocale>(locale);
  const [draftCurrency, setDraftCurrency] = useState<AppCurrency>(currency);

  useEffect(() => {
    setDraftLocale(locale);
    setDraftCurrency(currency);
  }, [locale, currency]);

  useEffect(() => {
    void (async () => {
      setAi(await repos.settings.getAi());
      setPlacement(await repos.settings.getPlacement());
    })();
  }, [repos.settings]);

  async function loadModels(kind: "copy" | "research") {
    if (!ai) return;
    setBusy(kind);
    try {
      const provider = kind === "copy" ? ai.provider : ai.research_provider;
      const models = await repos.settings.listModels(provider);
      if (kind === "copy") setCopyModels(models);
      else setResearchModels(models);
      setMessage(t("settings.modelsLoaded", { provider }));
    } finally {
      setBusy("");
    }
  }

  async function saveAi() {
    if (!ai) return;
    setBusy("ai");
    try {
      const next = await repos.settings.saveAi({
        ...ai,
        api_key: apiKey || undefined,
        research_api_key: researchKey || undefined,
      });
      setAi(next);
      setApiKey("");
      setResearchKey("");
      setMessage(t("settings.aiSaved"));
      refresh();
    } finally {
      setBusy("");
    }
  }

  async function savePlacement() {
    if (!placement) return;
    setBusy("placement");
    try {
      const next = await repos.settings.savePlacement({
        ...placement,
        brave_api_key: braveKey || undefined,
        exa_api_key: exaKey || undefined,
      });
      setPlacement(next);
      setBraveKey("");
      setExaKey("");
      setMessage(t("settings.searchSaved"));
      refresh();
    } finally {
      setBusy("");
    }
  }

  function saveLocaleCurrency() {
    setPrefs({ locale: draftLocale, currency: draftCurrency });
    setMessage(t("settings.localeSaved"));
  }

  function pickTheme(next: ThemePreference) {
    setPreference(next);
    setMessage(t("settings.themeSaved"));
  }

  return (
    <>
      <PageHeader title={t("settings.title")} />

      {message ? (
        <p className="hb-banner-ok" role="status">
          {message}
        </p>
      ) : null}

      <Card title={t("settings.appearance")}>
        <div className="hb-stack">
          <p className="hb-field__label" style={{ margin: 0 }}>
            {t("settings.theme")}
          </p>
          <div className="hb-theme-picker" role="group" aria-label={t("settings.theme")}>
            {(
              [
                ["light", t("settings.themeLight")],
                ["dark", t("settings.themeDark")],
                ["system", t("settings.themeSystem")],
              ] as const
            ).map(([id, label]) => (
              <button
                key={id}
                type="button"
                className={`hb-theme-picker__btn${preference === id ? " is-active" : ""}`}
                onClick={() => pickTheme(id)}
              >
                <span className={`hb-theme-picker__swatch hb-theme-picker__swatch--${id}`} aria-hidden />
                {label}
              </button>
            ))}
          </div>
        </div>
      </Card>

      <Card title={t("settings.localeCurrency")}>
        <div className="hb-stack">
          <div className="hb-grid-2">
            <Select
              label={t("settings.locale")}
              value={draftLocale}
              onChange={(e) => setDraftLocale(e.target.value as AppLocale)}
            >
              {LOCALES.map((l) => (
                <option key={l.id} value={l.id}>
                  {t(`locale.${l.id}`)}
                </option>
              ))}
            </Select>
            <Select
              label={t("settings.currency")}
              value={draftCurrency}
              onChange={(e) => setDraftCurrency(e.target.value as AppCurrency)}
            >
              {CURRENCIES.map((c) => (
                <option key={c.id} value={c.id}>
                  {t(`currency.${c.id}`)}
                </option>
              ))}
            </Select>
          </div>
          <Button type="button" onClick={saveLocaleCurrency}>
            {t("common.save")}
          </Button>
        </div>
      </Card>

      <Card title={t("settings.ai")}>
        {ai ? (
          <div className="hb-stack">
            <div className="hb-grid-2">
              <Select
                label={t("settings.copyProvider")}
                value={ai.provider}
                onChange={(e) => setAi({ ...ai, provider: e.target.value })}
              >
                <option value="opencode-go">OpenCode Go</option>
                <option value="xai">xAI</option>
              </Select>
              <div>
                <Select
                  label={t("settings.copyModel")}
                  value={ai.model}
                  onChange={(e) => setAi({ ...ai, model: e.target.value })}
                >
                  {(copyModels.length ? copyModels : [ai.model || "deepseek-v4-pro"]).map((m) => (
                    <option key={m} value={m}>
                      {m}
                    </option>
                  ))}
                </Select>
                <Button
                  type="button"
                  variant="ghost"
                  className="hb-mt-2"
                  disabled={busy === "copy"}
                  onClick={() => void loadModels("copy")}
                >
                  {busy === "copy" ? t("settings.fetchingModels") : t("settings.fetchModels")}
                </Button>
              </div>
              <Select
                label={t("settings.researchProvider")}
                value={ai.research_provider}
                onChange={(e) => setAi({ ...ai, research_provider: e.target.value })}
              >
                <option value="opencode-go">OpenCode Go</option>
                <option value="xai">xAI</option>
              </Select>
              <div>
                <Select
                  label={t("settings.researchModel")}
                  value={ai.research_model}
                  onChange={(e) => setAi({ ...ai, research_model: e.target.value })}
                >
                  {(researchModels.length ? researchModels : [ai.research_model || "deepseek-v4-pro"]).map(
                    (m) => (
                      <option key={m} value={m}>
                        {m}
                      </option>
                    ),
                  )}
                </Select>
                <Button
                  type="button"
                  variant="ghost"
                  className="hb-mt-2"
                  disabled={busy === "research"}
                  onClick={() => void loadModels("research")}
                >
                  {busy === "research" ? t("settings.fetchingModels") : t("settings.fetchModels")}
                </Button>
              </div>
            </div>
            <Input
              label={t("settings.copyApiKey")}
              type="password"
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder={ai.api_key_configured ? t("settings.configured") : ""}
            />
            <Input
              label={t("settings.researchApiKey")}
              type="password"
              value={researchKey}
              onChange={(e) => setResearchKey(e.target.value)}
              placeholder={ai.research_api_key_configured ? t("settings.configured") : ""}
            />
            <Button type="button" onClick={() => void saveAi()} disabled={busy === "ai"}>
              {t("common.save")}
            </Button>
          </div>
        ) : (
          <p className="text-muted">{t("common.loading")}</p>
        )}
      </Card>

      <Card title={t("settings.search")}>
        {placement ? (
          <div className="hb-stack">
            <div className="hb-grid-2">
              <Select
                label={t("settings.searchProvider")}
                value={placement.web_search_provider}
                onChange={(e) =>
                  setPlacement({
                    ...placement,
                    web_search_provider: e.target.value as PlacementSettings["web_search_provider"],
                  })
                }
              >
                <option value="brave">Brave</option>
                <option value="exa">Exa</option>
              </Select>
              <Select
                label={t("settings.expand")}
                value={placement.expand_strategy}
                onChange={(e) =>
                  setPlacement({
                    ...placement,
                    expand_strategy: e.target.value as PlacementSettings["expand_strategy"],
                  })
                }
              >
                <option value="brave">Brave</option>
                <option value="llm">LLM</option>
                <option value="hybrid">Hybrid</option>
              </Select>
            </div>
            <Input
              label={t("settings.braveKey")}
              type="password"
              value={braveKey}
              onChange={(e) => setBraveKey(e.target.value)}
              placeholder={
                placement.brave_api_key_configured
                  ? t("settings.configured")
                  : t("settings.notConfigured")
              }
            />
            <Input
              label={t("settings.exaKey")}
              type="password"
              value={exaKey}
              onChange={(e) => setExaKey(e.target.value)}
              placeholder={
                placement.exa_api_key_configured
                  ? t("settings.configured")
                  : t("settings.notConfigured")
              }
            />
            <label className="hb-check-row">
              <input
                type="checkbox"
                checked={placement.dev_mode_enabled}
                onChange={(e) => setPlacement({ ...placement, dev_mode_enabled: e.target.checked })}
              />
              <span>{t("settings.devMode")}</span>
            </label>
            <Button type="button" onClick={() => void savePlacement()} disabled={busy === "placement"}>
              {t("common.save")}
            </Button>
          </div>
        ) : (
          <p className="text-muted">{t("common.loading")}</p>
        )}
      </Card>
    </>
  );
}