const { useState: US, useEffect: UE, useMemo: UM, useRef: UR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  graphLayout: "force",
  colorTheme: "ink",
  animIntensity: "normal",
  language: "en",
  density: "comfortable",
}; /*EDITMODE-END*/

const TF_LABEL = {
  "1D": "1d",
  "1W": "1w",
  "1M": "1m",
  "6M": "180d",
  "1Y": "1y",
  "5Y": "5y",
};
const TF_LABEL_JP = {
  "1D": "1日",
  "1W": "1週間",
  "1M": "1ヶ月",
  "6M": "180日",
  "1Y": "1年",
  "5Y": "5年",
};
// PRICES[t] is assumed to hold ~180 daily closes. We resample for each timeframe:
// data is [{d: "2025-10-17", c: 16870}, ...] — real dated prices
function sliceForTimeframe(data, tf) {
  if (!data || !data.length) return data;
  const n = data.length;
  switch (tf) {
    case "1D": {
      // synthesize intraday from last close
      const last = data[n - 1];
      const base = last.c;
      const pts = [];
      const hours = [
        "09:00",
        "09:30",
        "10:00",
        "10:30",
        "11:00",
        "11:30",
        "12:30",
        "13:00",
        "13:30",
        "14:00",
        "14:30",
        "15:00",
      ];
      for (let i = 0; i < hours.length; i++) {
        const v =
          base *
          (0.997 + 0.003 * Math.sin(i * 0.9) + 0.002 * Math.cos(i * 0.3));
        pts.push({
          d: last.d + " " + hours[i],
          c: i === hours.length - 1 ? base : Math.round(v),
        });
      }
      return pts;
    }
    case "1W":
      return data.slice(-5);
    case "1M":
      return data.slice(-22);
    case "6M":
      return data;
    default:
      return data;
  }
}

function App() {
  const [tweaks, setTweaks] = US(() => {
    try {
      const s = localStorage.getItem("kairos.tweaks.v2");
      if (s) return { ...TWEAK_DEFAULTS, ...JSON.parse(s) };
    } catch (e) {}
    // Clear old key
    try {
      localStorage.removeItem("kairos.tweaks");
    } catch (e) {}
    return TWEAK_DEFAULTS;
  });
  // ——— URL-based routing: read initial state from URL params ———
  const initParams = UM(() => {
    try {
      return new URL(location.href).searchParams;
    } catch (e) {
      return new URLSearchParams();
    }
  }, []);
  const [active, setActive] = US(
    () =>
      initParams.get("ticker") ||
      localStorage.getItem("kairos.active") ||
      "8035.T",
  );
  const [query, setQuery] = US("");
  const [activeThemes, setActiveThemes] = US(new Set());
  const [hoverNews, setHoverNews] = US(null);
  const [editMode, setEditMode] = US(false);
  const [timeframe, setTimeframe] = US("6M");
  const [view, setView] = US(() => {
    return (
      initParams.get("view") || localStorage.getItem("kairos.view") || "stock"
    );
  });
  const [themeId, setThemeId] = US(
    () =>
      initParams.get("theme") || localStorage.getItem("kairos.themeId") || "ai",
  );
  const [reportSlug, setReportSlug] = US(() => initParams.get("slug") || null);

  // ——— Sync state → URL (pushState) ———
  const skipPushRef = UR(false);
  UE(() => {
    localStorage.setItem("kairos.view", view);
    localStorage.setItem("kairos.active", active);
    localStorage.setItem("kairos.themeId", themeId);
    if (skipPushRef.current) {
      skipPushRef.current = false;
      return;
    }
    const p = new URLSearchParams();
    p.set("view", view);
    if (view === "stock") p.set("ticker", active);
    if (view === "theme" || view === "report") p.set("theme", themeId);
    if (view === "single-report" && reportSlug) p.set("slug", reportSlug);
    const url = location.pathname + "?" + p.toString();
    history.pushState({ view, active, themeId, reportSlug }, "", url);
  }, [view, active, themeId, reportSlug]);

  // ——— Listen for browser back/forward ———
  UE(() => {
    const onPop = (e) => {
      const s = e.state;
      if (s) {
        skipPushRef.current = true;
        setView(s.view || "stock");
        if (s.active) setActive(s.active);
        if (s.themeId) setThemeId(s.themeId);
        if (s.reportSlug) setReportSlug(s.reportSlug);
      } else {
        // Fallback: read from URL
        skipPushRef.current = true;
        const p = new URLSearchParams(location.search);
        setView(p.get("view") || "stock");
        if (p.get("ticker")) setActive(p.get("ticker"));
        if (p.get("theme")) setThemeId(p.get("theme"));
        if (p.get("slug")) setReportSlug(p.get("slug"));
      }
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const openTheme = (id) => {
    setThemeId(id);
    setView("theme");
  };

  UE(() => {
    localStorage.setItem("kairos.tweaks.v2", JSON.stringify(tweaks));
  }, [tweaks]);

  // Tweaks edit-mode bridge
  UE(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setEditMode(true);
      if (e.data.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  // Persist tweaks via host
  const updateTweaks = (next) => {
    setTweaks(next);
    try {
      window.parent.postMessage(
        { type: "__edit_mode_set_keys", edits: next },
        "*",
      );
    } catch (e) {}
  };

  // Apply theme + density classes on root
  UE(() => {
    document.documentElement.setAttribute("data-theme", tweaks.colorTheme);
    document.documentElement.setAttribute("data-density", tweaks.density);
    document.documentElement.setAttribute("data-motion", tweaks.animIntensity);
  }, [tweaks]);

  const lang = tweaks.language;
  const [mobileMenu, setMobileMenu] = US(false);

  return (
    <div className="app">
      <div className="mobile-bar">
        <div className="mobile-bar-brand">
          Kairos<span className="brand-dot">·</span>JP
        </div>
        <div className="mobile-bar-r">
          <div className="mobile-bar-live">
            <span />
            JST
          </div>
          <button
            className="mobile-toggle"
            onClick={() => setMobileMenu(!mobileMenu)}
          >
            {mobileMenu ? "✕" : "☰"}
          </button>
        </div>
      </div>
      <Sidebar
        active={active}
        setActive={(t) => {
          setActive(t);
          setView("stock");
          setMobileMenu(false);
        }}
        query={query}
        setQuery={setQuery}
        lang={lang}
        mobileOpen={mobileMenu}
      />
      <main className="main">
        <div className="topbar">
          <div className="breadcrumbs">
            <span>{lang === "jp" ? "調査" : "Research"}</span>
            <span className="sep">/</span>
            {view === "stock" ? (
              <>
                <span
                  style={{ cursor: "pointer" }}
                  onClick={() => setView("themes")}
                >
                  {lang === "jp" ? "テーマ" : "Themes"}
                </span>
                <span className="sep">/</span>
                <span>{lang === "jp" ? "個別銘柄" : "Single Stock"}</span>
                <span className="sep">/</span>
                <span className="strong">{active}</span>
              </>
            ) : view === "themes" ? (
              <>
                <span className="strong">
                  {lang === "jp" ? "テーマ" : "Themes"}
                </span>
              </>
            ) : view === "reports" ? (
              <>
                <span className="strong">
                  {lang === "jp" ? "レポートライブラリ" : "Reports library"}
                </span>
              </>
            ) : view === "news" ? (
              <>
                <span className="strong">
                  {lang === "jp" ? "ファイアホース" : "Firehose"}
                </span>
                <span className="sep">·</span>
                <span style={{ color: "var(--fg-2)" }}>
                  {lang === "jp" ? "ライブニュース" : "Live news"}
                </span>
              </>
            ) : view === "radar" ? (
              <>
                <span className="strong">
                  {lang === "jp" ? "トレンドレーダー" : "Trend Radar"}
                </span>
                <span className="sep">·</span>
                <span style={{ color: "var(--fg-2)" }}>
                  {lang === "jp"
                    ? "自律トレンド検出"
                    : "Autonomous trend detection"}
                </span>
              </>
            ) : (
              <>
                <span
                  style={{ cursor: "pointer" }}
                  onClick={() => setView("themes")}
                >
                  {lang === "jp" ? "テーマ" : "Themes"}
                </span>
                <span className="sep">/</span>
                <span
                  className={view === "report" ? "" : "strong"}
                  style={{ cursor: view === "report" ? "pointer" : "default" }}
                  onClick={() => view === "report" && setView("theme")}
                >
                  {lang === "jp"
                    ? window.THEMES.find((t) => t.id === themeId)?.jp
                    : window.THEMES.find((t) => t.id === themeId)?.name}
                </span>
                {view === "report" && (
                  <>
                    <span className="sep">/</span>
                    <span className="strong">
                      {lang === "jp" ? "完全レポート" : "Full report"}
                    </span>
                  </>
                )}
              </>
            )}
          </div>
          <div className="topbar-c">
            <ViewSwitcher
              view={view}
              setView={setView}
              themeId={themeId}
              setThemeId={setThemeId}
              lang={lang}
            />
          </div>
          <div className="topbar-r">
            <div className="live-dot">
              <span />
              Live · 09:42 JST
            </div>
            <button className="btn primary">
              {lang === "jp" ? "レポート作成" : "Generate report"}
            </button>
          </div>
        </div>

        {view === "radar" ? (
          <TrendRadarView
            lang={lang}
            onOpenStock={(t) => {
              setActive(t);
              setView("stock");
            }}
          />
        ) : view === "themes" ? (
          <ThemesList
            lang={lang}
            onOpen={(id) => {
              setThemeId(id);
              setView("theme");
            }}
          />
        ) : view === "reports" ? (
          <ReportsList
            lang={lang}
            onOpen={(id) => {
              setThemeId(id);
              setView("report");
            }}
            onOpenReport={(slug) => {
              setReportSlug(slug);
              setView("single-report");
            }}
          />
        ) : view === "news" ? (
          <NewsView
            lang={lang}
            onOpenStock={(t) => {
              setActive(t);
              setView("stock");
            }}
            onOpenTheme={(id) => {
              setThemeId(id);
              setView("theme");
            }}
          />
        ) : view === "single-report" ? (
          <SingleReportView
            slug={reportSlug}
            lang={lang}
            onBack={() => setView("reports")}
            onOpenStock={(t) => {
              setActive(t);
              setView("stock");
            }}
          />
        ) : view === "report" ? (
          <ThemeReport
            themeId={themeId}
            lang={lang}
            onBack={() => setView("theme")}
            onOpenStock={(t) => {
              setActive(t);
              setView("stock");
            }}
          />
        ) : view === "theme" ? (
          <ThemeView
            themeId={themeId}
            onNode={(t) => {
              setActive(t);
              setView("stock");
            }}
            onOpenTheme={openTheme}
            lang={lang}
            onOpenReport={() => setView("report")}
            hoverNews={hoverNews}
            setHoverNews={setHoverNews}
          />
        ) : (
          <>
            <TickerHeader ticker={active} lang={lang} />
            {!window.STOCKS[active] ? (
              <div>Loading…</div>
            ) : (
              (() => {
                const s = window.STOCKS[active];
                return (
                  <>
                    <section className="hero-grid">
                      <div className="card chart-card">
                        <div className="card-h">
                          <div>
                            <div className="panel-t">
                              {lang === "jp"
                                ? `価格 / ${TF_LABEL_JP[timeframe]}`
                                : `Price · ${TF_LABEL[timeframe]}`}
                            </div>
                            <div className="panel-s">
                              {lang === "jp"
                                ? "ニュースイベントを時系列にマップ"
                                : "Events mapped on timeline"}
                            </div>
                          </div>
                          <div className="seg small">
                            {["1D", "1W", "1M", "6M"].map((tf) => (
                              <button
                                key={tf}
                                className={timeframe === tf ? "on" : ""}
                                onClick={() => setTimeframe(tf)}
                              >
                                {tf}
                              </button>
                            ))}
                          </div>
                        </div>
                        <PriceChart
                          ticker={active}
                          data={sliceForTimeframe(
                            window.PRICES[active],
                            timeframe,
                          )}
                          timeframe={timeframe}
                          events={window.newsForTicker(active)}
                          onHover={setHoverNews}
                        />
                        <div className="chart-stats">
                          <div>
                            <span>O</span>
                            {fmtPrice(s.price * 0.994)}
                          </div>
                          <div>
                            <span>H</span>
                            {fmtPrice(s.price * 1.018)}
                          </div>
                          <div>
                            <span>L</span>
                            {fmtPrice(s.price * 0.987)}
                          </div>
                          <div>
                            <span>{lang === "jp" ? "出来高" : "Vol"}</span>
                            {(Math.random() * 12 + 3).toFixed(1)}M
                          </div>
                          <div>
                            <span>52w</span>
                            {fmtPrice(s.price * 0.72)} —{" "}
                            {fmtPrice(s.price * 1.34)}
                          </div>
                          <div>
                            <span>P/E</span>
                            {(12 + (s.price % 30) / 2).toFixed(1)}
                          </div>
                          <div>
                            <span>β</span>
                            {(0.7 + (s.price % 40) / 100).toFixed(2)}
                          </div>
                        </div>
                        <StockBriefPanel ticker={active} lang={lang} />
                      </div>

                      <div className="card graph-card">
                        <div className="card-h">
                          <div>
                            <div className="panel-t">
                              {lang === "jp"
                                ? "関係性マップ"
                                : "Relationship Map"}
                            </div>
                            <div className="panel-s">
                              {lang === "jp"
                                ? "供給・需要・テーマ相関"
                                : "Supply · demand · theme correlation"}
                            </div>
                          </div>
                          <div className="legend">
                            <span className="legend-hint">
                              {lang === "jp"
                                ? "ノード=ティッカー・矢印=サプライ方向"
                                : "Nodes = tickers · arrows = supply direction"}
                            </span>
                          </div>
                        </div>
                        <RelationshipGraph
                          center={active}
                          layout={tweaks.graphLayout}
                          activeThemes={activeThemes}
                          highlightNews={hoverNews}
                          onNode={setActive}
                          intensity={tweaks.animIntensity}
                        />
                        <ThemeBelt
                          center={active}
                          activeThemes={activeThemes}
                          setActiveThemes={setActiveThemes}
                        />
                      </div>
                    </section>

                    <section className="card">
                      <div className="card-h">
                        <div>
                          <div className="panel-t">
                            {lang === "jp" ? "バリューチェーン" : "Value Chain"}
                          </div>
                          <div className="panel-s">
                            {lang === "jp"
                              ? "5段階のサプライチェーン"
                              : "Five-stage supply chain"}
                          </div>
                        </div>
                      </div>
                      <ValueChainStrip center={active} onNode={setActive} />
                    </section>

                    <section className="bottom-grid">
                      <div className="card">
                        <CorrelationGrid center={active} onNode={setActive} />
                      </div>
                      <div className="card news-card">
                        <NewsPanel
                          center={active}
                          onHover={setHoverNews}
                          lang={lang}
                        />
                      </div>
                    </section>
                  </>
                );
              })()
            )}
          </>
        )}

        <footer className="foot">
          <span>Kairos·JP · research grade · 2026</span>
          <span className="sep">·</span>
          <span>
            {lang === "jp"
              ? "データ: J-Quants / Nikkei Asia / Reuters"
              : "Data: J-Quants · Nikkei Asia · Reuters"}
          </span>
          <span className="sep">·</span>
          <span>
            {Object.keys(window.STOCKS).length} tickers · {window.THEMES.length}{" "}
            themes · {window.LINKS.length} edges
          </span>
        </footer>
      </main>
      <TweaksPanel
        tweaks={tweaks}
        setTweaks={updateTweaks}
        visible={editMode}
      />
    </div>
  );
}

// Wait for CORE data to load before rendering. The heavy report/evidence blob
// is deferred (index.html) and arrives later; when it does, re-render so report
// views — which key their memos on window._reportsReady — recompute with it. A
// plain root.render(<App/>) reconciles the same tree, preserving nav state.
const root = ReactDOM.createRoot(document.getElementById("root"));
function renderKairos() {
  root.render(<App />);
}
if (window._dataLoaded) {
  window._dataLoaded.then(() => {
    renderKairos();
    if (!window._reportsReady) {
      window.addEventListener("kairos:reports-ready", renderKairos, { once: true });
    }
  });
} else {
  // Fallback if _dataLoaded not set (local dev)
  renderKairos();
}