/* ============================================================
   Edge Capital — shared UI primitives  (exports to window)
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------------- Icons ---------------- */
const ICONS = {
  dashboard: <><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/></>,
  clients: <><path d="M16 19a4 4 0 0 0-8 0"/><circle cx="12" cy="9" r="3.2"/><path d="M21 19a3.4 3.4 0 0 0-5-3"/><path d="M3 19a3.4 3.4 0 0 1 5-3"/></>,
  portfolio: <><path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 15l3.5-4.5 3 2L20 6"/></>,
  orders: <><path d="M4 7h13l-3-3"/><path d="M20 17H7l3 3"/></>,
  fees: <><circle cx="12" cy="12" r="8.5"/><path d="M9 15l6-6"/><circle cx="9.5" cy="9.5" r="1"/><circle cx="14.5" cy="14.5" r="1"/></>,
  compliance: <><path d="M12 3l7 3v5c0 4.4-3 8-7 10-4-2-7-5.6-7-10V6z"/><path d="M9 12l2 2 4-4"/></>,
  search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></>,
  bell: <><path d="M18 8a6 6 0 0 0-12 0c0 7-3 8-3 8h18s-3-1-3-8"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></>,
  plus: <><path d="M12 5v14M5 12h14"/></>,
  check: <><path d="M20 6L9 17l-5-5"/></>,
  spinner: <><path d="M12 3a9 9 0 1 0 9 9"/></>,
  arrowRight: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
  alert: <><path d="M12 3l9 16H3z"/><path d="M12 10v4M12 17h.01"/></>,
  clock: <><circle cx="12" cy="12" r="8.5"/><path d="M12 8v4.5l3 2"/></>,
  doc: <><path d="M6 3h8l5 5v13H6z"/><path d="M14 3v5h5"/></>,
  pen: <><path d="M4 20h4L19 9a2 2 0 0 0-3-3L5 17z"/><path d="M14 7l3 3"/></>,
  scale: <><path d="M12 4v16M7 8h10"/><path d="M7 8l-3 6a3 3 0 0 0 6 0z"/><path d="M17 8l-3 6a3 3 0 0 0 6 0z"/><path d="M8 20h8"/></>,
  bank: <><path d="M4 10h16M5 10l7-5 7 5M6 10v8M10 10v8M14 10v8M18 10v8M4 21h16"/></>,
  info: <><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5M12 8h.01"/></>,
  edit: <><path d="M4 20h4L18 10l-4-4L4 16z"/><path d="M13 7l4 4"/></>,
  shieldCheck: <><path d="M12 3l7 3v5c0 4.4-3 8-7 10-4-2-7-5.6-7-10V6z"/><path d="M9 12l2 2 4-4"/></>,
  send: <><path d="M21 4L3 11l7 2 2 7z"/><path d="M21 4l-9 9"/></>,
  user: <><circle cx="12" cy="8" r="4"/><path d="M5 20a7 7 0 0 1 14 0"/></>,
  trend: <><path d="M3 17l6-6 4 4 8-8"/><path d="M21 7v5h-5"/></>,
  file: <><path d="M6 3h8l5 5v13H6z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></>,
  receipt: <><path d="M6 3h12v18l-3-2-3 2-3-2-3 2z"/><path d="M9 8h6M9 12h6"/></>,
};
function Icon({ name, style }) {
  return (
    <svg viewBox="0 0 24 24" style={style} fill="none" stroke="currentColor"
      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {ICONS[name] || null}
    </svg>
  );
}

/* ---------------- Chip ---------------- */
function Chip({ kind = "grey", icon, spin, children }) {
  return (
    <span className={"chip chip-" + kind + (spin ? " chip-spin" : "")}>
      {icon && <Icon name={icon} />}
      {children}
    </span>
  );
}

/* ---------------- Sidebar ---------------- */
const NAV = [
  { id: "dashboard", label: "Dashboard", icon: "dashboard" },
  { id: "onboarding", label: "Clients", icon: "clients", badge: 2 },
  { id: "portfolio", label: "Portfolios", icon: "portfolio" },
  { id: "orders", label: "Orders", icon: "orders" },
  { id: "fees", label: "Fees", icon: "fees" },
  { id: "compliance", label: "Compliance", icon: "compliance" },
];
// which nav item is highlighted for each screen
const NAV_FOR = {
  dashboard: "dashboard", onboarding: "onboarding", risk: "onboarding",
  ips: "onboarding", portfolio: "portfolio", orders: "orders", fees: "fees", compliance: "compliance",
};
function Sidebar({ screen, go }) {
  const active = NAV_FOR[screen] || screen;
  return (
    <aside className="sidebar">
      <div className="sb-logo"><img src="assets/edge-logo-knockout.png" alt="Edge Capital" /></div>
      <div className="sb-section">Advisory</div>
      {NAV.map((n) => (
        <button key={n.id} className={"nav-item" + (active === n.id ? " active" : "")}
          onClick={() => go(n.id)}>
          <span className="ic"><Icon name={n.icon} /></span>
          {n.label}
          {n.badge && <span className="badge">{n.badge}</span>}
        </button>
      ))}
      <div className="sb-spacer" />
      <div className="sb-user">
        <div className="av">{DATA.advisor.initials}</div>
        <div>
          <div className="nm">{DATA.advisor.name}</div>
          <div className="rl">{DATA.advisor.role}</div>
        </div>
      </div>
    </aside>
  );
}

/* ---------------- Topbar ---------------- */
function Topbar({ crumb, action }) {
  return (
    <div className="topbar">
      <div className="tb-crumb">
        {crumb.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            {i === crumb.length - 1 ? <b>{c}</b> : <span>{c}</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="tb-spacer" />
      <div className="tb-search"><Icon name="search" /> Search clients, orders…</div>
      <button className="tb-icon"><Icon name="bell" /></button>
      {action}
    </div>
  );
}

/* ---------------- StatCard ---------------- */
function StatCard({ icon, label, cur, value, meta, up }) {
  return (
    <div className="stat">
      <div className="lab"><span className="dot"><Icon name={icon} /></span>{label}</div>
      <div className="val tnum">{cur && <span className="cur">{cur}</span>}{value}</div>
      {meta && <div className="meta">{up && <span className="up">▲ {up}</span>}{meta}</div>}
    </div>
  );
}

/* ---------------- Allocation stacked bar + legend ---------------- */
function AllocBar({ segments, height }) {
  // segments: [{key,label,color,pct}]
  return (
    <div>
      <div className="allocbar" style={height ? { height } : null}>
        {segments.map((s) => (
          <div key={s.key} className="seg" style={{ width: s.pct + "%", background: s.color }} title={s.label + " " + s.pct + "%"} />
        ))}
      </div>
      <div className="alloc-legend">
        {segments.map((s) => (
          <div className="it" key={s.key}>
            <span className="sw" style={{ background: s.color }} />
            {s.label} <span className="pct tnum">{s.pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Donut (SVG) ---------------- */
function Donut({ segments, size = 180, stroke = 26, center }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <g transform={`rotate(-90 ${size / 2} ${size / 2})`}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#EEF0F3" strokeWidth={stroke} />
        {segments.map((s) => {
          const len = (s.pct / 100) * c;
          const el = (
            <circle key={s.key} cx={size / 2} cy={size / 2} r={r} fill="none"
              stroke={s.color} strokeWidth={stroke}
              strokeDasharray={`${len} ${c - len}`} strokeDashoffset={-offset} />
          );
          offset += len;
          return el;
        })}
      </g>
      {center && (
        <foreignObject x="0" y="0" width={size} height={size}>
          <div style={{ height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center" }}>
            {center}
          </div>
        </foreignObject>
      )}
    </svg>
  );
}

/* ---------------- Toast ---------------- */
function Toast({ children }) {
  return <div className="toast"><Icon name="check" />{children}</div>;
}

/* ---------------- Advance bar (golden path) ---------------- */
function AdvanceBar({ hint, children }) {
  return (
    <div className="advance">
      {hint && <div className="hint">{hint}</div>}
      {children}
    </div>
  );
}

Object.assign(window, {
  Icon, Chip, Sidebar, Topbar, StatCard, AllocBar, Donut, Toast, AdvanceBar, NAV,
});