// Helm — Overview (總覽 / 駕駛艙). 數字全部跟著真實資料自動算。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Card, KpiCard, AmountDisplay, InsightCard, LiquidityBar } = NS;

  function fmt(n) { return Math.round(n).toLocaleString("en-US"); }
  function wan(n) { return "約 " + (Math.round(n / 1e4)).toLocaleString("en-US") + " 萬"; }

  function Legend({ allocation, total, active, setActive }) {
    return (
      <div className="ov-legend">
        {allocation.map((s, i) => (
          <button key={s.cat} className={"ov-legend__row" + (active === i ? " is-active" : "")}
            onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)}
            onFocus={() => setActive(i)}>
            <span className="ov-legend__dot" style={{ background: s.color }} />
            <span className="ov-legend__cat">{s.cat}</span>
            <span className="ov-legend__amt t-num">{fmt(s.value)}</span>
            <span className="ov-legend__pct t-num">{total ? ((s.value / total) * 100).toFixed(1) : "0.0"}%</span>
          </button>
        ))}
      </div>
    );
  }

  function Overview() {
    const H = window.HELM;
    const [active, setActive] = React.useState(null);
    const segments = H.allocation.map((a) => ({ label: a.cat, value: a.value, color: a.color }));

    // 跟著真實資料算:最大配置類別 + 流動性
    const top = H.allocation[0];
    const topPct = top && H.totalAssets ? (top.value / H.totalAssets) * 100 : 0;
    const liqPct = H.totalAssets ? (H.liquid / H.totalAssets) * 100 : 0;

    return (
      <div className="screen">
        {/* ① 淨值英雄區 */}
        <Card variant="lg" className="ov-hero">
          <div className="t-overline">淨資產</div>
          <AmountDisplay value={H.netWorth} size="hero" />
          <div className="ov-hero__sub">
            <span className="ov-colloq t-num">{wan(H.netWorth)}</span>
            <span className="ov-hero__guide">這是你目前掌握的淨值</span>
          </div>
          {/* 趨勢圖佔位（累積幾次更新後長出折線） */}
          <div className="ov-trend">
            <i className="ph ph-chart-line-up" aria-hidden="true" />
            <span>淨值趨勢 · 累積幾次更新後自動長出</span>
          </div>
        </Card>

        {/* 次級 KPI：總資產 / 總負債 */}
        <div className="helm-kpi-pair">
          <Card><KpiCard label="總資產" size="mini" icon="ph-trend-up" sub={wan(H.totalAssets)}>
            <AmountDisplay value={H.totalAssets} size="md" tone="positive" />
          </KpiCard></Card>
          <Card><KpiCard label="總負債" size="mini" icon="ph-trend-down" sub={wan(H.totalLiab)}>
            <AmountDisplay value={H.totalLiab} size="md" tone="negative" />
          </KpiCard></Card>
        </div>

        {/* ② 資產配置圓餅 */}
        <Card>
          <div className="ov-sec"><span className="t-overline">資產配置</span></div>
          <div className="ov-donut">
            <window.DonutChart
              segments={segments}
              centerLabel="總資產"
              centerValue={"NT$ " + fmt(H.totalAssets)}
              height={236}
            />
          </div>
          <Legend allocation={H.allocation} total={H.totalAssets} active={active} setActive={setActive} />
        </Card>

        {/* ③ 配置洞察(只有當某類別明顯集中才顯示) */}
        {top && topPct >= 40 && (
          <React.Fragment>
            <div className="ov-sec"><span className="t-overline">配置洞察</span></div>
            <InsightCard tone="brass" icon="ph-buildings" title="你的資產很集中">
              有 <b>{topPct.toFixed(1)}%</b> 集中在{top.cat}。這不是壞事，放在心上就好。
            </InsightCard>
          </React.Fragment>
        )}
        <Card>
          <div className="ov-liq-head">
            <span className="t-label" style={{ fontWeight: 600 }}>流動性</span>
            <span className="t-caption">活錢只佔 <b style={{ color: "var(--text-primary)" }}>{liqPct.toFixed(1)}%</b></span>
          </div>
          <LiquidityBar segments={[
            { key: "liquid", label: "活錢（現金＋ETF＋美股）", value: H.liquid, color: "var(--c-alloc-4)" },
            { key: "illiquid", label: "不動／低流動", value: H.totalAssets - H.liquid, color: "var(--c-alloc-1)" },
          ]} />
        </Card>
      </div>
    );
  }

  window.Overview = Overview;
})();