import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppStore } from "../../../stores/useAppStore";
import { setAppSetting } from "../../../services/tauri";
import styles from "../Settings.module.css";

type GutterBase = "head" | "merge_base";

export function EditorSettings() {
  const { t } = useTranslation("settings");
  const editorGitGutterBase = useAppStore((s) => s.editorGitGutterBase);
  const setEditorGitGutterBase = useAppStore((s) => s.setEditorGitGutterBase);
  const minimapEnabled = useAppStore((s) => s.editorMinimapEnabled);
  const setMinimapEnabled = useAppStore((s) => s.setEditorMinimapEnabled);
  const revealActiveFileInTree = useAppStore((s) => s.revealActiveFileInTree);
  const setRevealActiveFileInTree = useAppStore(
    (s) => s.setRevealActiveFileInTree,
  );
  const [error, setError] = useState<string | null>(null);
  // Lock controls while a persistence write is in flight. Without this,
  // a rapid sequence whose writes reject in interleaved order would have
  // a later catch roll the store back to a stale value even though the
  // persisted value never went there — the UI would then disagree with
  // disk until the app is restarted. Shared across the radios and the
  // minimap toggle so concurrent writes can't race each other either.
  const [pending, setPending] = useState(false);

  const handleChange = async (value: GutterBase) => {
    if (pending) return;
    const previous = editorGitGutterBase;
    setEditorGitGutterBase(value);
    setPending(true);
    try {
      setError(null);
      await setAppSetting("editor_git_gutter_base", value);
    } catch (e) {
      setEditorGitGutterBase(previous);
      setError(String(e));
    } finally {
      setPending(false);
    }
  };

  const handleMinimapToggle = async () => {
    if (pending) return;
    const next = !minimapEnabled;
    setMinimapEnabled(next);
    setPending(true);
    try {
      setError(null);
      await setAppSetting("editor_minimap_enabled", next ? "true" : "false");
    } catch (e) {
      setMinimapEnabled(!next);
      setError(String(e));
    } finally {
      setPending(false);
    }
  };

  const handleRevealActiveFileToggle = async () => {
    if (pending) return;
    const next = !revealActiveFileInTree;
    setRevealActiveFileInTree(next);
    setPending(true);
    try {
      setError(null);
      await setAppSetting(
        "editor_reveal_active_file_in_tree",
        next ? "true" : "false",
      );
    } catch (e) {
      setRevealActiveFileInTree(!next);
      setError(String(e));
    } finally {
      setPending(false);
    }
  };

  return (
    <div>
      <h2 className={styles.sectionTitle}>{t("editor_title")}</h2>

      {error && <div className={styles.error}>{error}</div>}

      <div className={styles.fieldGroup}>
        <div className={styles.fieldLabel}>{t("editor_gutter_base_label")}</div>
        <div className={`${styles.fieldHint} ${styles.fieldHintSpacedWide}`}>
          {t("editor_gutter_base_desc")}
        </div>

        <label className={styles.radioLabel}>
          <input
            type="radio"
            name="editor-gutter-base"
            checked={editorGitGutterBase === "head"}
            disabled={pending}
            onChange={() => handleChange("head")}
          />
          <div>
            <div>{t("editor_gutter_base_head")}</div>
            <div className={styles.fieldHint}>
              {t("editor_gutter_base_head_desc")}
            </div>
          </div>
        </label>

        <label className={styles.radioLabel}>
          <input
            type="radio"
            name="editor-gutter-base"
            checked={editorGitGutterBase === "merge_base"}
            disabled={pending}
            onChange={() => handleChange("merge_base")}
          />
          <div>
            <div>{t("editor_gutter_base_merge_base")}</div>
            <div className={styles.fieldHint}>
              {t("editor_gutter_base_merge_base_desc")}
            </div>
          </div>
        </label>
      </div>

      <div className={styles.settingRow}>
        <div className={styles.settingInfo}>
          <div className={styles.settingLabel}>{t("editor_minimap_label")}</div>
          <div className={styles.settingDescription}>
            {t("editor_minimap_desc")}
          </div>
        </div>
        <div className={styles.settingControl}>
          <button
            className={styles.toggle}
            role="switch"
            aria-checked={minimapEnabled}
            aria-label={t("editor_minimap_label")}
            aria-disabled={pending}
            data-checked={minimapEnabled}
            disabled={pending}
            onClick={handleMinimapToggle}
          >
            <div className={styles.toggleKnob} />
          </button>
        </div>
      </div>

      <div className={styles.settingRow}>
        <div className={styles.settingInfo}>
          <div className={styles.settingLabel}>
            {t("editor_reveal_active_file_label")}
          </div>
          <div className={styles.settingDescription}>
            {t("editor_reveal_active_file_desc")}
          </div>
        </div>
        <div className={styles.settingControl}>
          <button
            className={styles.toggle}
            role="switch"
            aria-checked={revealActiveFileInTree}
            aria-label={t("editor_reveal_active_file_label")}
            aria-disabled={pending}
            data-checked={revealActiveFileInTree}
            disabled={pending}
            onClick={handleRevealActiveFileToggle}
          >
            <div className={styles.toggleKnob} />
          </button>
        </div>
      </div>
    </div>
  );
}
