/* global window, React */

window.Revenue = function Revenue({ ctx }) {
  const Icon = window.Icon;
  const [period, setPeriod] = React.useState("12m");
  const periods = [
    { value: "30d", label: "30 Hari" },
    { value: "12m", label: "12 Bulan" },
    { value: "ytd", label: "YTD" },
  ];

  const total = window.REVENUE_MONTHLY.reduce((a, b) => a + b.actual, 0);
  const target = window.REVENUE_MONTHLY.reduce((a, b) => a + b.target, 0);
  const pct = (total / target) * 100;

  return (
    <window.Screen
      title="Omzet & Trend"
      back={true}
      onBack={() => ctx.go("profile")}
      right={<button className="icon-btn" onClick={() => ctx.notify("Export PDF")}><Icon.Download size={18} /></button>}
    >
      <window.Segmented options={periods} value={period} onChange={setPeriod} />

      {/* Summary */}
      <div className="m-card" style={{ marginBottom: 12, textAlign: "center" }}>
        <div className="label-tiny">Total Omzet · 12 Bulan</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 700, marginTop: 6 }}>
          {window.fmtShort(total)}
        </div>
        <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 6 }}>
          {pct.toFixed(1)}% dari target {window.fmtShort(target)}
        </div>
        <window.StatusPill tone="emerald" dot>Trending +8,2%</window.StatusPill>
      </div>

      {/* Chart */}
      <window.MSection title="Trend bulanan" sub="Aktual vs target">
        <div className="m-card">
          <window.LineChart data={window.REVENUE_MONTHLY} valueKey="actual" targetKey="target" />
          <div className="row" style={{ justifyContent: "center", gap: 16, marginTop: 8 }}>
            <window.StatusPill tone="primary" dot>Aktual</window.StatusPill>
            <span className="status-pill"><span className="pill-dot" style={{ background: "#94a3b8" }}></span>Target</span>
          </div>
        </div>
      </window.MSection>

      {/* Channel breakdown */}
      <window.MSection title="Breakdown Channel">
        <div className="m-card">
          {window.REVENUE_BY_CHANNEL.map((c, i) => (
            <div key={i} className="ch-row">
              <div className="ch-dot" style={{ background: c.color }}></div>
              <div className="ch-body">
                <div className="between">
                  <div className="ch-name">{c.name}</div>
                  <div className="ch-val">{window.fmtShort(c.value)}</div>
                </div>
                <div className="ch-bar"><div style={{ width: `${c.pct}%`, background: c.color }}></div></div>
                <div className="ch-pct">{c.pct}% kontribusi</div>
              </div>
            </div>
          ))}
        </div>
      </window.MSection>

      {/* Top products */}
      <window.MSection title="Top Produk" action="Semua" onAction={() => ctx.go("products")}>
        {window.REVENUE_BY_PRODUCT.slice(0, 4).map((p, i) => (
          <div key={i} className="prod-card">
            <div className="pi"><Icon.Package size={18} /></div>
            <div className="pb">
              <div className="pn">{p.sku}</div>
              <div className="pc">{p.category}</div>
            </div>
            <div className="pr">
              <div className="pv">{window.fmtShort(p.revenue)}</div>
              <div className={`pg ${p.growth >= 0 ? "up" : "down"}`}>{p.growth >= 0 ? "+" : ""}{p.growth}%</div>
            </div>
          </div>
        ))}
      </window.MSection>
    </window.Screen>
  );
};