/* ============================================================
   Edge Capital — Screens C: Portfolio, Orders, Fees
   ============================================================ */
const { useState: useStateC, useEffect: useEffectC } = React;

// class totals helper
function classTotals() {
  const t = {}; let total = 0;
  DATA.holdings.forEach((h) => { t[h.cls] = (t[h.cls] || 0) + h.value; total += h.value; });
  return { t, total };
}

/* ===================== PORTFOLIO ===================== */
function Portfolio({ go }) {
  const { t, total } = classTotals();
  const order = ["bonds", "equities", "trusts", "deposits"];
  const segs = order.map((k) => ({ key: k, label: DATA.ac[k].label, color: DATA.ac[k].color, pct: Math.round((t[k] / total) * 1000) / 10 }));
  const costTotal = DATA.holdings.reduce((s, h) => s + h.cost, 0);
  const gain = total - costTotal;
  const gainPct = ((gain / costTotal) * 100).toFixed(1);

  // drift vs IPS bands
  const drift = DATA.ipsBands.map((b) => {
    const actual = Math.round((t[b.key] / total) * 1000) / 10;
    let flag = "ok";
    if (actual > b.max) flag = "over";
    else if (actual < b.min) flag = "under";
    return { ...b, actual, flag };
  });
  const hasDrift = drift.some((d) => d.flag !== "ok");

  return (
    <div className="content-inner fade">
      <div className="page-head">
        <div>
          <div className="onb-eyebrow">Portfolio · Neema Mushi</div>
          <h1>Portfolio</h1>
          <div className="desc">Balanced mandate · IPS v1.0 · Advisory (non-discretionary)</div>
        </div>
        <button className="btn btn-primary" onClick={() => go("orders")}><Icon name="orders" /> Place order</button>
      </div>

      <div className="grid-3" style={{ marginBottom: 22 }}>
        <StatCard icon="portfolio" label="Total market value" cur="TZS" value={(total / 1e6).toFixed(1) + "M"} meta="across 8 holdings" />
        <StatCard icon="trend" label="Unrealised gain" cur="TZS" value={(gain / 1e6).toFixed(1) + "M"} up={gainPct + "%"} meta="since purchase" />
        <StatCard icon="scale" label="Band status" value={hasDrift ? "1 drifted" : "On target"} meta={hasDrift ? "unit trusts above maximum" : "all classes within bands"} />
      </div>

      <div className="col-2" style={{ marginBottom: 22 }}>
        {/* allocation donut */}
        <div className="card">
          <div className="card-head"><h3>Allocation vs target</h3><span className="sub">market value by asset class</span></div>
          <div className="card-pad alloc-split">
            <Donut segments={segs} size={188} center={
              <><div className="donut-cur">TZS</div><div className="donut-val tnum">{(total / 1e6).toFixed(1)}M</div><div className="donut-lab">market value</div></>
            } />
            <div className="alloc-rows">
              {drift.map((d) => (
                <div className="alloc-r" key={d.key}>
                  <span className="ar-sw" style={{ background: DATA.ac[d.key].color }} />
                  <span className="ar-name">{d.cls}</span>
                  <span className="ar-actual tnum">{d.actual}%</span>
                  <span className="ar-target tnum">target {d.target}%</span>
                  {d.flag === "ok"
                    ? <Chip kind="green">In band</Chip>
                    : <Chip kind="amber" icon="alert">{d.flag === "over" ? "Above max" : "Below min"}</Chip>}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* drift alert / rebalance */}
        <div className="card rebal">
          <div className="card-head"><h3>Suitability watch</h3></div>
          <div className="card-pad">
            {hasDrift ? (
              <>
                <div className="rebal-flag">
                  <span className="flag-ic"><Icon name="alert" /></span>
                  <div>
                    <div className="rebal-title">Unit trusts at 26% — above the 25% maximum</div>
                    <div className="rebal-desc">The IPS caps unit trusts at 25%. Trimming ~TZS 0.5M back into equities or bonds brings the portfolio within band.</div>
                  </div>
                </div>
                <button className="btn btn-primary" style={{ width: "100%", marginTop: 16 }} onClick={() => go("orders")}>
                  Rebalance to bands <Icon name="arrowRight" />
                </button>
                <div className="rebal-foot"><Icon name="info" style={{ width: 14, height: 14 }} /> The system watches every portfolio against its IPS automatically.</div>
              </>
            ) : <div className="muted">All classes within their IPS bands.</div>}
          </div>
        </div>
      </div>

      {/* holdings table */}
      <div className="card">
        <div className="card-head"><h3>Holdings</h3><span className="sub">8 instruments · DSE & fixed income</span></div>
        <table className="tbl">
          <thead><tr>
            <th>Instrument</th><th>Class</th><th className="r">Units</th><th className="r">Cost</th>
            <th className="r">Market value</th><th className="r">Gain / loss</th>
          </tr></thead>
          <tbody>
            {DATA.holdings.map((h) => {
              const g = h.value - h.cost; const gp = ((g / h.cost) * 100).toFixed(1);
              return (
                <tr key={h.tick}>
                  <td><span className="inst">{h.inst}</span><div className="tick">{h.tick}</div></td>
                  <td><span className="band-sw" style={{ background: DATA.ac[h.cls].color }} />{DATA.ac[h.cls].label}</td>
                  <td className="r tnum muted">{DATA.fmt(h.units)}</td>
                  <td className="r tnum muted">{DATA.fmt(h.cost)}</td>
                  <td className="r tnum" style={{ fontWeight: 600 }}>{DATA.fmt(h.value)}</td>
                  <td className="r tnum" style={{ color: g >= 0 ? "var(--green-700)" : "var(--red)", fontWeight: 600 }}>
                    {g >= 0 ? "+" : "−"}{DATA.fmt(Math.abs(g))} <span style={{ opacity: .7, fontWeight: 500 }}>({g >= 0 ? "+" : "−"}{Math.abs(gp)}%)</span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ===================== ORDERS ===================== */
const STATE_CHIP = {
  pending: { kind: "amber", icon: "clock", label: "Awaiting approval" },
  approved: { kind: "blue", icon: "check", label: "Approved" },
  desk: { kind: "grey", icon: "clock", label: "At dealing desk" },
  filled: { kind: "green", icon: "check", label: "Filled" },
};

function Orders({ go, state, setState }) {
  const [rows, setRows] = useStateC(() => DATA.blotter.map((b) => ({ ...b, state: (state.approvedOrder && b.id === "ORD-2041") ? "approved" : b.state })));
  const [toast, setToast] = useStateC(null);

  function approve(id) {
    setRows((rs) => rs.map((r) => r.id === id ? { ...r, state: "approved" } : r));
    setState((s) => ({ ...s, approvedOrder: true }));
    setToast("Order " + id + " approved — sent to the dealing desk");
    setTimeout(() => setToast(null), 2600);
  }
  const pending = rows.find((r) => r.state === "pending");

  return (
    <div className="content-inner fade">
      <div className="page-head">
        <div>
          <div className="onb-eyebrow">Orders · Dealing desk</div>
          <h1>Order book</h1>
          <div className="desc">Every order needs a second approval before it leaves the desk.</div>
        </div>
        <button className="btn btn-ghost"><Icon name="plus" /> New order</button>
      </div>

      {/* the new rebalance order ticket */}
      <div className="card ticket" style={{ marginBottom: 22 }}>
        <div className="card-head">
          <h3>New order — rebalance</h3>
          <Chip kind="blue" icon="user">Neema Mushi</Chip>
        </div>
        <div className="ticket-body">
          <div className="ticket-fields">
            <div className="tf"><div className="tf-k">Side</div><div className="tf-v"><span className="side buy">Buy</span></div></div>
            <div className="tf"><div className="tf-k">Instrument</div><div className="tf-v">CRDB Bank <span className="tick">CRDB · DSE</span></div></div>
            <div className="tf"><div className="tf-k">Quantity</div><div className="tf-v tnum">2,000</div></div>
            <div className="tf"><div className="tf-k">Price</div><div className="tf-v">Market <span className="tick">≈ 650</span></div></div>
            <div className="tf"><div className="tf-k">Est. value</div><div className="tf-v tnum">TZS 1,300,000</div></div>
          </div>
          <div className="ticket-checks">
            <div className="tk-ok"><Icon name="check" /> Within IPS equity band</div>
            <div className="tk-ok"><Icon name="check" /> Funds available in trust account</div>
            <div className="tk-ok"><Icon name="check" /> Brings unit trusts back under 25%</div>
          </div>
        </div>
      </div>

      {/* blotter */}
      <div className="card">
        <div className="card-head"><h3>Order book</h3><span className="sub">today · maker–checker</span></div>
        <table className="tbl">
          <thead><tr>
            <th>Order</th><th>Client</th><th>Side</th><th>Instrument</th>
            <th className="r">Qty</th><th className="r">Est. value</th><th>Status</th><th></th>
          </tr></thead>
          <tbody>
            {rows.map((r) => {
              const sc = STATE_CHIP[r.state];
              return (
                <tr key={r.id}>
                  <td className="tnum" style={{ fontWeight: 600 }}>{r.id}</td>
                  <td>{r.client}</td>
                  <td><span className={"side " + r.side.toLowerCase()}>{r.side}</span></td>
                  <td className="inst">{r.inst}</td>
                  <td className="r tnum muted">{DATA.fmt(r.qty)}</td>
                  <td className="r tnum">{DATA.fmt(r.est)}</td>
                  <td><Chip kind={sc.kind} icon={sc.icon}>{sc.label}</Chip></td>
                  <td className="r">{r.state === "pending"
                    ? <button className="btn btn-primary btn-sm" onClick={() => approve(r.id)}><Icon name="check" /> Approve</button>
                    : <span className="muted" style={{ fontSize: 13 }}>—</span>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <AdvanceBar hint={pending
        ? <><Icon name="info" style={{ width: 15, height: 15 }} /> Approve ORD-2041 to send it to the desk</>
        : <><Icon name="check" style={{ width: 15, height: 15, color: "var(--green-700)" }} /> Order approved and on its way to the DSE</>}>
        <button className="btn btn-green btn-lg" onClick={() => go("fees")} disabled={!!pending}>
          Continue to fees <Icon name="arrowRight" />
        </button>
      </AdvanceBar>

      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}

/* ===================== FEES ===================== */
function Fees({ go }) {
  const [view, setView] = useStateC("client");
  const cf = DATA.clientFees, ff = DATA.firmFees;
  const ytdCommission = cf.commissions.reduce((s, c) => s + c.amount, 0);

  const firmRows = [
    { label: "Advisory fees", ...ff.advisory, color: "var(--blue)" },
    { label: "Brokerage commissions", ...ff.commissions, color: "var(--green)" },
    { label: "Trailer fees", ...ff.trailer, color: "var(--amber)" },
  ];
  const sum = (k) => firmRows.reduce((s, r) => s + r[k], 0);

  return (
    <div className="content-inner fade">
      <div className="page-head">
        <div>
          <div className="onb-eyebrow">Fees</div>
          <h1>Fees &amp; billing</h1>
          <div className="desc">The same fees, shown two ways — to the client, and to the firm.</div>
        </div>
        <div className="seg-toggle">
          <button className={view === "client" ? "on" : ""} onClick={() => setView("client")}>Client view</button>
          <button className={view === "firm" ? "on" : ""} onClick={() => setView("firm")}>Firm view</button>
        </div>
      </div>

      {view === "client" ? (
        <div className="fade">
          <div className="grid-3" style={{ marginBottom: 22 }}>
            <StatCard icon="fees" label="Advisory fee rate" value={cf.advisoryRate + "%"} meta="per year, on assets advised" />
            <StatCard icon="receipt" label="This month's advisory fee" cur="TZS" value={DATA.fmt(cf.advisoryMonthly)} meta="charged monthly in arrears" />
            <StatCard icon="trend" label="Fees year to date" cur="TZS" value={DATA.fmt(cf.advisoryYtd + ytdCommission)} meta="advisory + transaction" />
          </div>
          <div className="card">
            <div className="card-head"><h3>Transaction charges</h3><span className="sub">Neema Mushi · 2026</span></div>
            <table className="tbl">
              <thead><tr><th>Date</th><th>Description</th><th className="r">Amount</th></tr></thead>
              <tbody>
                {cf.commissions.map((c, i) => (
                  <tr key={i}><td className="muted">{c.date}</td><td>{c.desc}</td><td className="r tnum" style={{ fontWeight: 600 }}>TZS {DATA.fmt(c.amount)}</td></tr>
                ))}
                <tr><td></td><td style={{ fontWeight: 600 }}>Total transaction charges</td><td className="r tnum" style={{ fontWeight: 700 }}>TZS {DATA.fmt(ytdCommission)}</td></tr>
              </tbody>
            </table>
          </div>
          <div className="fee-note"><Icon name="info" style={{ width: 15, height: 15 }} /> Every charge is itemised for the client — no surprises, fully traceable.</div>
        </div>
      ) : (
        <div className="fade">
          <div className="grid-3" style={{ marginBottom: 22 }}>
            <StatCard icon="fees" label="Accrued this month" cur="TZS" value={(sum("accrued") / 1e6).toFixed(1) + "M"} meta="earned, across the book" />
            <StatCard icon="receipt" label="Invoiced" cur="TZS" value={(sum("invoiced") / 1e6).toFixed(1) + "M"} meta="billed to clients" />
            <StatCard icon="check" label="Collected" cur="TZS" value={(sum("collected") / 1e6).toFixed(1) + "M"} meta={Math.round(sum("collected") / sum("accrued") * 100) + "% of accrued"} />
          </div>
          <div className="card">
            <div className="card-head"><h3>Revenue by type</h3><span className="sub">accrued → invoiced → collected</span></div>
            <div className="card-pad">
              {firmRows.map((r) => (
                <div className="fee-track" key={r.label}>
                  <div className="ft-head"><span className="ft-name"><span className="band-sw" style={{ background: r.color }} />{r.label}</span>
                    <span className="ft-vals tnum"><b>TZS {DATA.fmt(r.collected)}</b> collected of {DATA.fmt(r.accrued)}</span></div>
                  <div className="ft-bar">
                    <div className="ft-seg accrued" style={{ width: "100%", background: "color-mix(in srgb," + r.color + " 16%, white)" }} />
                    <div className="ft-seg invoiced" style={{ width: (r.invoiced / r.accrued * 100) + "%", background: "color-mix(in srgb," + r.color + " 42%, white)" }} />
                    <div className="ft-seg collected" style={{ width: (r.collected / r.accrued * 100) + "%", background: r.color }} />
                  </div>
                </div>
              ))}
              <div className="ft-legend">
                <span><span className="lg-sw" style={{ background: "#cfd6df" }} />Accrued</span>
                <span><span className="lg-sw" style={{ background: "#9fb0c4" }} />Invoiced</span>
                <span><span className="lg-sw" style={{ background: "var(--blue)" }} />Collected</span>
              </div>
            </div>
          </div>
        </div>
      )}

      <AdvanceBar hint={<><Icon name="check" style={{ width: 15, height: 15, color: "var(--green-700)" }} /> That's the full journey — onboarding to a billed, compliant client</>}>
        <button className="btn btn-primary btn-lg" onClick={() => go("dashboard")}>Back to dashboard <Icon name="arrowRight" /></button>
      </AdvanceBar>
    </div>
  );
}

Object.assign(window, { Portfolio, Orders, Fees });