import { useEffect, useState } from "react";
import { enhanceKeyPresent } from "../api";
import type { EnhanceProfile, EnhanceProvider, Settings } from "../types";

interface Props {
  settings: Settings;
  onChange: (next: Settings) => void;
}

interface ProviderDef {
  id: EnhanceProvider;
  label: string;
  keyVar: string;
  bin: string;
  defaultModel: string;
  modelHint: string;
}

const API_PROVIDERS: ProviderDef[] = [
  {
    id: "anthropic",
    label: "claude",
    keyVar: "ANTHROPIC_API_KEY",
    bin: "",
    defaultModel: "claude-opus-4-8",
    modelHint: "claude-opus-4-8, claude-sonnet-5, claude-haiku-4-5",
  },
  {
    id: "gemini",
    label: "gemini",
    keyVar: "GEMINI_API_KEY",
    bin: "",
    defaultModel: "gemini-2.5-flash",
    modelHint: "gemini-2.5-flash, gemini-2.5-pro",
  },
  {
    id: "openai",
    label: "openai compatible",
    keyVar: "OPENAI_API_KEY",
    bin: "",
    defaultModel: "gpt-4o-mini",
    modelHint: "any model id your endpoint serves",
  },
  {
    id: "ollama",
    label: "ollama (local)",
    keyVar: "",
    bin: "",
    defaultModel: "llama3.2",
    modelHint: "any model pulled into ollama",
  },
];

const CLI_PROVIDERS: ProviderDef[] = [
  {
    id: "claude-cli",
    label: "claude code",
    keyVar: "",
    bin: "claude",
    defaultModel: "",
    modelHint: "empty = your CLI default, or sonnet, opus, a full model id",
  },
  {
    id: "gemini-cli",
    label: "gemini cli",
    keyVar: "",
    bin: "gemini",
    defaultModel: "",
    modelHint: "empty = your CLI default, or gemini-2.5-pro",
  },
  {
    id: "codex-cli",
    label: "codex",
    keyVar: "",
    bin: "codex",
    defaultModel: "",
    modelHint: "empty = your CLI default",
  },
  {
    id: "custom-cli",
    label: "custom",
    keyVar: "",
    bin: "",
    defaultModel: "",
    modelHint: "model handling is up to your command",
  },
];

function uniqueName(base: string, profiles: EnhanceProfile[]): string {
  const names = new Set(profiles.map((p) => p.name));
  if (!names.has(base)) return base;
  let n = 2;
  while (names.has(`${base} ${n}`)) n++;
  return `${base} ${n}`;
}

export default function EnhancePage({ settings, onChange }: Props) {
  const cfg = settings.enhance;
  const profile =
    cfg.profiles.find((p) => p.name === cfg.active_profile) ?? cfg.profiles[0];
  const [ready, setReady] = useState<boolean | null>(null);
  const [nameDraft, setNameDraft] = useState(profile?.name ?? "");

  useEffect(() => {
    setNameDraft(profile?.name ?? "");
  }, [profile?.name]);

  useEffect(() => {
    enhanceKeyPresent().then(setReady).catch(() => setReady(null));
  }, [
    profile?.provider,
    profile?.api_key_env,
    profile?.cli_command,
    cfg.active_profile,
  ]);

  if (!profile) {
    return (
      <section>
        <header className="page-head">
          <h2>enhance</h2>
        </header>
        <button
          className="btn"
          onClick={() =>
            onChange({
              ...settings,
              enhance: {
                ...cfg,
                active_profile: "cleanup",
                profiles: [
                  {
                    name: "cleanup",
                    provider: "anthropic",
                    model: "claude-opus-4-8",
                    base_url: "",
                    api_key_env: "",
                    cli_command: "",
                    instructions:
                      "Fix punctuation, capitalization, filler words, and obvious transcription mistakes. Keep the speaker's wording and tone unchanged.",
                  },
                ],
              },
            })
          }
        >
          create a profile
        </button>
      </section>
    );
  }

  const isCli = profile.provider.endsWith("-cli");
  const providers = isCli ? CLI_PROVIDERS : API_PROVIDERS;
  const providerDef = providers.find((p) => p.id === profile.provider) ?? providers[0];

  const patchEnhance = (partial: Partial<typeof cfg>) =>
    onChange({ ...settings, enhance: { ...cfg, ...partial } });

  const patchProfile = (partial: Partial<EnhanceProfile>) => {
    const profiles = cfg.profiles.map((p) =>
      p.name === profile.name ? { ...p, ...partial } : p,
    );
    patchEnhance({
      profiles,
      active_profile: partial.name ?? cfg.active_profile,
    });
  };

  const selectProfile = (name: string) => patchEnhance({ active_profile: name });

  const addProfile = () => {
    const name = uniqueName("profile", cfg.profiles);
    patchEnhance({
      profiles: [...cfg.profiles, { ...profile, name }],
      active_profile: name,
    });
  };

  const deleteProfile = () => {
    if (cfg.profiles.length < 2) return;
    const profiles = cfg.profiles.filter((p) => p.name !== profile.name);
    patchEnhance({ profiles, active_profile: profiles[0].name });
  };

  const commitRename = () => {
    const name = nameDraft.trim();
    if (!name || name === profile.name) {
      setNameDraft(profile.name);
      return;
    }
    if (cfg.profiles.some((p) => p.name === name)) {
      setNameDraft(profile.name); // duplicate: revert
      return;
    }
    patchProfile({ name });
  };

  const switchBackend = (cli: boolean) => {
    if (cli === isCli) return;
    const next = cli ? CLI_PROVIDERS[0] : API_PROVIDERS[0];
    patchProfile({ provider: next.id, model: next.defaultModel });
  };

  return (
    <section>
      <header className="page-head">
        <h2>enhance</h2>
        <p>
          Optionally pass the raw transcript through an LLM before it is typed.
          Profiles are presets you can switch between, from here or the tray
          menu.
        </p>
      </header>

      <div className="field">
        <label className="check">
          <input
            type="checkbox"
            checked={cfg.enabled}
            onChange={(e) => patchEnhance({ enabled: e.currentTarget.checked })}
          />
          enable enhancement
        </label>
        <p className="hint">
          Off by default. Dictation stays fully local when this is off.
        </p>
      </div>

      <div className={cfg.enabled ? "" : "dimmed"}>
        <div className="field">
          <label>profiles</label>
          <div className="chip-row">
            {cfg.profiles.map((p) => (
              <button
                key={p.name}
                className={p.name === profile.name ? "chip active" : "chip"}
                onClick={() => selectProfile(p.name)}
              >
                {p.name}
              </button>
            ))}
            <button className="chip add" onClick={addProfile}>
              + new
            </button>
          </div>
          <p className="hint">
            The selected profile is what dictation uses. Everything below edits
            it.
          </p>
        </div>

        <div className="field">
          <label>profile name</label>
          <div className="field-row">
            <input
              value={nameDraft}
              onChange={(e) => setNameDraft(e.currentTarget.value)}
              onBlur={commitRename}
              onKeyDown={(e) => {
                if (e.key === "Enter") e.currentTarget.blur();
              }}
              spellCheck={false}
            />
            <button
              className="btn ghost"
              disabled={cfg.profiles.length < 2}
              onClick={deleteProfile}
            >
              delete
            </button>
          </div>
        </div>

        <div className="field">
          <label>backend</label>
          <div className="segmented">
            <button
              className={!isCli ? "seg active" : "seg"}
              onClick={() => switchBackend(false)}
            >
              api key
            </button>
            <button
              className={isCli ? "seg active" : "seg"}
              onClick={() => switchBackend(true)}
            >
              cli tool
            </button>
          </div>
          <p className="hint">
            {isCli
              ? "Runs an installed CLI agent with your existing login. No API keys needed."
              : "Calls the provider HTTP API directly using a key from your environment."}
          </p>
        </div>

        <div className="field">
          <label>provider</label>
          <div className="segmented">
            {providers.map((p) => (
              <button
                key={p.id}
                className={profile.provider === p.id ? "seg active" : "seg"}
                onClick={() =>
                  patchProfile({ provider: p.id, model: p.defaultModel })
                }
              >
                {p.label}
              </button>
            ))}
          </div>
          {isCli ? (
            providerDef.bin ? (
              <p className="hint">
                Uses the <code>{providerDef.bin}</code> binary from your PATH{" "}
                {ready === true ? (
                  <span className="ok-text">— found</span>
                ) : ready === false ? (
                  <span className="error-text">— not found in PATH</span>
                ) : null}
              </p>
            ) : (
              <p className="hint">
                Any shell command. The full prompt arrives on stdin; print only
                the rewritten text to stdout.
              </p>
            )
          ) : providerDef.keyVar ? (
            <p className="hint">
              Reads the key from{" "}
              <code>{profile.api_key_env || providerDef.keyVar}</code>{" "}
              {ready === true ? (
                <span className="ok-text">— found</span>
              ) : ready === false ? (
                <span className="error-text">
                  — not set. Export it in your shell profile and restart mutterbox.
                </span>
              ) : null}
            </p>
          ) : (
            <p className="hint">Talks to a local ollama server. No key needed.</p>
          )}
        </div>

        {profile.provider === "custom-cli" && (
          <div className="field">
            <label>command</label>
            <input
              value={profile.cli_command}
              placeholder='e.g. llm -m gpt-4o-mini  (prompt arrives on stdin)'
              onChange={(e) => patchProfile({ cli_command: e.currentTarget.value })}
              spellCheck={false}
            />
            <p className="hint">
              Runs via <code>sh -c</code>. Must exit 0 and print only the result.
            </p>
          </div>
        )}

        {profile.provider !== "custom-cli" && (
          <div className="field">
            <label>
              model {isCli && <span className="optional">(optional)</span>}
            </label>
            <input
              value={profile.model}
              placeholder={isCli ? "CLI default" : ""}
              onChange={(e) => patchProfile({ model: e.currentTarget.value })}
              spellCheck={false}
            />
            <p className="hint">e.g. {providerDef.modelHint}</p>
          </div>
        )}

        {(profile.provider === "openai" || profile.provider === "ollama") && (
          <div className="field">
            <label>base url</label>
            <input
              value={profile.base_url}
              placeholder={
                profile.provider === "ollama"
                  ? "http://localhost:11434/v1"
                  : "https://api.openai.com/v1"
              }
              onChange={(e) => patchProfile({ base_url: e.currentTarget.value })}
              spellCheck={false}
            />
            <p className="hint">
              Any OpenAI-compatible endpoint works: OpenAI, OpenRouter, llama.cpp
              server, vLLM, LM Studio.
            </p>
          </div>
        )}

        {!isCli && profile.provider !== "ollama" && (
          <div className="field">
            <label>custom key variable (optional)</label>
            <input
              value={profile.api_key_env}
              placeholder={providerDef.keyVar || "not needed"}
              onChange={(e) => patchProfile({ api_key_env: e.currentTarget.value })}
              spellCheck={false}
            />
            <p className="hint">
              Name of an environment variable to read the API key from, if not the
              default. Keys are never stored by mutterbox.
            </p>
          </div>
        )}

        <div className="field">
          <label>instructions</label>
          <textarea
            rows={7}
            value={profile.instructions}
            onChange={(e) => patchProfile({ instructions: e.currentTarget.value })}
          />
          <p className="hint">
            Style guidance only. mutterbox always instructs the model to rewrite
            your transcript and never respond to it, so if you dictate a
            question you get the polished question back, not an answer. Use this
            field for tone and format: summaries, bullet points, email voice,
            translation.
          </p>
        </div>
      </div>
    </section>
  );
}