/* Page 1 — Overview Dashboard v2
 *  - 去掉首頁的 movers grid (漲幅5/跌幅5/量爆)
 *  - 去掉底部 3-card (今日觸發/最新新聞/資料健康) — 改放到設定頁、新聞頁
 *  - 加入「今日漲幅族群 Top 10」(台股 + 美股) sector cards
 *  - 保留 KPI strip、觀察清單體質 (多頭 / 盤整)
 */
const { Icon, Sparkline, fmt, fmtVol, sign, PctBadge, TrendBadge } = window.UI;
const { MarketSummaryBar } = window.Shell;

const OVERVIEW_DEFAULT_LISTS = [
  { id: "tw-core", name: "台股核心", icon: "tw", syms: ["2330.TW","2317.TW","2454.TW","2308.TW","2603.TW","2412.TW","2882.TW","2891.TW","3008.TW"] },
  { id: "us-tech", name: "美股科技", icon: "us", syms: ["NVDA","AAPL","TSLA","MSFT","AMD","GOOGL"] },
  { id: "ai", name: "AI 概念", icon: "trending-up", syms: ["NVDA","2330.TW","2454.TW","AMD","MSFT","2308.TW"] },
  { id: "fin", name: "金融", icon: "list", syms: ["2882.TW","2891.TW"] },
  { id: "high-vol", name: "今日量爆", icon: "alert", syms: ["2603.TW","2308.TW","NVDA","TSLA"] },
];

/* ---------- KPI card ---------- */
const KPICard = ({ label, value, sub, accent, icon, hint }) => (
  <div className="surface kpi-card">
    <div className="kpi-head">
      <span className="kpi-label">{label}</span>
      {icon && <Icon name={icon} size={14}/>}
    </div>
    <div className={"kpi-value " + (accent || "")}>{value}</div>
    {sub && <div className="kpi-sub dim">{sub}</div>}
    {hint && <div className="kpi-hint mono">{hint}</div>}
  </div>
);

/* ---------- 觀察清單 — 單一行 ---------- */
const TrendStockRow = ({ r, kind, onOpen }) => {
  const upDown = r.pct >= 0 ? "up" : "down";
  return (
    <button className={"trend-row trend-row-" + kind} onClick={() => onOpen(r.sym)}
            data-color-mode={r.market === "US" ? "us" : "tw"}>
      <div className="trend-row-l">
        <span className="mono trend-sym">{r.sym.replace(".TW","")}</span>
        <span className="trend-name">{r.name}</span>
      </div>
      <div className="trend-row-mid">
        <Sparkline data={r.spark} width={56} height={18}/>
      </div>
      <div className="trend-row-r">
        <div className="trend-price-col">
          <span className={"num mono trend-price " + upDown}>{fmt(r.price, 2)}</span>
          <span className={"num mono trend-pct " + upDown}>
            {r.pct >= 0 ? "+" : ""}{fmt(r.pct, 2)}%
          </span>
        </div>
        <div className="trend-meta">
          <span className="mono dim trend-meta-rsi" title="RSI(14)">RSI {fmt(r.rsi, 0)}</span>
          <span className={"mono trend-meta-vol " + (r.volMa >= 1.5 ? "up" : (r.volMa < 0.7 ? "dim" : "muted"))}
                title="量 / MA20">
            {fmt(r.volMa, 2)}×
          </span>
        </div>
      </div>
    </button>
  );
};

const TrendGroup = ({ market, rows, kind, onOpen }) => {
  if (rows.length === 0) return null;
  const flagCls = market === "TW" ? "trend-group-flag tw" : "trend-group-flag us";
  const label = market === "TW" ? "台股" : "美股";
  return (
    <div className="trend-group">
      <div className="trend-group-head">
        <span className={flagCls}>{market}</span>
        <span className="trend-group-name">{label}</span>
        <span className="dim mono trend-group-count">{rows.length}</span>
      </div>
      <ul className="trend-list">
        {rows.map(r => (
          <li key={r.sym}><TrendStockRow r={r} kind={kind} onOpen={onOpen}/></li>
        ))}
      </ul>
    </div>
  );
};

const TrendCard = ({ kind, title, icon, twRows, usRows, market, onOpen, emptyHint }) => {
  const headPillCls = kind === "bullish" ? "pill up dot" : "pill accent dot";
  const showTW = market !== "US";
  const showUS = market !== "TW";
  const total = (showTW ? twRows.length : 0) + (showUS ? usRows.length : 0);
  return (
    <section className="surface aside-card trend-card">
      <header className="section-head">
        <div className="section-head-l">
          <Icon name={icon} size={14}/>
          <h3 className="section-title">{title}</h3>
        </div>
        <span className={headPillCls}>{total}</span>
      </header>
      {total === 0 ? (
        <div className="trend-empty dim">
          <Icon name={icon} size={20}/>
          <span>{emptyHint}</span>
        </div>
      ) : (
        <div className="trend-groups">
          {showTW && <TrendGroup market="TW" rows={twRows} kind={kind} onOpen={onOpen}/>}
          {showUS && <TrendGroup market="US" rows={usRows} kind={kind} onOpen={onOpen}/>}
        </div>
      )}
    </section>
  );
};

/* ---------- main page ---------- */
const OverviewPage = ({ goChart, goPage }) => {
  const [userLists] = window.usePersistedState("watchlists", OVERVIEW_DEFAULT_LISTS);
  const [trendMarket, setTrendMarket] = React.useState("all");

  const watchedSymsArr = React.useMemo(() => {
    const set = new Set();
    userLists.forEach((l) => l.syms.forEach((s) => set.add(s)));
    return Array.from(set);
  }, [userLists]);
  const symsKey = watchedSymsArr.join(",");

  const [baseRows, setBaseRows] = React.useState(null);
  const [loadErr, setLoadErr] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    setBaseRows(null);
    setLoadErr(null);
    if (!window.WatchlistEngine || watchedSymsArr.length === 0) return;
    window.WatchlistEngine.resolveRows(watchedSymsArr)
      .then((rs) => { if (!cancelled) setBaseRows(rs); })
      .catch((e) => { if (!cancelled) setLoadErr(e.message); });
    return () => { cancelled = true; };
  }, [symsKey]);

  const [quotes, setQuotes] = React.useState(new Map());
  React.useEffect(() => {
    if (!window.Intraday || !window.Intraday.isEnabled() || watchedSymsArr.length === 0) return;
    const unsub = window.Intraday.subscribeMany(watchedSymsArr, (result) => {
      setQuotes(result.quotes);
    });
    return unsub;
  }, [symsKey]);

  const mockFallback = React.useMemo(() => {
    if (!window.MOCK) return [];
    const set = new Set(watchedSymsArr);
    return window.MOCK.WATCHLIST.filter((r) => set.has(r.sym));
  }, [symsKey]);

  const [nameMap, setNameMap] = React.useState(null);
  React.useEffect(() => {
    if (!window.FinMind || !window.FinMind.getTaiwanUniverse) return;
    window.FinMind.getTaiwanUniverse()
      .then((list) => setNameMap(new Map(list.map((s) => [s.sym, s.name]))))
      .catch(() => {});
  }, []);

  const rows = React.useMemo(() => {
    const base = baseRows || mockFallback;
    const merged = window.WatchlistEngine
      ? window.WatchlistEngine.mergeQuotes(base, quotes)
      : base;
    if (!nameMap) return merged;
    return merged.map((r) => {
      const fallbackName = r.sym.replace(/\.TW$/, "");
      if ((r.name === fallbackName || !r.name) && nameMap.get(r.sym)) {
        return { ...r, name: nameMap.get(r.sym) };
      }
      return r;
    });
  }, [baseRows, mockFallback, quotes, nameMap]);

  const dataReady = baseRows != null;
  const liveQuotes = quotes && quotes.size > 0;

  const tw = rows.filter(r => r.market === "TW");
  const us = rows.filter(r => r.market === "US");
  const upTW = tw.filter(r => r.pct > 0).length;
  const upUS = us.filter(r => r.pct > 0).length;
  const news = window.MOCK.NEWS.length;
  const newsHigh = window.MOCK.NEWS.filter(n => n.weight === "high").length;

  const splitByMarket = (filterFn, sortFn) => {
    const arr = rows.filter(filterFn);
    return {
      tw: arr.filter(r => r.market === "TW").sort(sortFn),
      us: arr.filter(r => r.market === "US").sort(sortFn),
    };
  };
  const bullish = splitByMarket(r => r.ma === "Bullish", (a, b) => b.pct - a.pct);
  const sideways = splitByMarket(r => r.ma === "Sideways", (a, b) => b.volMa - a.volMa);
  const trendMarketArg = trendMarket === "all" ? null : trendMarket;

  /* 觀察清單中今日最強的台股 / 美股（取代原本的 mock sector KPI） */
  const topTw = tw.length ? [...tw].sort((a, b) => b.pct - a.pct)[0] : null;
  const topUs = us.length ? [...us].sort((a, b) => b.pct - a.pct)[0] : null;

  return (
    <div className="page overview">
      <MarketSummaryBar data={window.MOCK.MARKET_SUMMARY}/>

      {/* KPI strip — 拿掉「今日觸發」(搬到設定) 改成族群領頭資訊 */}
      <div className="kpi-strip">
        <KPICard
          label="觀察清單"
          value={rows.length}
          sub={`${tw.length} 台股 · ${us.length} 美股`}
          icon="list"/>
        <KPICard
          label="台股上漲"
          value={`${upTW} / ${tw.length}`}
          sub={`下跌 ${tw.length - upTW}`}
          accent={upTW >= tw.length / 2 ? "up" : "down"}
          icon="trending-up"/>
        <KPICard
          label="美股上漲"
          value={`${upUS} / ${us.length}`}
          sub={`下跌 ${us.length - upUS}`}
          accent={upUS >= us.length / 2 ? "up" : "down"}
          icon="trending-up"/>
        <KPICard
          label="台股最強"
          value={topTw ? `${topTw.pct >= 0 ? "+" : ""}${fmt(topTw.pct, 2)}%` : "—"}
          sub={topTw ? `${topTw.sym.replace(".TW","")} ${topTw.name || ""}` : ""}
          accent={topTw && topTw.pct >= 0 ? "up" : "down"}
          icon="trending-up"/>
        <KPICard
          label="美股最強"
          value={topUs ? `${topUs.pct >= 0 ? "+" : ""}${fmt(topUs.pct, 2)}%` : "—"}
          sub={topUs ? `${topUs.sym} ${topUs.name || ""}` : ""}
          accent={topUs && topUs.pct >= 0 ? "up" : "down"}
          icon="trending-up"/>
        <KPICard
          label="新聞 (24h)"
          value={news}
          sub={`${newsHigh} 重要`}
          icon="news"/>
      </div>

      {/* 觀察清單體質 — 多頭 / 盤整 */}
      <section className="trend-section">
        <header className="trend-section-head">
          <div className="trend-section-head-l">
            <h2 className="trend-section-title">觀察清單體質</h2>
            <span className="dim mono trend-section-sub">
              {rows.length} 檔 · 來自 {userLists.length} 份清單
            </span>
            {!dataReady && <span className="pill" style={{fontSize:"var(--fs-xs)"}}>載入日 K…</span>}
            {loadErr && <span className="pill warn" style={{fontSize:"var(--fs-xs)"}} title={loadErr}>載入失敗</span>}
            {liveQuotes && <span className="pill success dot" style={{fontSize:"var(--fs-xs)"}}>即時報價</span>}
          </div>
          <div className="seg trend-filter">
            <button className={trendMarket === "all" ? "active" : ""}
                    onClick={() => setTrendMarket("all")}>全部</button>
            <button className={trendMarket === "TW" ? "active" : ""}
                    onClick={() => setTrendMarket("TW")}>台股</button>
            <button className={trendMarket === "US" ? "active" : ""}
                    onClick={() => setTrendMarket("US")}>美股</button>
          </div>
        </header>
        <div className="trend-grid">
          <TrendCard
            kind="bullish"
            title="均線多頭"
            icon="trending-up"
            twRows={bullish.tw}
            usRows={bullish.us}
            market={trendMarketArg}
            onOpen={goChart}
            emptyHint="目前清單裡沒有多頭股票"/>
          <TrendCard
            kind="sideways"
            title="盤整待變"
            icon="dot"
            twRows={sideways.tw}
            usRows={sideways.us}
            market={trendMarketArg}
            onOpen={goChart}
            emptyHint="目前清單裡沒有盤整股票"/>
        </div>
      </section>

    </div>
  );
};

window.OverviewPage = OverviewPage;