// Settings — préférences globales (appliquées à tous les écrans en temps réel via WS)

function SettingsRow({ label, desc, value, onChange, type = "switch" }) {
  return (
    <div className={"settings-row" + (type !== "switch" ? " settings-row--block" : "")}>
      <div className="settings-row__label">
        <div className="settings-row__title">{label}</div>
        {desc && <div className="settings-row__desc">{desc}</div>}
      </div>
      {type === "switch" && (
        <button
          type="button"
          role="switch"
          aria-checked={value}
          className={"settings-switch" + (value ? " settings-switch--on" : "")}
          onClick={() => onChange(!value)}
        >
          <span className="settings-switch__knob" />
        </button>
      )}
      {type === "text" && (
        <input
          className="form-input settings-input"
          value={value || ""}
          onChange={(e) => onChange(e.target.value)}
        />
      )}
      {type === "textarea" && (
        <textarea
          className="form-input settings-textarea"
          rows={Math.max(3, Array.isArray(value) ? value.length : 3)}
          value={Array.isArray(value) ? value.join("\n") : (value || "")}
          onChange={(e) => onChange(e.target.value.split(/\r?\n/).filter(Boolean))}
        />
      )}
    </div>
  );
}

function Settings({ pushActivity }) {
  const [loading, setLoading] = React.useState(true);
  const [settings, setSettings] = React.useState({});
  const [saving, setSaving] = React.useState(null);
  const [toast, setToast] = React.useState(null);

  const load = async () => {
    try {
      const r = await fetch("/api/settings");
      setSettings(await r.json());
    } catch (e) {
      console.error("[settings] load fail", e);
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => {
    load();
    // Écoute les updates WS
    const onWs = (ev) => {
      const m = ev.detail;
      if (m && m.type === "settings.changed" && m.all) {
        setSettings(m.all);
      }
    };
    window.addEventListener("elsia:ws", onWs);
    return () => window.removeEventListener("elsia:ws", onWs);
  }, []);

  const update = async (key, value) => {
    setSaving(key);
    try {
      const r = await fetch(`/api/settings/${key}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ value }),
      });
      const j = await r.json();
      if (!r.ok) throw new Error(j.error || "fail");
      setSettings(j.all);
      pushActivity?.({ action: "a modifié", target: `paramètre ${key}`, type: "publish" });
      setToast({ text: `${key.replace("viewer.", "")} → ${value ? "activé" : "désactivé"}`, icon: <Icon.Check size={13} /> });
      setTimeout(() => setToast(null), 2000);
    } catch (e) {
      setToast({ text: `erreur : ${e.message}`, icon: <Icon.AlertTriangle size={13} /> });
      setTimeout(() => setToast(null), 3000);
    } finally {
      setSaving(null);
    }
  };

  if (loading) {
    return (
      <div className="pane">
        <header className="pane__header">
          <div className="pane__title-group">
            <span className="pane__crumb">Régie · Préférences</span>
            <h1 className="pane__title">Paramètres</h1>
          </div>
        </header>
        <div className="pane__body" style={{ color: "var(--text-muted)", fontSize: 13 }}>Chargement…</div>
      </div>
    );
  }

  const toggles = [
    { key: "viewer.show_footer",       label: "Barre du bas",       desc: "Bandeau INFOS qui défile en bas du viewer" },
    { key: "viewer.show_clock",        label: "Horloge",            desc: "Heure et date dans le coin du viewer" },
    { key: "viewer.show_logo",         label: "Logo ELSIA",         desc: "Logo ELSIA en filigrane" },
    { key: "viewer.show_weather",      label: "Widget météo",       desc: "Petite température affichée à droite du bandeau INFOS" },
    { key: "viewer.show_corner_label", label: "Étiquettes de coin", desc: "DOCUMENT / KPI / etc. en haut à droite de chaque tuile" },
    { key: "viewer.show_zone_letter",  label: "Lettre de zone",     desc: "Pastille A/B/C/D des zones du mur" },
  ];

  return (
    <div className="pane">
      <header className="pane__header">
        <div className="pane__title-group">
          <span className="pane__crumb">Régie · Préférences</span>
          <h1 className="pane__title">Paramètres</h1>
        </div>
      </header>

      <div className="pane__body">
        <div className="card">
          <div className="card__header">
            <div className="card__title">Contenu du viewer</div>
            <span className="card__title-sub">Texte du bandeau bas + ville météo</span>
          </div>
          <div className="settings-list">
            <SettingsRow
              type="text"
              label="Ville météo"
              desc="Utilisée pour récupérer la température affichée dans le bandeau INFOS. wttr.in"
              value={settings["viewer.weather_city"]}
              onChange={(v) => update("viewer.weather_city", v)}
            />
            <SettingsRow
              type="textarea"
              label="Messages du bandeau INFOS"
              desc="Un message par ligne. Affichés en boucle dans le bandeau qui défile."
              value={settings["viewer.ticker_messages"]}
              onChange={(v) => update("viewer.ticker_messages", v)}
            />
          </div>
        </div>

        <div className="card" style={{ marginTop: 16 }}>
          <div className="card__header">
            <div className="card__title">Affichage viewer</div>
            <span className="card__title-sub">Appliqué à tous les écrans en temps réel</span>
          </div>
          <div className="settings-list">
            {toggles.map(o => (
              <SettingsRow
                key={o.key}
                label={o.label}
                desc={o.desc}
                value={!!settings[o.key]}
                onChange={(v) => update(o.key, v)}
              />
            ))}
          </div>
        </div>

        <div className="card" style={{ marginTop: 16 }}>
          <div className="card__header">
            <div className="card__title">Réseau & accès</div>
          </div>
          <div style={{ padding: 16, fontSize: 12.5, color: "var(--text-muted)", display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 16px" }}>
            <strong style={{ color: "var(--text)" }}>URL publique :</strong>
            <span className="mono">{window.location.origin}</span>
            <strong style={{ color: "var(--text)" }}>Backend :</strong>
            <span>Node + Express + SQLite + WebSocket</span>
            <strong style={{ color: "var(--text)" }}>Tunnel :</strong>
            <span>Tailscale Funnel (TLS auto)</span>
          </div>
        </div>
      </div>

      {toast && <div className="toast">{toast.icon}{toast.text}</div>}
    </div>
  );
}

window.Settings = Settings;