"use client";

import { useState } from "react";

import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { localeHeader } from "@/lib/i18n";
import { PROVIDERS } from "@/lib/providers";
import {
  clearProviderKey,
  modelsFor,
  providerHeaders,
  saveProviderKey,
  setCustomBaseUrl,
  setGeneration,
  setProviderModels,
  useProviders,
} from "@/lib/providers-client";
import { cn } from "@/lib/utils";

/**
 * Settings → Providers: bring-your-own keys for the cloud model providers.
 *
 * Keys live in this browser only — never on the server, never in a backup or
 * the sync payload — and travel with each model call so the self-hosted app
 * can reach the provider on the user's behalf. A key can also take over study
 * generation (decks, homework, grading), and every enabled provider's models
 * show up in the chat picker.
 */
export function ProvidersSection() {
  const { t } = useI18n();
  const state = useProviders();
  const [drafts, setDrafts] = useState<Record<string, string>>({});
  const [busy, setBusy] = useState<string | null>(null);
  const [status, setStatus] = useState<Record<string, string>>({});

  const refresh = async (id: string) => {
    setBusy(id);
    try {
      const response = await fetch("/api/providers", { headers: { ...providerHeaders(id), ...localeHeader() } });
      const body = (await response.json().catch(() => null)) as { models?: string[]; error?: string } | null;
      if (!response.ok || !body?.models) {
        setStatus((previous) => ({ ...previous, [id]: body?.error ?? t("providers.testFailed") }));
        return;
      }
      const models = body.models;
      setProviderModels(id, models);
      setStatus((previous) => ({
        ...previous,
        [id]: t("providers.modelCount", { n: String(models.length) }),
      }));
    } catch {
      setStatus((previous) => ({ ...previous, [id]: t("providers.testFailed") }));
    } finally {
      setBusy(null);
    }
  };

  const save = (id: string) => {
    const key = (drafts[id] ?? "").trim();
    if (!key) return;
    saveProviderKey(id, key);
    setDrafts((previous) => ({ ...previous, [id]: "" }));
    haptic("toggle");
    void refresh(id);
  };

  const enabled = PROVIDERS.filter((provider) => state.keys[provider.id]);
  const generation = state.generation;

  return (
    <section className="mb-4 space-y-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
      <div>
        <h3 className="text-sm font-semibold text-[var(--text)]">{t("providers.title")}</h3>
        <p className="mt-0.5 text-[11.5px] leading-snug text-[var(--text-subtle)]">{t("providers.note")}</p>
      </div>

      {PROVIDERS.map((provider) => {
        const saved = Boolean(state.keys[provider.id]);
        const listed = state.models[provider.id] ?? [];
        return (
          <div key={provider.id} className="space-y-1.5 border-t border-[var(--hairline-soft)] pt-2.5">
            <div className="flex items-center justify-between gap-2">
              <span className="text-[13px] font-semibold text-[var(--text)]">{provider.label}</span>
              {provider.docs ? (
                <a
                  href={provider.docs}
                  target="_blank"
                  rel="noreferrer"
                  className="text-[11.5px] font-medium text-accent-600 underline decoration-dotted dark:text-accent-300"
                >
                  {t("providers.getKey")}
                </a>
              ) : null}
            </div>

            {provider.id === "custom" ? (
              <input
                value={state.customBaseUrl}
                onChange={(event) => setCustomBaseUrl(event.target.value)}
                placeholder={t("providers.baseUrlPlaceholder")}
                aria-label={t("providers.baseUrl")}
                autoComplete="off"
                spellCheck={false}
                className="w-full rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)] focus:border-accent-400"
              />
            ) : null}

            <div className="flex items-center gap-2">
              <input
                type="password"
                value={drafts[provider.id] ?? ""}
                onChange={(event) => setDrafts((previous) => ({ ...previous, [provider.id]: event.target.value }))}
                onKeyDown={(event) => {
                  if (event.key === "Enter") save(provider.id);
                }}
                placeholder={saved ? t("providers.keySaved") : provider.keyHint}
                aria-label={`${provider.label} ${t("providers.key")}`}
                autoComplete="off"
                spellCheck={false}
                className="min-w-0 flex-1 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)] focus:border-accent-400"
              />
              <button
                type="button"
                onClick={() => save(provider.id)}
                disabled={!(drafts[provider.id] ?? "").trim()}
                className="btn-secondary h-9 shrink-0 px-3 text-[12.5px] disabled:opacity-50"
              >
                {t("providers.saveKey")}
              </button>
              {saved ? (
                <>
                  <button
                    type="button"
                    onClick={() => void refresh(provider.id)}
                    disabled={busy === provider.id}
                    aria-label={t("providers.test")}
                    title={t("providers.test")}
                    className="grid size-9 shrink-0 place-items-center rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:text-[var(--text)] disabled:opacity-50"
                  >
                    ↻
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      clearProviderKey(provider.id);
                      if (generation?.provider === provider.id) setGeneration(null);
                      haptic("tap");
                    }}
                    aria-label={t("providers.remove")}
                    title={t("providers.remove")}
                    className="grid size-9 shrink-0 place-items-center rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:text-rose-600 disabled:opacity-50"
                  >
                    ×
                  </button>
                </>
              ) : null}
            </div>

            {status[provider.id] ?? (saved && listed.length > 0 ? t("providers.modelCount", { n: String(listed.length) }) : null) ? (
              <p
                className={cn(
                  "text-[11.5px] leading-snug",
                  status[provider.id] && !status[provider.id].includes(String(listed.length))
                    ? "text-rose-600 dark:text-rose-300"
                    : "text-[var(--text-subtle)]",
                )}
              >
                {status[provider.id] ?? t("providers.modelCount", { n: String(listed.length) })}
              </p>
            ) : null}
          </div>
        );
      })}

      {enabled.length > 0 ? (
        <div className="space-y-2 border-t border-[var(--hairline-soft)] pt-2.5">
          <span className="block text-[13px] font-semibold text-[var(--text)]">{t("providers.generation")}</span>
          <p className="text-[11.5px] leading-snug text-[var(--text-subtle)]">{t("providers.generationNote")}</p>
          <div className="flex flex-wrap items-center gap-2">
            <select
              aria-label={t("providers.generation")}
              value={generation?.provider ?? ""}
              onChange={(event) => {
                const id = event.target.value;
                if (!id) {
                  setGeneration(null);
                  return;
                }
                const models = modelsFor(state, id);
                setGeneration({ provider: id, textModel: models[0] ?? "", visionModel: models[0] ?? "" });
                haptic("toggle");
              }}
              className="min-w-0 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[12.5px] text-[var(--text)] outline-none"
            >
              <option value="">{t("providers.serverDefault")}</option>
              {enabled.map((provider) => (
                <option key={provider.id} value={provider.id}>
                  {provider.label}
                </option>
              ))}
            </select>
            {generation ? (
              <>
                <select
                  aria-label={t("providers.textModel")}
                  value={generation.textModel}
                  onChange={(event) =>
                    setGeneration({ ...generation, textModel: event.target.value, visionModel: generation.visionModel || event.target.value })
                  }
                  className="min-w-0 max-w-[46%] rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[12.5px] text-[var(--text)] outline-none"
                >
                  {(modelsFor(state, generation.provider).length > 0 ? modelsFor(state, generation.provider) : [generation.textModel]).map(
                    (model) => (
                      <option key={model} value={model}>
                        {model}
                      </option>
                    ),
                  )}
                </select>
                <select
                  aria-label={t("providers.visionModel")}
                  value={generation.visionModel}
                  onChange={(event) => setGeneration({ ...generation, visionModel: event.target.value })}
                  className="min-w-0 max-w-[46%] rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2 text-[12.5px] text-[var(--text)] outline-none"
                >
                  {(modelsFor(state, generation.provider).length > 0 ? modelsFor(state, generation.provider) : [generation.visionModel]).map(
                    (model) => (
                      <option key={model} value={model}>
                        {model}
                      </option>
                    ),
                  )}
                </select>
              </>
            ) : null}
          </div>
        </div>
      ) : null}
    </section>
  );
}