/* ============================================================
   JTSense App — main shell, routing, live engine, persistence
   ============================================================ */
const { useState: uS, useEffect: uE, useRef: uR } = React;

const NAV = [
  { id: "overview", label: "Overview", icon: "overview" },
  { id: "narratives", label: "Narratives", icon: "narrative" },
  { id: "wallets", label: "Wallets", icon: "wallet" },
  { id: "signals", label: "Signals", icon: "signal", badge: "live" },
  { id: "alerts", label: "Alerts", icon: "alert" },
  { id: "watchlist", label: "Watchlist", icon: "watch" },
  { id: "analytics", label: "Analytics", icon: "analytics" },
  { id: "settings", label: "Settings", icon: "settings" },
];
const TITLES = {
  overview: "Overview", narratives: "Narrative Intelligence", wallets: "Wallet Intelligence",
  signals: "Realtime Signals", alerts: "Alerts & Webhooks", watchlist: "Watchlist",
  analytics: "Analytics", settings: "Settings",
};

const LS = {
  get(k, d) { try { return JSON.parse(localStorage.getItem("jts_" + k)) ?? d; } catch { return d; } },
  set(k, v) { try { localStorage.setItem("jts_" + k, JSON.stringify(v)); } catch {} },
  del(k) { try { localStorage.removeItem("jts_" + k); } catch {} },
};

function App() {
  const J = window.JT;
  const [user, setUser] = uS(() => LS.get("user", null));
  const [view, setView] = uS(() => LS.get("view", "overview"));
  const [signals, setSignals] = uS(() => J.signals);
  const [watch, setWatch] = uS(() => LS.get("watch", []));
  const [rules, setRules] = uS(() => LS.get("rules", J.alertRules));
  const [toasts, setToasts] = uS([]);
  const [tick, setTick] = uS(0);
  const nextId = uR(2000);

  uE(() => LS.set("view", view), [view]);
  uE(() => LS.set("watch", watch), [watch]);
  uE(() => LS.set("rules", rules), [rules]);

  // ---- live signal engine (single interval per session) ----
  const rulesRef = uR(rules);
  uE(() => { rulesRef.current = rules; }, [rules]);
  uE(() => {
    if (!user) return;
    const iv = setInterval(() => {
      const s = J.makeSignal(nextId.current++, 0);
      setSignals(prev => [s, ...prev].slice(0, 40));
      // chance to fire an alert toast for active matching rule
      const match = rulesRef.current.find(r => r.active && r.type === s.type && s.confidence >= r.conf);
      if (match && Math.random() < 0.35) {
        pushToast(match.name, `${s.label} · ${s.confidence}% confidence`, "alert");
        setRules(rs => rs.map(r => r.id === match.id ? { ...r, triggered: r.triggered + 1 } : r));
      }
    }, 4200);
    return () => clearInterval(iv);
  }, [user]);

  // ---- live data engine: random-walk every view's numbers ----
  uE(() => {
    if (!user) return;
    const iv = setInterval(() => { J.step(); setTick(t => t + 1); }, 2600);
    return () => clearInterval(iv);
  }, [user]);

  function pushToast(title, sub, kind = "ok") {
    const id = nextId.current++;
    setToasts(t => [...t, { id, title, sub, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 4600);
  }

  function login(u) { setUser(u); LS.set("user", u); pushToast("Welcome back", u.name + " · session started", "ok"); }
  function logout() { LS.del("user"); setUser(null); setView("overview"); }

  function toggleWatch(item) {
    setWatch(w => w.find(x => x.key === item.key) ? w.filter(x => x.key !== item.key) : [...w, item]);
  }
  const isWatched = key => watch.some(w => w.key === key);

  if (!user) return <AuthScreen onLogin={login} />;

  const go = setView;
  const viewEl = {
    overview: <OverviewView signals={signals} tick={tick} go={go} />,
    narratives: <NarrativesView tick={tick} isWatched={isWatched} toggleWatch={toggleWatch} />,
    wallets: <WalletsView tick={tick} isWatched={isWatched} toggleWatch={toggleWatch} />,
    signals: <SignalsView signals={signals} />,
    alerts: <AlertsView rules={rules} setRules={setRules} toast={pushToast} />,
    watchlist: <WatchlistView watch={watch} toggleWatch={toggleWatch} go={go} />,
    analytics: <AnalyticsView />,
    settings: <SettingsView user={user} onLogout={logout} toast={pushToast} />,
  }[view];

  return (
    <div className="shell">
      {/* SIDEBAR */}
      <aside className="sidebar">
        <a className="brand" href="index.html">
          <img src="assets/favicon.png" alt="JTSense" />
          <span className="wm"><b>JT</b><span>SENSE</span></span>
        </a>
        {NAV.map(n => (
          <div key={n.id} className={"nav-item " + (view === n.id ? "active" : "")} onClick={() => setView(n.id)}>
            <Icon d={ICONS[n.icon]} />
            <span>{n.label}</span>
            {n.badge === "live" && <span className="badge">LIVE</span>}
            {n.id === "watchlist" && watch.length > 0 && <span className="badge">{watch.length}</span>}
          </div>
        ))}
        <div className="spacer" />
        <div className="side-foot">
          <div className="user-chip" onClick={() => setView("settings")}>
            <div className="avatar">{(user.name || "A")[0]}</div>
            <div className="ui">
              <div className="un">{user.name}</div>
              <div className="ue">{user.email}</div>
            </div>
          </div>
        </div>
      </aside>

      {/* MAIN */}
      <div className="main">
        <div className="topbar">
          <div>
            <div className="crumb">JTSense / {TITLES[view]}</div>
            <h2>{TITLES[view]}</h2>
          </div>
          <div className="search">
            <Icon d={ICONS.search} />
            <input placeholder="Search wallets, narratives, tokens…" />
          </div>
          <span className="live-pill">LIVE</span>
          <div className="icon-btn" onClick={() => setView("alerts")} title="Alerts"><Icon d={ICONS.bell} /><span className="dot" /></div>
          <div className="icon-btn" onClick={logout} title="Log out"><Icon d={ICONS.logout} /></div>
        </div>
        <div className="content" key={view}>{viewEl}</div>
      </div>

      {/* TOASTS */}
      <div className="toast-wrap">
        {toasts.map(t => {
          const palette = { ok: ["#27d98a", "rgba(39,217,138,.14)"], warn: ["#ffb13b", "rgba(255,177,59,.14)"], alert: ["#4ea2ff", "rgba(43,140,255,.14)"] }[t.kind] || ["#4ea2ff", "rgba(43,140,255,.14)"];
          return (
            <div className="toast" key={t.id}>
              <div className="ti" style={{ background: palette[1], color: palette[0] }}>
                <Icon d={t.kind === "alert" ? ICONS.bell : (t.kind === "warn" ? ICONS.alert : ICONS.up)} />
              </div>
              <div>
                <div className="tt">{t.title}</div>
                <div className="tx2">{t.sub}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);