import { useEffect, useState } from "react";
import { get, put } from "../../api";
import { confirmDialog, toast } from "../../dialogs";
import { useFetch } from "../../hooks";
import { useT } from "../../i18n";
import { Icon } from "../Icon";
import { ModelSelect } from "../ModelSelect";
import { ToolPicker, type ToolInfo } from "./AgentsEditor";

interface Mode {
  description?: string | null;
  prompt?: string | null;
  model?: string | null;
  tools?: string[] | null;
  read_only?: boolean | null;
  style?: "coding" | "chat" | null;
}

/** Modes a user creates for themselves; they appear in New session and the mode selector. */
export function PersonalModes() {
  const t = useT();
  const tools = useFetch<ToolInfo[]>("/agents/tools").data ?? [];
  const [modes, setModes] = useState<Record<string, Mode>>();
  const [open, setOpen] = useState<string>();
  const [name, setName] = useState("");

  useEffect(() => {
    get<Record<string, Mode>>("/account/modes")
      .then(setModes)
      .catch((e) => toast(e));
  }, []);

  const save = async (next: Record<string, Mode>) => {
    try {
      setModes(await put<Record<string, Mode>>("/account/modes", next));
      toast(t("settings.saved"), "success");
      return true;
    } catch (e) {
      toast(e);
      return false;
    }
  };

  const add = async () => {
    const n = name.trim();
    if (!/^[a-zA-Z0-9_-]+$/.test(n)) return toast(t("settings.invalidName"));
    if (modes?.[n]) return toast(t("modes.exists", { name: n }));
    if (await save({ ...modes, [n]: { style: "chat", description: "", prompt: "" } })) {
      setName("");
      setOpen(n);
    }
  };

  const remove = async (n: string) => {
    if (!(await confirmDialog({ message: t("agents.deleteConfirm", { name: n }), danger: true, confirmLabel: t("common.delete") }))) return;
    const next = { ...modes };
    delete next[n];
    void save(next);
  };

  if (!modes) return <div className="empty">{t("common.loading")}</div>;
  const names = Object.keys(modes).sort();
  return (
    <>
      <div className="notice">{t("modes.intro")}</div>
      {names.map((n) => (
        <ModeRow key={n + JSON.stringify(modes[n])} name={n} mode={modes[n]} tools={tools} open={open === n} onToggle={() => setOpen(open === n ? undefined : n)} onSave={(m) => save({ ...modes, [n]: m })} onRemove={() => remove(n)} />
      ))}
      {names.length === 0 && <div className="empty">{t("modes.none")}</div>}
      <div className="panel">
        <h3>{t("agents.addMode")}</h3>
        <div className="row">
          <input placeholder={t("settings.name")} value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && void add()} />
          <button className="primary" onClick={() => void add()} disabled={!name.trim()}>
            + {t("agents.addMode")}
          </button>
        </div>
      </div>
    </>
  );
}

function ModeRow({ name, mode, tools, open, onToggle, onSave, onRemove }: { name: string; mode: Mode; tools: ToolInfo[]; open: boolean; onToggle: () => void; onSave: (m: Mode) => Promise<boolean>; onRemove: () => void }) {
  const t = useT();
  const [form, setForm] = useState({
    description: mode.description ?? "",
    prompt: mode.prompt ?? "",
    model: mode.model ?? "",
    tools: mode.tools ?? [],
    read_only: !!mode.read_only,
    style: (mode.style ?? "coding") as "coding" | "chat",
  });
  const submit = () =>
    void onSave({
      description: form.description || null,
      prompt: form.prompt || null,
      model: form.model || null,
      tools: form.tools.length ? form.tools : null,
      read_only: form.read_only || null,
      style: form.style === "chat" ? "chat" : null,
    });
  return (
    <div className="panel">
      <h3>
        {name}
        <span className="chip">{form.style === "chat" ? t("agents.styleChatShort") : t("agents.styleCodingShort")}</span>
        {form.read_only && <span className="chip">{t("agents.readOnly")}</span>}
        <span className="spacer" />
        <button className="small ghost danger" onClick={onRemove} title={t("common.delete")} aria-label={t("common.delete")}>
          <Icon name="trash" />
        </button>
        <button className="small" onClick={onToggle}>
          {open ? t("common.collapse") : t("common.edit")}
        </button>
      </h3>
      {!open && mode.description && <div className="hint">{mode.description}</div>}
      {open && (
        <>
          <div className="form">
            <label>{t("agents.description")}</label>
            <input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
            <label>{t("agents.style")}</label>
            <select value={form.style} onChange={(e) => setForm({ ...form, style: e.target.value as "coding" | "chat" })}>
              <option value="coding">{t("agents.styleCoding")}</option>
              <option value="chat">{t("agents.styleChat")}</option>
            </select>
            <label>{t("agents.model")}</label>
            <ModelSelect value={form.model} onChange={(v) => setForm({ ...form, model: v })} emptyLabel={t("agents.sessionModel")} />
            <label>{t("agents.readOnlyLabel")}</label>
            <label className="row" style={{ gap: 6, alignItems: "center" }}>
              <input type="checkbox" checked={form.read_only} onChange={(e) => setForm({ ...form, read_only: e.target.checked })} />
              <span className="hint">{t("agents.readOnlyHint")}</span>
            </label>
            <label>{t("agents.tools")}</label>
            <ToolPicker tools={tools} value={form.tools} onChange={(v) => setForm({ ...form, tools: v })} readOnly={form.read_only} />
            <label>{t("agents.prompt")}</label>
            <textarea rows={8} value={form.prompt} placeholder={t("modes.promptPlaceholder")} onChange={(e) => setForm({ ...form, prompt: e.target.value })} />
          </div>
          <div className="row" style={{ marginTop: 12 }}>
            <button className="primary" onClick={submit}>
              {t("common.save")}
            </button>
          </div>
        </>
      )}
    </div>
  );
}