// =================================================================
// pw-screens-coins.jsx — Publisher Admin §5  Coins & Engagement
//   EngagementRules (editable) · Grant coins · Per-user wallets + ledger
// =================================================================

// ---------- Rule edit drawer ----------
const RuleDrawer = ({ open, onClose, rule, onSave }) => {
  const [coins, setCoins] = React.useState(0);
  const [cap, setCap] = React.useState(0);
  const [status, setStatus] = React.useState("active");
  React.useEffect(() => { if (open && rule) { setCoins(rule.coins); setCap(rule.daily_cap); setStatus(rule.status); } }, [open, rule]);
  if (!rule) return null;
  return (
    <Drawer open={open} onClose={onClose} title={`Edit · ${rule.label}`} width={440}
      footer={<><Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" onClick={() => { onSave(rule.event_type, { coins, daily_cap: cap, status }); onClose(); }}>Save rule</Btn></>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <FieldRow label="Event" hint={<span style={{ fontFamily: "var(--mono)" }}>{rule.event_type}</span>}>
          <span style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{rule.label}</span>
        </FieldRow>
        <FieldRow label="Coins per event">
          <NumberStepper value={coins} onChange={setCoins} min={0} max={1000} step={1} suffix="coins"/>
        </FieldRow>
        <FieldRow label="Daily cap" hint="Max coins from this event per user per day.">
          <NumberStepper value={cap} onChange={setCap} min={0} max={5000} step={1} suffix="coins"/>
        </FieldRow>
        <FieldRow label="Status">
          <SegmentedControl value={status} onChange={setStatus} options={[{ label: "Active", value: "active" }, { label: "Paused", value: "paused" }]}/>
        </FieldRow>
      </div>
    </Drawer>
  );
};

const CoinsScreen = ({ data, setData }) => {
  const [editRule, setEditRule] = React.useState(null);
  const [ledgerUser, setLedgerUser] = React.useState(null);

  // ---- Grant coins simulator ----
  const [grantUser, setGrantUser] = React.useState(data.users[0]?.email || "");
  const [grantEvent, setGrantEvent] = React.useState(data.engagementRules[0]?.event_type || "");
  const [decision, setDecision] = React.useState(null);

  const saveRule = (event_type, patch) => {
    window.__api.write("updateEngagementRule",
      d => ({ ...d, engagementRules: d.engagementRules.map(r => r.event_type === event_type ? { ...r, ...patch } : r) }),
      { params: { event_type }, body: patch, ok: "Rule updated", err: "Couldn’t update rule" });
  };

  const today = "2026-06-15";
  const doGrant = () => {
    const rule = data.engagementRules.find(r => r.event_type === grantEvent);
    const user = data.users.find(u => u.email === grantUser);
    if (!user) { setDecision({ decision: "no_user", wallet_balance_coins: 0 }); window.__toast("Choose a reader", "warn"); return; }
    if (!rule || rule.status !== "active") { setDecision({ decision: "no_rule", wallet_balance_coins: user?.balance_coins ?? 0 }); return; }
    const grantedToday = (user?.ledger || []).filter(l => l.at === today && l.event === grantEvent).reduce((a, l) => a + l.delta, 0);
    if (grantedToday >= rule.daily_cap) { setDecision({ decision: "capped", wallet_balance_coins: user.balance_coins }); window.__toast("Daily cap reached", "warn"); return; }
    // grant (idempotent on the BFF via Idempotency-Key)
    window.__api.write("grantCoins",
      d => ({ ...d, users: d.users.map(u => u.email === grantUser
        ? { ...u, balance_coins: u.balance_coins + rule.coins, ledger: [{ at: today, event: grantEvent, delta: rule.coins }, ...u.ledger] }
        : u) }),
      { body: { user_id: user.id, event_type: grantEvent, idempotency_key: `grant:${user.id}:${grantEvent}:${today}` }, ok: `Granted ${rule.coins} coins`, err: "Grant failed" });
    setDecision({ decision: "granted", coins: rule.coins, wallet_balance_coins: (user.balance_coins + rule.coins) });
  };

  const decisionTone = { granted: "good", already_granted: "neutral", capped: "warn", no_rule: "warn", no_user: "warn" };

  return (
    <Screen>
      <PageHead icon={IconCoin} title="Coins & Engagement" subtitle="Earn rules, manual grants, and per-reader balances." />

      <div className="pw-coins-top">
        <Card title="Engagement rules" subtitle="Coins awarded per event, capped per day." padded={false}
          style={{ gridColumn: "1 / 2" }}>
          <DataTable rows={data.engagementRules} keyField="event_type" density="compact"
            columns={[
              { key: "label", label: "Event", render: r => (
                <div><div style={{ fontWeight: 500, color: "var(--ink)" }}>{r.label}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--muted)" }}>{r.event_type}</div></div>) },
              { key: "coins", label: "Coins", align: "right", render: r => <CoinChip amount={r.coins} tone="pos"/> },
              { key: "daily_cap", label: "Daily cap", align: "right", render: r => <span style={{ fontFamily: "var(--mono)", fontSize: 12.5 }}>{r.daily_cap}</span> },
              { key: "status", label: "Status", render: r => <StatusPill status={r.status}/> },
              { key: "_e", label: "", sortable: false, align: "right", render: r => <Btn kind="ghost" size="sm" icon={<IconPencil size={13}/>} onClick={() => setEditRule(r)}>Edit</Btn> },
            ]}/>
        </Card>

        <Card title="Grant coins" subtitle="Award coins for an event (idempotent).">
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div>
              <label className="pw-lbl">Reader</label>
              <Select value={grantUser} onChange={setGrantUser} options={data.users.map(u => ({ label: u.email, value: u.email }))}/>
            </div>
            <div>
              <label className="pw-lbl">Event</label>
              <Select value={grantEvent} onChange={setGrantEvent} options={data.engagementRules.map(r => ({ label: `${r.label} (+${r.coins})`, value: r.event_type }))}/>
            </div>
            <Btn kind="primary" icon={<IconCoin size={15}/>} onClick={doGrant} style={{ justifyContent: "center" }}>Grant coins</Btn>
            {decision && (
              <div className="pw-decision">
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ fontSize: 12.5, color: "var(--muted)" }}>Decision</span>
                  <Pill tone={decisionTone[decision.decision]}>{decision.decision.replace(/_/g, " ")}</Pill>
                </div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 10 }}>
                  <span style={{ fontSize: 12.5, color: "var(--muted)" }}>Wallet balance</span>
                  <CoinChip amount={decision.wallet_balance_coins}/>
                </div>
              </div>
            )}
          </div>
        </Card>
      </div>

      <Card title="Reader wallets" subtitle="Coin balances and ledgers." padded={false}>
        <DataTable rows={data.users} keyField="id" rowsPerPage={6} onRowClick={setLedgerUser}
          defaultSort={{ key: "balance_coins", dir: "desc" }}
          columns={[
            { key: "email", label: "Reader", render: r => (
              <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><Avatar name={r.email} size={26}/><span style={{ color: "var(--ink)" }}>{r.email}</span></span>) },
            { key: "balance_coins", label: "Balance", align: "right", render: r => <CoinChip amount={r.balance_coins}/> },
            { key: "ledger", label: "Recent", sortable: false, align: "right", accessor: r => r.ledger.length,
              render: r => <span style={{ fontSize: 12.5, color: "var(--muted)" }}>{r.ledger.length} entries</span> },
            { key: "_v", label: "", sortable: false, align: "right", render: () => <IconChevR size={14} style={{ color: "var(--muted-2)" }}/> },
          ]}/>
      </Card>

      <RuleDrawer open={!!editRule} onClose={() => setEditRule(null)} rule={editRule} onSave={saveRule}/>

      <Drawer open={!!ledgerUser} onClose={() => setLedgerUser(null)} title="Wallet ledger" width={460}>
        {ledgerUser && (
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><Avatar name={ledgerUser.email} size={36}/><strong>{ledgerUser.email}</strong></span>
              <div style={{ textAlign: "right" }}><div style={{ fontSize: 11.5, color: "var(--muted)" }}>Balance</div><CoinChip amount={ledgerUser.balance_coins}/></div>
            </div>
            <div className="pw-ledger">
              {ledgerUser.ledger.map((l, i) => (
                <div key={i} className="pw-ledger-row">
                  <span style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--muted)" }}>{fmt.date(l.at)}</span>
                  <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{l.event.replace(/_/g, " ")}</span>
                  <CoinChip amount={l.delta} tone={l.delta < 0 ? "neg" : "pos"}/>
                </div>
              ))}
            </div>
          </div>
        )}
      </Drawer>

      <style>{`
        .pw-coins-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap); align-items: start; }
        .pw-coins-top > * { min-width: 0; }
        @media (max-width: 1023px) { .pw-coins-top { grid-template-columns: 1fr; } }
        .pw-lbl { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
        .pw-decision { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: var(--panel-2); }
        .pw-ledger { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
        .pw-ledger-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
        .pw-ledger-row:last-child { border-bottom: none; }
      `}</style>
    </Screen>
  );
};

Object.assign(window, { CoinsScreen, RuleDrawer });