import React, { useState, useEffect } from "react";

const api = window.api;

export function ModelSettings() {
  // null = not yet loaded from DB
  const [model, setModel] = useState<string | null>(null);
  const [draft, setDraft] = useState("");
  const [saveStatus, setSaveStatus] = useState<"idle" | "saved">("idle");

  useEffect(() => {
    api.getSettings(["model"]).then((settings) => {
      const saved = settings["model"] ?? "";
      setModel(saved);
      setDraft(saved);
    });
  }, []);

  const handleSave = async () => {
    const trimmed = draft.trim();
    if (trimmed) {
      await api.setSetting("model", trimmed);
      setModel(trimmed);
    } else {
      await api.deleteSetting("model");
      setModel("");
    }
    setSaveStatus("saved");
    setTimeout(() => setSaveStatus("idle"), 1500);
  };

  const handleReset = async () => {
    await api.deleteSetting("model");
    setModel("");
    setDraft("");
    setSaveStatus("saved");
    setTimeout(() => setSaveStatus("idle"), 1500);
  };

  if (model === null) {
    return (
      <div style={{ color: "var(--text-secondary)", fontSize: 12 }}>
        Loading...
      </div>
    );
  }

  const isDirty = draft.trim() !== model;

  return (
    <div>
      <div className="settings-section-title">Model</div>
      <div className="settings-section-desc">
        Claude model to use for all phases. Leave blank to use the SDK&apos;s
        default model. Takes effect on the next message sent in any session.
      </div>

      <div className="settings-toggle-row">
        <input
          className="settings-model-input"
          type="text"
          value={draft}
          placeholder="Default (e.g. claude-sonnet-4-5)"
          onChange={(e) => {
            setDraft(e.target.value);
            setSaveStatus("idle");
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") handleSave();
          }}
          spellCheck={false}
        />
      </div>

      <div className="settings-actions">
        {model && (
          <button className="btn-secondary" onClick={handleReset}>
            Reset to Default
          </button>
        )}
        <button
          className="btn-primary"
          onClick={handleSave}
          disabled={!isDirty}
        >
          {saveStatus === "saved" ? "Saved \u2713" : "Save"}
        </button>
        {model && (
          <span className="settings-custom-badge">custom</span>
        )}
      </div>
    </div>
  );
}