/* ============================================================
   Edge Capital — Screens A: Dashboard, Onboarding
   ============================================================ */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

/* ===================== DASHBOARD ===================== */
function Dashboard({ go }) {
  const feedIcon = { verify: "shieldCheck", drift: "alert", sign: "pen", order: "orders", fee: "fees", review: "clock" };
  const feedTone = { verify: "var(--green)", drift: "var(--amber)", sign: "var(--blue)", order: "var(--blue)", fee: "var(--green-700)", review: "var(--faint)" };
  return (
    <div className="content-inner fade">
      <div className="page-head">
        <div>
          <h1>Good morning, Adam</h1>
          <div className="desc">Thursday, 11 June 2026 · Here's where your book stands today.</div>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => go("onboarding")}>
          <Icon name="plus" /> New client
        </button>
      </div>

      <div className="grid-3" style={{ marginBottom: 22 }}>
        <StatCard icon="clients" label="Clients under advisory" value="47" meta="across individual & institutional mandates" />
        <StatCard icon="portfolio" label="Assets under advisory" cur="TZS" value="8.2B" up="2.1%" meta="vs last month" />
        <StatCard icon="fees" label="Fees accrued this month" cur="TZS" value="14.6M" up="6.4%" meta="vs last month" />
      </div>

      <div className="col-2">
        {/* needs attention */}
        <div className="card">
          <div className="card-head"><h3>Needs attention</h3><span className="sub">6 items</span></div>
          <div className="needs">
            {DATA.needsAttention.map((n) => (
              <button key={n.id} className="need-row" onClick={() => go(n.go)}>
                <span className={"cnt cnt-" + n.tone}>{n.count}</span>
                <span className="lab">{n.label}</span>
                <Icon name="arrowRight" style={{ width: 18, height: 18, color: "var(--faint-2)" }} />
              </button>
            ))}
          </div>
        </div>

        {/* recent activity */}
        <div className="card">
          <div className="card-head"><h3>Recent activity</h3></div>
          <div className="feed">
            {DATA.activity.map((a, i) => (
              <div className="feed-item" key={i}>
                <span className="fdot" style={{ background: "color-mix(in srgb," + feedTone[a.type] + " 14%, white)", color: feedTone[a.type] }}>
                  <Icon name={feedIcon[a.type]} />
                </span>
                <div className="ftext">
                  <div><b>{a.who}</b> {a.what}</div>
                  <div className="when">{a.when}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===================== ONBOARDING ===================== */
const ONB_STEPS = ["Details", "Verification", "Financial profile", "Compliance review"];

function Stepper({ current, maxReached, onJump }) {
  return (
    <div className="stepper">
      {ONB_STEPS.map((s, i) => {
        const st = i < current ? "done" : i === current ? "active" : "upcoming";
        const clickable = i <= maxReached;
        return (
          <React.Fragment key={i}>
            {i > 0 && <div className={"st-bar" + (i <= current ? " filled" : "")} />}
            <button className={"step " + st} disabled={!clickable} onClick={() => clickable && onJump(i)}>
              <span className="num">{i < current ? <Icon name="check" /> : i + 1}</span>
              <span className="lab">{s}</span>
            </button>
          </React.Fragment>
        );
      })}
    </div>
  );
}

const CHECKS = [
  { id: "id", name: "Identity verification", sub: "NIDA & document match", t: 700 },
  { id: "doc", name: "Document verification", sub: "ID card, proof of address", t: 1400 },
  { id: "aml", name: "AML / PEP & sanctions screening", sub: "Watchlists & adverse media", t: 2100 },
  { id: "inc", name: "Income verification", sub: "Bank & mobile-money statements", t: 3400 },
];

function Onboarding({ go, state, setState }) {
  const done = state.verified;
  const [step, setStep] = useStateA(done ? 3 : 1);
  const [maxReached, setMax] = useStateA(done ? 3 : 1);
  const [running, setRunning] = useStateA(false);
  // per-check status: idle | pending | done
  const [cs, setCs] = useStateA(() => {
    const o = {}; CHECKS.forEach((c) => (o[c.id] = done ? "done" : "idle")); return o;
  });
  const [decision, setDecision] = useStateA(state.complianceApproved ? "approved" : null);
  const timers = useRefA([]);

  const goStep = (i) => { setStep(i); setMax((m) => Math.max(m, i)); };

  function runChecks() {
    setRunning(true);
    setCs(() => { const o = {}; CHECKS.forEach((c) => (o[c.id] = "pending")); return o; });
    CHECKS.forEach((c) => {
      timers.current.push(setTimeout(() => {
        setCs((prev) => ({ ...prev, [c.id]: "done" }));
      }, c.t));
    });
    timers.current.push(setTimeout(() => {
      setRunning(false);
      setState((s) => ({ ...s, verified: true }));
    }, CHECKS[CHECKS.length - 1].t + 400));
  }
  useEffectA(() => () => timers.current.forEach(clearTimeout), []);

  const allDone = CHECKS.every((c) => cs[c.id] === "done");

  function approve() {
    setDecision("approved");
    setState((s) => ({ ...s, complianceApproved: true }));
  }

  return (
    <div className="content-inner fade">
      <div className="page-head">
        <div>
          <div className="onb-eyebrow">New client onboarding</div>
          <h1>Neema Mushi</h1>
          <div className="desc">Individual · Balanced profile · Started 11 June 2026</div>
        </div>
        <Chip kind="blue" icon="clock">In progress</Chip>
      </div>

      <Stepper current={step} maxReached={maxReached} onJump={goStep} />

      {/* ---- STEP CONTENT ---- */}
      {step === 0 && (
        <div className="card card-pad fade">
          <div className="kv-grid">
            {[["Full name", "Neema Mushi"], ["Date of birth", "14 March 1989"], ["National ID (NIDA)", "19890314-•••••-•••••-23"],
              ["Phone", "+255 754 •• ••• 18"], ["Email", "neema.mushi@example.co.tz"], ["Occupation", "Pharmacist — self-employed"],
              ["Residence", "Masaki, Dar es Salaam"], ["Tax residency", "Tanzania"]].map(([k, v]) => (
              <div className="kv" key={k}><div className="k">{k}</div><div className="v">{v}</div></div>
            ))}
          </div>
        </div>
      )}

      {step === 1 && (
        <div className="card fade">
          <div className="card-head">
            <h3>Verification</h3>
            <span className="sub">{done || allDone ? "All checks passed" : "Run automated checks to verify this client"}</span>
          </div>
          <div className="checks">
            {CHECKS.map((c) => {
              const status = cs[c.id];
              return (
                <div className="check-row" key={c.id}>
                  <span className={"chk-ic " + status}>
                    {status === "done" ? <Icon name="check" /> : status === "pending" ? <Icon name="spinner" /> : <Icon name="shieldCheck" />}
                  </span>
                  <div className="info">
                    <div className="name">{c.name}</div>
                    <div className="sub">{c.sub}</div>
                  </div>
                  <div className="chk-state">
                    {status === "done" && <Chip kind="green" icon="check">{c.id === "aml" ? "Clear" : "Verified"}</Chip>}
                    {status === "pending" && <Chip kind="blue" spin icon="spinner">{c.id === "inc" ? "In progress" : "Checking"}</Chip>}
                    {status === "idle" && <Chip kind="grey">Ready</Chip>}
                  </div>
                </div>
              );
            })}
          </div>
          <div className="card-foot">
            {!done && !allDone && (
              <button className="btn btn-primary" disabled={running} onClick={runChecks}>
                {running ? <><Icon name="spinner" /> Running checks…</> : <><Icon name="shieldCheck" /> Run checks</>}
              </button>
            )}
            {(done || allDone) && (
              <>
                <div className="foot-note"><Icon name="check" style={{ width: 17, height: 17, color: "var(--green-700)" }} /> Verified automatically in moments — no documents to chase.</div>
                <button className="btn btn-primary" onClick={() => goStep(2)}>Continue <Icon name="arrowRight" /></button>
              </>
            )}
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="card fade">
          <div className="card-head"><h3>Financial profile</h3><Chip kind="blue" icon="info">Auto-filled from statements</Chip></div>
          <div className="card-pad">
            <div className="kv-grid">
              <div className="kv"><div className="k">Declared annual income</div><div className="v tnum">TZS 84,000,000</div></div>
              <div className="kv"><div className="k">Income seen in statements</div><div className="v tnum">TZS 71,200,000</div></div>
              <div className="kv"><div className="k">Estimated net worth</div><div className="v tnum">TZS 310,000,000</div></div>
              <div className="kv"><div className="k">Source of funds</div><div className="v">Business income · property</div></div>
              <div className="kv"><div className="k">Initial investment</div><div className="v tnum">TZS 45,000,000</div></div>
              <div className="kv"><div className="k">Liquidity need</div><div className="v">Low — long horizon</div></div>
            </div>
          </div>
          <div className="card-foot">
            <div className="foot-note">Figures read from bank & mobile-money statements; advisor can adjust before review.</div>
            <button className="btn btn-primary" onClick={() => goStep(3)}>Continue <Icon name="arrowRight" /></button>
          </div>
        </div>
      )}

      {step === 3 && (
        <div className="card fade">
          <div className="card-head"><h3>Compliance review</h3>
            {decision === "approved" ? <Chip kind="green" icon="check">Approved</Chip> : <Chip kind="amber" icon="alert">1 item to review</Chip>}
          </div>
          <div className="card-pad">
            <div className="comp-grid">
              <div className="comp-ok"><Icon name="check" /> Identity verified</div>
              <div className="comp-ok"><Icon name="check" /> Documents verified</div>
              <div className="comp-ok"><Icon name="check" /> AML / PEP — clear</div>
              <div className="comp-ok"><Icon name="check" /> Income verified</div>
            </div>

            <div className={"flag" + (decision ? " resolved" : "")}>
              <span className="flag-ic"><Icon name="alert" /></span>
              <div className="flag-body">
                <div className="flag-title">Declared income and statement income differ by 18%</div>
                <div className="flag-desc">Declared TZS 84.0M vs TZS 71.2M seen in statements. Confirm the difference is explained (e.g. cash business income) before activating the account.</div>
              </div>
              <div className="flag-actions">
                {!decision && <>
                  <button className="btn btn-ghost btn-sm" onClick={() => setDecision("queried")}>Query</button>
                  <button className="btn btn-primary btn-sm" onClick={approve}>Approve</button>
                </>}
                {decision === "approved" && <Chip kind="green" icon="check">Approved by {DATA.advisor.name}</Chip>}
                {decision === "queried" && <Chip kind="amber" icon="clock">Queried — awaiting client</Chip>}
              </div>
            </div>
          </div>
          {decision === "approved" && (
            <div className="card-foot">
              <div className="foot-note"><Icon name="check" style={{ width: 17, height: 17, color: "var(--green-700)" }} /> Compliance cleared. Ready to profile risk.</div>
              <button className="btn btn-green" onClick={() => go("risk")}>Continue to risk profile <Icon name="arrowRight" /></button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Dashboard, Onboarding });