import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useSettings } from "../settings";
import { useAuth } from "../auth";
import { useToast } from "../toast";
import { api } from "../api";
import Icon from "../components/Icon";
import PolicyCard from "./settings/PolicyCard";
import Bankanbindung from "./settings/Bankanbindung";
import Postfaecher from "./settings/Postfaecher";
import RestoreCard from "./settings/RestoreCard";

// Der Anteil des Schirms, ab dem ein Abschnitt als „der, den man gerade liest"
// gilt. Ein Viertel von oben – nicht die Oberkante, sonst springt die Marke
// schon, während der vorige Abschnitt noch fast ganz zu sehen ist.
const LESEGRENZE = 0.25;

export default function Settings() {
  const { t } = useTranslation();
  const s = useSettings();
  const { isAdmin } = useAuth();
  const toast = useToast();
  const [flagged, setFlagged] = useState([]);
  const [aktiv, setAktiv] = useState(null);
  // Angeklickter Abschnitt. Solange er gesetzt ist, hat der Klick Vorrang vor
  // der Bildlaufposition: Ein kurzer Abschnitt am Seitenende bringt die Seite
  // ans Ende, und die Seitenende-Regel unten würde sonst einen anderen Punkt
  // markieren als den, den man gerade angeklickt hat.
  const gewaehlt = useRef(null);

  async function ladenFlagged() {
    try { setFlagged(await api.flaggedKeywords()); }
    catch { /* still ignorieren – nicht kritisch für die Einstellungen */ }
  }
  useEffect(() => { ladenFlagged(); }, []);

  // Die Leiste wird aus derselben Liste gebaut wie die Abschnitte. So kann
  // kein Punkt entstehen, der ins Leere zeigt.
  const abschnitte = useMemo(() => [
    { id: "allgemein", label: t("settings.general"), icon: "settings" },
    flagged.length > 0
      && { id: "schlagwoerter", label: t("settings.keywordReview"), icon: "alert" },
    { id: "bankanbindung", label: t("bank.title"), icon: "landmark" },
    { id: "postfaecher", label: t("mailbox.title"), icon: "mail" },
    { id: "sicherung", label: t("settings.backup"), icon: "download" },
    { id: "wiederherstellen", label: t("restore.title"), icon: "upload" },
    isAdmin && { id: "richtlinien", label: t("policy.title"), icon: "lock" },
  ].filter(Boolean), [flagged.length, isAdmin, t]);

  // Welcher Abschnitt gerade gelesen wird. Bewusst über die Bildlaufposition
  // und nicht per IntersectionObserver: Ein kurzer letzter Abschnitt erreicht
  // die Lesegrenze nie und bliebe in der Leiste sonst dauerhaft unmarkiert.
  useEffect(() => {
    function beiScroll() {
      if (gewaehlt.current !== null) return;
      const grenze = window.innerHeight * LESEGRENZE;
      let treffer = abschnitte[0]?.id ?? null;
      for (const a of abschnitte) {
        const el = document.getElementById(a.id);
        if (el && el.getBoundingClientRect().top <= grenze) treffer = a.id;
      }
      // Am Seitenende gewinnt immer der letzte Abschnitt.
      if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2) {
        treffer = abschnitte[abschnitte.length - 1]?.id ?? treffer;
      }
      setAktiv(treffer);
    }
    // Eigenes Scrollen des Nutzers hebt die Vorauswahl wieder auf. An diesen
    // Ereignissen und nicht an „scroll", weil der Sprung selbst scrollt.
    function beiEigenemScrollen() {
      gewaehlt.current = null;
      beiScroll();
    }

    beiScroll();
    window.addEventListener("scroll", beiScroll, { passive: true });
    window.addEventListener("resize", beiScroll);
    window.addEventListener("wheel", beiEigenemScrollen, { passive: true });
    window.addEventListener("touchmove", beiEigenemScrollen, { passive: true });
    window.addEventListener("keydown", beiEigenemScrollen);
    return () => {
      window.removeEventListener("scroll", beiScroll);
      window.removeEventListener("resize", beiScroll);
      window.removeEventListener("wheel", beiEigenemScrollen);
      window.removeEventListener("touchmove", beiEigenemScrollen);
      window.removeEventListener("keydown", beiEigenemScrollen);
    };
  }, [abschnitte]);

  const springe = useCallback((id) => {
    const el = document.getElementById(id);
    if (!el) return;
    gewaehlt.current = id;
    setAktiv(id);
    // Bei „Bewegung reduzieren" NICHT sanft scrollen: Der Browser führt einen
    // sanften Bildlauf dann gar nicht aus, und der Sprung ginge ins Leere.
    const ruhig = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    el.scrollIntoView({ behavior: ruhig ? "auto" : "smooth", block: "start" });
    // Adresse mitführen, aber ohne History-Eintrag: Sonst müsste man nach
    // fünf Klicks fünfmal zurück, um die Seite zu verlassen.
    window.history.replaceState(null, "", `#${id}`);
  }, []);

  // Direktverweis (/settings#bankanbindung). Zweiter Versuch nach kurzer Zeit,
  // weil Bankanbindung und Postfächer ihre Inhalte nachladen und die Seite
  // dabei noch wächst – der erste Sprung landete sonst zu weit oben.
  useEffect(() => {
    const id = decodeURIComponent(window.location.hash.slice(1));
    if (!id) return;
    const hin = () => document.getElementById(id)?.scrollIntoView({ block: "start" });
    hin();
    const uhr = setTimeout(hin, 300);
    return () => clearTimeout(uhr);
  }, []);

  async function keywordBehalten(id) {
    try { await api.confirmKeyword(id); setFlagged((f) => f.filter((x) => x.id !== id)); }
    catch (err) { toast(err.message, "error"); }
  }
  async function keywordEntfernen(id) {
    try { await api.deleteKeyword(id); setFlagged((f) => f.filter((x) => x.id !== id)); }
    catch (err) { toast(err.message, "error"); }
  }

  async function set(key, value) {
    try {
      await s.update(key, value);
      toast(t("settings.saved"));
    } catch (err) {
      toast(err.message, "error");
    }
  }

  async function dl(fn) {
    try {
      await fn();
    } catch (err) {
      toast(err.message, "error");
    }
  }

  return (
    <div>
      <h1>{t("settings.title")}</h1>

      <div className="settings-layout">
        <nav className="settings-nav" aria-label={t("settings.sections")}>
          <ul>
            {abschnitte.map((a) => (
              <li key={a.id}>
                <a
                  href={`#${a.id}`}
                  className={aktiv === a.id ? "active" : ""}
                  aria-current={aktiv === a.id ? "true" : undefined}
                  onClick={(e) => { e.preventDefault(); springe(a.id); }}
                >
                  <Icon name={a.icon} size={15} />
                  <span className="ellipsis">{a.label}</span>
                </a>
              </li>
            ))}
          </ul>
        </nav>

        <div className="settings-inhalt">
          <section id="allgemein" className="settings-section">
            <div className="card">
              <h2 style={{ marginTop: 0 }}>{t("settings.general")}</h2>
              <label>
                <span>{t("settings.baseCurrency")}</span>
                <select value={s.base_currency} onChange={(e) => set("base_currency", e.target.value)}>
                  <option value="EUR">Euro (EUR)</option>
                  <option value="CHF">Schweizer Franken (CHF)</option>
                </select>
              </label>
              <p className="muted small" style={{ marginTop: -8 }}>{t("settings.baseCurrencyHint")}</p>

              <label>
                <span>{t("settings.locale")}</span>
                <select value={s.locale} onChange={(e) => set("locale", e.target.value)}>
                  <option value="de">{t("settings.languageDe")}</option>
                  <option value="en">{t("settings.languageEn")}</option>
                </select>
              </label>

              <label>
                <span>{t("settings.theme")}</span>
                <select value={s.theme} onChange={(e) => set("theme", e.target.value)}>
                  <option value="system">{t("settings.themeSystem")}</option>
                  <option value="light">{t("settings.themeLight")}</option>
                  <option value="dark">{t("settings.themeDark")}</option>
                </select>
              </label>

              <label>
                <span>{t("settings.budgetStartDay")}</span>
                <input
                  type="number"
                  min="1"
                  max="31"
                  value={s.budget_start_day}
                  onChange={(e) => {
                    const day = Math.max(1, Math.min(31, Number(e.target.value) || 1));
                    set("budget_start_day", String(day));
                  }}
                />
              </label>
              <p className="muted small" style={{ marginTop: -8 }}>{t("settings.budgetStartDayHint")}</p>
            </div>
          </section>

          {flagged.length > 0 && (
            <section id="schlagwoerter" className="settings-section">
              <div className="card" style={{ borderColor: "var(--danger)" }}>
                <h2 style={{ display: "flex", alignItems: "center", gap: "var(--sp-2)", marginTop: 0 }}>
                  <Icon name="alert" size={18} /> {t("settings.keywordReview")}
                </h2>
                <p className="muted small">{t("settings.keywordReviewHint")}</p>
                {flagged.map((f) => (
                  <div className="kw-flag" key={f.id}>
                    <div className="kw-flag-main">
                      <div className="ellipsis">
                        <span className="kw-flag-word">{f.word}</span>
                        <Icon name="chevron-right" size={12} /> {f.category_name}
                      </div>
                      <div className="muted small">
                        {t("settings.keywordCorrected", {
                          overridden: f.overridden_count, applied: f.applied_count,
                        })}
                      </div>
                    </div>
                    <button className="btn sm" onClick={() => keywordBehalten(f.id)}>{t("settings.keep")}</button>
                    <button className="btn sm danger" onClick={() => keywordEntfernen(f.id)}>{t("settings.remove")}</button>
                  </div>
                ))}
              </div>
            </section>
          )}

          <section id="bankanbindung" className="settings-section"><Bankanbindung /></section>
          <section id="postfaecher" className="settings-section"><Postfaecher /></section>

          <section id="sicherung" className="settings-section">
            <div className="card">
              <h2 style={{ marginTop: 0 }}>{t("settings.backup")}</h2>
              <p className="muted small">{t("settings.backupHint")}</p>
              <button className="btn primary" onClick={() => dl(api.exportBackupJson)}>
                <Icon name="download" size={15} /> {t("settings.exportBackup")}
              </button>

              <p className="muted small" style={{ marginTop: "var(--sp-4)" }}>{t("settings.exportHint")}</p>
              <div className="field-inline" style={{ flexWrap: "wrap" }}>
                <button className="btn" onClick={() => dl(api.exportTransactionsCsv)}>
                  <Icon name="download" size={15} /> {t("settings.exportTxnCsv")}
                </button>
                <button className="btn" onClick={() => dl(api.exportTransactionsJson)}>
                  <Icon name="download" size={15} /> {t("settings.exportTxnJson")}
                </button>
                <button className="btn" onClick={() => dl(api.exportAllJson)}>
                  <Icon name="download" size={15} /> {t("settings.exportAll")}
                </button>
              </div>

              {isAdmin && (
                <>
                  <p className="muted small" style={{ marginTop: "var(--sp-4)" }}>{t("settings.dbBackupHint")}</p>
                  <div className="field-inline" style={{ flexWrap: "wrap" }}>
                    <button className="btn" onClick={() => dl(api.downloadDbBackup)}>
                      <Icon name="download" size={15} /> {t("settings.dbBackup")}
                    </button>
                    <button className="btn" onClick={() => dl(api.exportSystemBackupJson)}>
                      <Icon name="download" size={15} /> {t("settings.systemBackup")}
                    </button>
                  </div>
                  <div className="alert warn" style={{ marginTop: "var(--sp-3)" }}>
                    <Icon name="alert" size={16} />
                    <span>{t("settings.systemBackupWarning")}</span>
                  </div>
                </>
              )}
            </div>
          </section>

          <section id="wiederherstellen" className="settings-section"><RestoreCard /></section>

          {isAdmin && (
            <section id="richtlinien" className="settings-section"><PolicyCard /></section>
          )}
        </div>
      </div>
    </div>
  );
}