// src/settings-panel.jsx — Panel modal completo + sync multi-device.
(() => {
  function SettingsPanel({ onClose }) {
    const { lang } = window.useApp();
    const user = window.Storage.get("user") || { name: "" };
    const settings = window.Storage.get("settings") || {};
    const budget = settings.budget || { monthly: 2500, daily: 80 };

    const [name, setName] = React.useState(user.name || "");
    const [currency, setCurrency] = React.useState(settings.currency || "PEN");
    const [exchangeRate, setExchangeRate] = React.useState(String(settings.exchangeRate || 3.75));
    const [monthlyBudget, setMonthlyBudget] = React.useState(String(budget.monthly || 2500));
    const [dailyBudget, setDailyBudget] = React.useState(String(budget.daily || 80));
    const [error, setError] = React.useState(null);
    const [savedFlash, setSavedFlash] = React.useState(false);
    const [showCsv, setShowCsv] = React.useState(false);

    const [notifEnabled, setNotifEnabled] = React.useState(() => (window.Notif && window.Notif.getPrefs().enabled) || false);
    const [notifPerm, setNotifPerm] = React.useState(() => window.Notif ? window.Notif.permissionState() : "unsupported");
    const [shortcutsToken, setShortcutsToken] = React.useState(settings.shortcutsToken || "");
    const [tokenCopied, setTokenCopied] = React.useState(false);

    const [stravaConn, setStravaConn] = React.useState(() => window.Integrations && window.Integrations.isConnected("strava"));
    const [googleConn, setGoogleConn] = React.useState(() => window.Integrations && window.Integrations.isConnected("google"));
    const [syncStatus, setSyncStatus] = React.useState("");

    // Sync (multi-device)
    const [syncToken, setSyncToken] = React.useState(() => window.Sync && window.Sync.getToken() || "");
    const [syncStatusBadge, setSyncStatusBadge] = React.useState(() => window.Sync && window.Sync.getStatus() || "idle");
    const [syncTokenCopied, setSyncTokenCopied] = React.useState(false);
    const [pasteTokenInput, setPasteTokenInput] = React.useState("");

    React.useEffect(() => {
      if (!window.Sync) return;
      return window.Sync.subscribe(() => {
        setSyncToken(window.Sync.getToken() || "");
        setSyncStatusBadge(window.Sync.getStatus());
      });
    }, []);

    async function toggleNotifications() {
      if (notifEnabled) { window.Notif.disable(); setNotifEnabled(false); }
      else {
        const ok = await window.Notif.enable();
        setNotifEnabled(ok); setNotifPerm(window.Notif.permissionState());
        if (!ok) setError(lang === "es" ? "Permiso denegado." : "Permission denied.");
      }
    }

    function regenerateToken() {
      if (shortcutsToken && !window.confirm(lang === "es" ? "Regenerar token?" : "Regenerate?")) return;
      const newToken = window.ShortcutsSync.generateToken();
      window.ShortcutsSync.setToken(newToken);
      setShortcutsToken(newToken);
    }
    function copyToken() {
      if (!shortcutsToken) return;
      navigator.clipboard.writeText(shortcutsToken).then(() => { setTokenCopied(true); setTimeout(() => setTokenCopied(false), 2000); });
    }

    async function connectStrava() {
      setSyncStatus(lang === "es" ? "Abriendo Strava..." : "Opening Strava...");
      try {
        await window.Integrations.strava.startAuth();
        setStravaConn(true);
        const r = await window.Integrations.strava.syncActivities(15);
        setSyncStatus(lang === "es" ? `${r.added || 0} entrenos importados` : `${r.added || 0} workouts imported`);
        setTimeout(() => setSyncStatus(""), 3000);
      } catch (e) { setSyncStatus("Error: " + e.message); }
    }
    function disconnectStrava() {
      if (!window.confirm("Desconectar Strava?")) return;
      window.Integrations.strava.disconnect();
      setStravaConn(false);
    }
    async function syncStrava() {
      setSyncStatus("Sync Strava...");
      const r = await window.Integrations.strava.syncActivities(30);
      setSyncStatus(r.error ? "Error: " + r.error : `${r.added || 0} nuevos`);
      setTimeout(() => setSyncStatus(""), 3000);
    }

    async function connectGoogle() {
      setSyncStatus("Opening Google...");
      try {
        await window.Integrations.google.startAuth();
        setGoogleConn(true);
        const r = await window.Integrations.google.syncEvents();
        setSyncStatus(`${r.count || 0} eventos`);
        setTimeout(() => setSyncStatus(""), 3000);
      } catch (e) { setSyncStatus("Error: " + e.message); }
    }
    function disconnectGoogle() {
      if (!window.confirm("Desconectar Google?")) return;
      window.Integrations.google.disconnect();
      setGoogleConn(false);
    }
    async function syncGoogle() {
      setSyncStatus("Sync Google...");
      const r = await window.Integrations.google.syncEvents();
      setSyncStatus(r.error ? "Error: " + r.error : `${r.count || 0} eventos`);
      setTimeout(() => setSyncStatus(""), 3000);
    }

    // ─── SYNC MULTI-DEVICE ─────────────────────────────────────
    function enableSync() {
      const token = window.Sync.enable();
      setSyncToken(token);
      setSyncStatus(lang === "es" ? "Sync activado, subiendo datos..." : "Sync enabled, uploading...");
      setTimeout(() => setSyncStatus(""), 4000);
    }
    function disableSync() {
      if (!window.confirm(lang === "es" ? "Desactivar sync? Tus datos siguen aqui pero ya no sincronizan." : "Disable sync?")) return;
      window.Sync.disable();
      setSyncToken("");
    }
    function copySyncToken() {
      if (!syncToken) return;
      navigator.clipboard.writeText(syncToken).then(() => {
        setSyncTokenCopied(true);
        setTimeout(() => setSyncTokenCopied(false), 2000);
      });
    }
    function applyPastedToken() {
      const t = pasteTokenInput.trim();
      if (!t.startsWith("vida_") || t.length < 30) {
        setError(lang === "es" ? "Token invalido. Debe empezar con 'vida_' y ser largo." : "Invalid token.");
        return;
      }
      if (!window.confirm(lang === "es"
        ? "Esto vinculara este dispositivo a la cuenta del token. Tus datos locales se mezclaran con los del otro device. Continuar?"
        : "This will link this device to the token's account. Continue?")) return;
      window.Sync.enable(t);
      setSyncToken(t);
      setPasteTokenInput("");
      setSyncStatus(lang === "es" ? "Sincronizando..." : "Syncing...");
      window.Sync.pull().then(() => {
        setSyncStatus(lang === "es" ? "Sincronizado!" : "Synced!");
        setTimeout(() => setSyncStatus(""), 3000);
      });
    }
    async function manualSync() {
      setSyncStatus(lang === "es" ? "Sincronizando..." : "Syncing...");
      const a = await window.Sync.pull();
      const b = await window.Sync.push();
      setSyncStatus(lang === "es" ? `Pull: ${a.applied || 0} | Push: ${b.pushed || 0}` : `Pull: ${a.applied || 0} | Push: ${b.pushed || 0}`);
      setTimeout(() => setSyncStatus(""), 3500);
    }

    function handleSave(e) {
      e.preventDefault(); setError(null);
      if (!name.trim()) { setError(lang === "es" ? "Nombre requerido" : "Name required"); return; }
      const rate = parseFloat(exchangeRate);
      if (isNaN(rate) || rate <= 0) { setError("Tasa invalida"); return; }
      const monthly = parseFloat(monthlyBudget); const daily = parseFloat(dailyBudget);
      if (isNaN(monthly) || monthly < 0) { setError("Presupuesto invalido"); return; }
      if (isNaN(daily) || daily < 0) { setError("Presupuesto invalido"); return; }
      window.Storage.set("user", Object.assign({}, user, { name: name.trim(), initials: name.trim().slice(0,1).toUpperCase() }));
      window.Storage.set("settings", Object.assign({}, settings, { currency, secondaryCurrency: currency === "PEN" ? "USD" : "PEN", exchangeRate: rate, budget: { monthly, daily } }));
      setSavedFlash(true); setTimeout(() => setSavedFlash(false), 1500);
    }

    function handleResetData() {
      const msg1 = lang === "es"
        ? "Esto borrará TODOS tus datos locales (transacciones, hábitos, metas, entrenamientos). Continuar?"
        : "This will delete ALL your local data (transactions, habits, goals, workouts). Continue?";
      const msg2 = lang === "es" ? "Estás seguro? No se puede deshacer." : "Are you sure? Cannot be undone.";
      if (!window.confirm(msg1)) return;
      if (!window.confirm(msg2)) return;
      window.Seed.wipe();
      window.SubscriptionEngine.checkDue();
      onClose();
      window.location.reload();
    }

    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal-card" style={{ maxWidth: 560, padding: 24 }} onClick={(e) => e.stopPropagation()}>
          <button className="ob-close" onClick={onClose}><window.Icon name="x" size={14} /></button>
          <div className="kicker" style={{ marginBottom: 4 }}>{lang === "es" ? "AJUSTES" : "SETTINGS"}</div>
          <div className="h2" style={{ marginBottom: 20 }}>{lang === "es" ? "Tu configuracion" : "Your configuration"}</div>

          <form onSubmit={handleSave} className="tx-form">
            <div className="form-row">
              <label className="form-label">{lang === "es" ? "Tu nombre" : "Your name"}</label>
              <input type="text" className="input" value={name} onChange={(e) => setName(e.target.value)} required />
            </div>
            <div className="form-row" style={{ display: "flex", gap: 12 }}>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Moneda" : "Currency"}</label>
                <select className="input" value={currency} onChange={(e) => setCurrency(e.target.value)}>
                  <option value="PEN">S/ Soles</option><option value="USD">$ Dolares</option>
                </select>
              </div>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Tasa USD/PEN" : "USD/PEN"}</label>
                <input type="number" step="0.01" min="0" className="input mono" value={exchangeRate} onChange={(e) => setExchangeRate(e.target.value)} required />
              </div>
            </div>
            <div className="form-row" style={{ display: "flex", gap: 12 }}>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Presup. mes" : "Monthly"}</label>
                <input type="number" step="0.01" min="0" className="input mono" value={monthlyBudget} onChange={(e) => setMonthlyBudget(e.target.value)} />
              </div>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Presup. dia" : "Daily"}</label>
                <input type="number" step="0.01" min="0" className="input mono" value={dailyBudget} onChange={(e) => setDailyBudget(e.target.value)} />
              </div>
            </div>
            {error && <div className="form-error">{error}</div>}
            {savedFlash && <div className="form-success">{lang === "es" ? "Guardado ✓" : "Saved ✓"}</div>}
            <div className="form-actions">
              <button type="button" className="btn" onClick={onClose}>{lang === "es" ? "Cerrar" : "Close"}</button>
              <button type="submit" className="btn warm" style={{ marginLeft: "auto" }}>{lang === "es" ? "Guardar" : "Save"}</button>
            </div>
          </form>

          {/* SYNC MULTI-DEVICE — destacado */}
          <div style={{ borderTop: "1px solid var(--line)", margin: "20px 0", paddingTop: 18 }}>
            <div className="kicker" style={{ marginBottom: 10 }}>☁️ {lang === "es" ? "SYNC ENTRE DISPOSITIVOS" : "MULTI-DEVICE SYNC"}</div>
            {!syncToken ? (
              <div style={{ padding: 14, background: "var(--terracotta-soft)", borderRadius: "var(--radius)" }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: "var(--rust)", marginBottom: 6 }}>
                  {lang === "es" ? "Sin sincronizacion (solo este dispositivo)" : "Not synced (this device only)"}
                </div>
                <div className="caption" style={{ marginBottom: 12, color: "var(--rust)" }}>
                  {lang === "es"
                    ? "Activa sync para que tus datos vivan en la nube y se compartan entre PC, iPhone, etc."
                    : "Enable sync so your data lives in the cloud across all your devices."}
                </div>
                <div style={{ display: "flex", gap: 8 }}>
                  <button type="button" className="btn warm" onClick={enableSync}>
                    {lang === "es" ? "Activar sync (nuevo)" : "Enable sync (new)"}
                  </button>
                </div>
                <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line-soft)" }}>
                  <div className="caption" style={{ marginBottom: 6 }}>
                    {lang === "es" ? "O pega aqui el token de otro dispositivo donde ya activaste sync:" : "Or paste token from another device:"}
                  </div>
                  <div style={{ display: "flex", gap: 6 }}>
                    <input type="text" className="input mono" style={{ flex: 1, fontSize: 11 }} placeholder="vida_..." value={pasteTokenInput} onChange={(e) => setPasteTokenInput(e.target.value)} />
                    <button type="button" className="btn" onClick={applyPastedToken}>OK</button>
                  </div>
                </div>
              </div>
            ) : (
              <div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 99, background: syncStatusBadge === "syncing" ? "var(--ochre)" : syncStatusBadge === "error" ? "var(--terracotta)" : "var(--sage)" }}/>
                    <span style={{ fontSize: 14, fontWeight: 500 }}>
                      {syncStatusBadge === "syncing" ? (lang === "es" ? "Sincronizando..." : "Syncing...") : syncStatusBadge === "error" ? "Error" : (lang === "es" ? "Sincronizado" : "Synced")}
                    </span>
                  </div>
                  <div style={{ display: "flex", gap: 6 }}>
                    <button type="button" className="btn" onClick={manualSync}>Sync</button>
                    <button type="button" className="btn danger" onClick={disableSync}>{lang === "es" ? "Desactivar" : "Disable"}</button>
                  </div>
                </div>
                <div className="caption" style={{ marginBottom: 6 }}>
                  {lang === "es" ? "Tu token (pegalo en otros dispositivos para sincronizar):" : "Your token:"}
                </div>
                <div style={{ display: "flex", gap: 6, padding: 10, background: "var(--paper-sunk)", borderRadius: 6 }}>
                  <code className="mono" style={{ flex: 1, fontSize: 10, wordBreak: "break-all" }}>{syncToken}</code>
                  <button type="button" className="btn" style={{ padding: "4px 10px", fontSize: 12 }} onClick={copySyncToken}>{syncTokenCopied ? "✓" : "Copy"}</button>
                </div>
              </div>
            )}
          </div>

          <div style={{ borderTop: "1px solid var(--line)", margin: "20px 0", paddingTop: 18 }}>
            <div className="kicker" style={{ marginBottom: 10 }}>{lang === "es" ? "AUTOMATIZACIONES" : "AUTOMATIONS"}</div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 0" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>🔔 {lang === "es" ? "Notificaciones" : "Notifications"}</div>
                <div className="caption">{lang === "es" ? "Rachas, presupuesto, entrenos" : "Streaks, budget, workouts"}</div>
              </div>
              <button type="button" className={"btn " + (notifEnabled ? "warm" : "")} onClick={toggleNotifications} disabled={notifPerm === "denied"}>
                {notifEnabled ? "On" : (lang === "es" ? "Activar" : "Enable")}
              </button>
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 0", borderTop: "1px solid var(--line-soft)" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>📥 {lang === "es" ? "Importar CSV banco" : "Bank CSV"}</div>
                <div className="caption">BCP · BBVA · Interbank · Scotiabank</div>
              </div>
              <button type="button" className="btn" onClick={() => setShowCsv(true)}>{lang === "es" ? "Importar" : "Import"}</button>
            </div>
            <div style={{ padding: "10px 0", borderTop: "1px solid var(--line-soft)" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>🍎 Apple Shortcuts</div>
                  <div className="caption">{lang === "es" ? "Loguear desde iPhone" : "Log from iPhone"}</div>
                </div>
                <button type="button" className="btn" onClick={regenerateToken}>
                  {shortcutsToken ? (lang === "es" ? "Regenerar" : "Regenerate") : (lang === "es" ? "Generar" : "Generate")}
                </button>
              </div>
              {shortcutsToken && (
                <div style={{ marginTop: 10, padding: 10, background: "var(--paper-sunk)", borderRadius: 6, display: "flex", gap: 8 }}>
                  <code className="mono" style={{ flex: 1, fontSize: 11, wordBreak: "break-all" }}>{shortcutsToken}</code>
                  <button type="button" className="btn" style={{ padding: "4px 10px", fontSize: 12 }} onClick={copyToken}>{tokenCopied ? "✓" : "Copy"}</button>
                </div>
              )}
            </div>
          </div>

          <div style={{ borderTop: "1px solid var(--line)", margin: "20px 0", paddingTop: 18 }}>
            <div className="kicker" style={{ marginBottom: 10 }}>{lang === "es" ? "INTEGRACIONES" : "INTEGRATIONS"}</div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 0" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>🏃 Strava</div>
                <div className="caption">{stravaConn ? (lang === "es" ? "Conectado" : "Connected") : (lang === "es" ? "Importa entrenos" : "Import workouts")}</div>
              </div>
              {stravaConn ? (
                <div style={{ display: "flex", gap: 6 }}>
                  <button type="button" className="btn" onClick={syncStrava}>Sync</button>
                  <button type="button" className="btn danger" onClick={disconnectStrava}>{lang === "es" ? "Off" : "Off"}</button>
                </div>
              ) : (
                <button type="button" className="btn warm" onClick={connectStrava}>{lang === "es" ? "Conectar" : "Connect"}</button>
              )}
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 0", borderTop: "1px solid var(--line-soft)" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>📅 Google Calendar</div>
                <div className="caption">{googleConn ? (lang === "es" ? "Conectado" : "Connected") : (lang === "es" ? "Lee eventos" : "Read events")}</div>
              </div>
              {googleConn ? (
                <div style={{ display: "flex", gap: 6 }}>
                  <button type="button" className="btn" onClick={syncGoogle}>Sync</button>
                  <button type="button" className="btn danger" onClick={disconnectGoogle}>Off</button>
                </div>
              ) : (
                <button type="button" className="btn warm" onClick={connectGoogle}>{lang === "es" ? "Conectar" : "Connect"}</button>
              )}
            </div>
            {syncStatus && <div className="form-success" style={{ marginTop: 10 }}>{syncStatus}</div>}
          </div>

          <div style={{ borderTop: "1px solid var(--line)", margin: "20px 0 0", paddingTop: 18 }}>
            <div className="kicker" style={{ marginBottom: 6 }}>{lang === "es" ? "Zona peligrosa" : "Danger zone"}</div>
            <div className="meta" style={{ marginBottom: 10, fontSize: 12 }}>
              {lang === "es"
                ? "Borra todos tus datos y vuelve a empezar limpio. La nube (si está conectada) NO se borra."
                : "Wipe all your data and start clean. The cloud (if connected) is NOT wiped."}
            </div>
            <button type="button" className="btn danger" onClick={handleResetData} style={{ width: "100%" }}>
              {lang === "es" ? "🧹 Empezar de cero" : "🧹 Start from scratch"}
            </button>
          </div>

          {showCsv && window.CsvImportModal && <window.CsvImportModal onClose={() => setShowCsv(false)} />}
        </div>
      </div>
    );
  }

  window.SettingsPanel = SettingsPanel;
})();
            <div className="meta" style={{ marginBottom: 10, fontSize: 12 }}>
              {lang === "es"
                ? "Borra todos tus datos y vuelve a empezar limpio. La nube (si está conectada) NO se borra."
                : "Wipe all your data and start clean. The cloud (if connected) is NOT wiped."}
            </div>
            <button type="button" className="btn danger" onClick={handleResetData} style={{ width: "100%" }}>
              {lang === "es" ? "🧹 Empezar de cero" : "🧹 Start from scratch"}
            </button>
          </div>

          {showCsv && window.CsvImportModal && <window.CsvImportModal onClose={() => setShowCsv(false)} />}
        </div>
      </div>
    );
  }

  window.SettingsPanel = SettingsPanel;
})();