import { useEffect, useState } from "react";

import type { DefaultAgentTerminalInterface } from "@/ports";
import { Panel, Spinner } from "@/shared";
import { useGateways } from "@/app/di";
import { useI18n } from "@/i18n";

const choices: Array<{ value: DefaultAgentTerminalInterface; label: string }> = [
  { value: "nativeTui", label: "TUI native" },
  { value: "ideaCli", label: "CLI IdeA" },
];

export function TerminalSettings() {
  const { userSettings } = useGateways();
  const { t } = useI18n();
  const [value, setValue] = useState<DefaultAgentTerminalInterface>("nativeTui");
  const [busy, setBusy] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    setBusy(true);
    userSettings
      .readUserSettings()
      .then((settings) => {
        if (!cancelled) {
          setValue(settings.defaultAgentTerminalInterface ?? "nativeTui");
          setError(null);
        }
      })
      .catch(() => {
        if (!cancelled) setError(t("settings.terminal.loadError"));
      })
      .finally(() => {
        if (!cancelled) setBusy(false);
      });
    return () => {
      cancelled = true;
    };
  }, [userSettings, t]);

  async function select(next: DefaultAgentTerminalInterface) {
    const previous = value;
    setValue(next);
    setBusy(true);
    setError(null);
    try {
      const saved = await userSettings.updateUserSettings({
        defaultAgentTerminalInterface: next,
      });
      setValue(saved.defaultAgentTerminalInterface ?? "nativeTui");
    } catch {
      setValue(previous);
      setError(t("settings.terminal.saveError"));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Panel title="Terminal" className="flex flex-col gap-4 p-4">
      <fieldset disabled={busy} className="flex flex-col gap-3">
        <legend className="text-sm font-semibold text-content">
          {t("settings.terminal.default")}
        </legend>
        <div className="flex flex-col gap-2">
          {choices.map((choice) => (
            <label key={choice.value} className="flex items-center gap-2 text-sm text-content">
              <input
                type="radio"
                name="default-agent-terminal-interface"
                value={choice.value}
                checked={value === choice.value}
                onChange={() => void select(choice.value)}
              />
              {choice.label}
            </label>
          ))}
        </div>
        <p className="text-xs text-muted">
          {t("settings.terminal.help")}
        </p>
      </fieldset>
      {busy && <Spinner size={14} />}
      {error && <p role="alert" className="text-sm text-danger">{error}</p>}
    </Panel>
  );
}