// admin-screens.jsx — Admin Verifications + Transactions detail screens
const { useState: useA2 } = React;

function AdminVerifications({ items: propItems, onApprove, onReject }) {
  const real = !!(onApprove || onReject);          // real data passed from app.jsx
  const [localItems, setLocalItems] = useA2([...(propItems || ADMIN_VERIFICATIONS)]);
  const items = real ? (propItems || []) : localItems;
  const [filter, setFilter] = useA2("all");
  const [selected, setSelected] = useA2(null);
  const [rejectReason, setRejectReason] = useA2("");

  const filtered = items.filter((v) => filter === "all" || v.status === filter);

  const updateStatus = (id, status, reason) => {
    if (real) {
      const sub = items.find((v) => v.id === id);
      if (sub) { status === "approved" ? onApprove && onApprove(sub) : onReject && onReject(sub, reason); }
    } else {
      setLocalItems((prev) => prev.map((v) => v.id === id ? { ...v, status, rejectReason: reason || v.rejectReason } : v));
    }
    setSelected(null);
    setRejectReason("");
  };

  return (
    <div>
      <h1 style={adminH1}>Verifications</h1>
      <p style={adminSub}>Review and approve user identity verifications.</p>

      {/* Filters */}
      <div style={{ display: "flex", gap: 8, marginBottom: 22 }}>
        {[["all", "All"], ["pending", "Pending"], ["approved", "Approved"], ["rejected", "Rejected"]].map(([v, l]) => {
          const count = v === "all" ? items.length : items.filter((i) => i.status === v).length;
          return (
            <button key={v} onClick={() => setFilter(v)} style={{
              padding: "9px 16px", borderRadius: 999, fontFamily: "var(--sans)", fontSize: 14, fontWeight: 600, cursor: "pointer",
              border: "1px solid " + (filter === v ? "var(--ink)" : "var(--line)"),
              background: filter === v ? "var(--ink)" : "var(--surface)", color: filter === v ? "var(--paper)" : "var(--ink-2)",
              display: "inline-flex", alignItems: "center", gap: 7,
            }}>{l} <span style={{ fontSize: 12, fontWeight: 700, padding: "1px 7px", borderRadius: 999, background: filter === v ? "color-mix(in srgb, var(--paper) 20%, transparent)" : "var(--ink-3)" }}>{count}</span></button>
          );
        })}
      </div>

      {/* Table */}
      <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1.2fr 1fr 1fr 120px", padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
          <span>User</span><span>Document</span><span>Submitted</span><span>Status</span><span></span>
        </div>
        {filtered.length === 0 ? (
          <div style={{ padding: "48px 20px", textAlign: "center", color: "var(--ink-2)" }}>No verifications match this filter.</div>
        ) : filtered.map((v) => (
          <div key={v.id} style={{ display: "grid", gridTemplateColumns: "2fr 1.2fr 1fr 1fr 120px", padding: "14px 20px", borderBottom: "1px solid var(--line)", alignItems: "center", fontSize: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <Avatar name={v.name} size={32} />
              <div>
                <div style={{ fontWeight: 600, color: "var(--ink)" }}>{v.name}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{v.city}</div>
              </div>
            </div>
            <div>
              <div style={{ fontWeight: 600, color: "var(--ink)", fontSize: 13.5 }}>{v.docType}</div>
              <div style={{ fontSize: 12, color: "var(--ink-2)" }}>{v.docId}</div>
            </div>
            <span style={{ color: "var(--ink-2)", fontSize: 13.5 }}>{v.submitted}</span>
            <AdminStatusBadge status={v.status} />
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <button onClick={() => { setSelected(v); setRejectReason(""); }} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--clay)", fontWeight: 600, fontSize: 13, fontFamily: "var(--sans)", display: "flex", alignItems: "center", gap: 4 }}>
                <Icon name="eye" size={15} /> Review
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Review modal */}
      {selected && (
        <div onClick={() => setSelected(null)} style={modalOverlay}>
          <div onClick={(e) => e.stopPropagation()} style={{ ...modalCard, maxWidth: 580 }}>
            <div style={{ padding: "22px 26px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--clay)", textTransform: "uppercase", letterSpacing: "0.05em" }}>Verification review</div>
                <h2 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 22, margin: "6px 0 0", color: "var(--ink)" }}>{selected.name}</h2>
              </div>
              <button onClick={() => setSelected(null)} style={closeBtn}>✕</button>
            </div>
            <div style={{ padding: "22px 26px", display: "flex", flexDirection: "column", gap: 18 }}>
              {/* User info */}
              <div style={{ display: "flex", gap: 14, alignItems: "center", padding: "14px 16px", background: "var(--paper)", borderRadius: 12, border: "1px solid var(--line)" }}>
                <Avatar name={selected.name} size={48} />
                <div>
                  <div style={{ fontWeight: 700, fontSize: 16, color: "var(--ink)" }}>{selected.name}</div>
                  <div style={{ fontSize: 13.5, color: "var(--ink-2)", display: "flex", gap: 12, marginTop: 3 }}>
                    <span>{selected.email}</span><span>{selected.phone}</span>
                  </div>
                </div>
              </div>

              {/* Documents */}
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 10 }}>Submitted documents</div>
                {/* media thumbnails */}
                {(selected.idPhotoUrl || selected.selfieUrl || selected.videoUrl) && (
                  <div style={{ display: "flex", gap: 10, marginBottom: 12, flexWrap: "wrap" }}>
                    {selected.idPhotoUrl && (
                      <a href={selected.idPhotoUrl} target="_blank" rel="noreferrer" style={{ flex: "1 1 120px" }}>
                        <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-2)", marginBottom: 5 }}>AADHAAR</div>
                        <img src={selected.idPhotoUrl} alt="Aadhaar" style={{ width: "100%", height: 120, objectFit: "cover", borderRadius: 10, border: "1px solid var(--line)" }} />
                      </a>
                    )}
                    {selected.selfieUrl && (
                      <a href={selected.selfieUrl} target="_blank" rel="noreferrer" style={{ flex: "1 1 120px" }}>
                        <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-2)", marginBottom: 5 }}>SELFIE</div>
                        <img src={selected.selfieUrl} alt="Selfie" style={{ width: "100%", height: 120, objectFit: "cover", borderRadius: 10, border: "1px solid var(--line)" }} />
                      </a>
                    )}
                    {selected.videoUrl && (
                      <div style={{ flex: "1 1 120px" }}>
                        <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-2)", marginBottom: 5 }}>LIVENESS VIDEO</div>
                        <video src={selected.videoUrl} controls style={{ width: "100%", height: 120, objectFit: "cover", borderRadius: 10, border: "1px solid var(--line)", background: "#000" }} />
                      </div>
                    )}
                  </div>
                )}
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <DocRow icon="shield" label={"Aadhaar " + (selected.docId || "")} detail={selected.aadhaarName ? `Name: ${selected.aadhaarName}` : "Uploaded"} status="uploaded" />
                  <DocRow icon="camera" label="Selfie photo" detail={selected.hasSelfie ? "Face match ready" : "Not submitted"} status={selected.hasSelfie ? "uploaded" : "missing"} />
                  <DocRow icon="image" label="Liveness video" detail={selected.hasVideo ? "Recorded" : "Not submitted"} status={selected.hasVideo ? "uploaded" : "missing"} />
                </div>

                {/* payout & name match */}
                <div style={{ marginTop: 14, padding: "14px 16px", borderRadius: 12, border: "1px solid var(--line)", background: "var(--paper)" }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 10 }}>Payout & name match</div>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12, fontSize: 14, marginBottom: 6 }}>
                    <span style={{ color: "var(--ink-2)" }}>Aadhaar name</span>
                    <span style={{ fontWeight: 600, color: "var(--ink)" }}>{selected.aadhaarName || "—"}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12, fontSize: 14, marginBottom: 10 }}>
                    <span style={{ color: "var(--ink-2)" }}>UPI ID</span>
                    <span style={{ fontWeight: 600, color: "var(--ink)", fontFamily: "monospace" }}>{selected.upiId || "—"}</span>
                  </div>
                  <div style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 13, color: "var(--amber-dk)", background: "color-mix(in srgb, var(--amber) 12%, transparent)", padding: "9px 11px", borderRadius: 9 }}>
                    <Icon name="shield" size={14} style={{ flexShrink: 0, marginTop: 1 }} />
                    Confirm the UPI account holder name matches the Aadhaar name before approving.
                  </div>
                </div>
              </div>

              {/* Audit log */}
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 10 }}>History</div>
                <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6 }}>
                  Submitted {selected.submitted}
                  {selected.status === "rejected" && <> · <span style={{ color: "var(--clay)" }}>Rejected: {selected.rejectReason}</span></>}
                  {selected.status === "approved" && <> · <span style={{ color: "var(--green)" }}>Approved</span></>}
                </div>
              </div>

              {/* Rejection reason */}
              {selected.status === "pending" && (
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--ink)", marginBottom: 8 }}>Rejection reason (if rejecting)</div>
                  <textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)} rows={2} placeholder="e.g. ID photo is blurry — please resubmit" style={{ ...inputStyle, resize: "vertical", lineHeight: 1.5 }} />
                </div>
              )}
            </div>
            <div style={{ padding: "18px 26px", borderTop: "1px solid var(--line)", display: "flex", gap: 10, justifyContent: "flex-end" }}>
              <Button variant="ghost" onClick={() => setSelected(null)}>Close</Button>
              {selected.status === "pending" && (
                <>
                  <Button style={{ background: "transparent", color: "var(--clay)", border: "1px solid var(--clay)" }} onClick={() => updateStatus(selected.id, "rejected", rejectReason)} disabled={!rejectReason.trim()}>Reject</Button>
                  <Button variant="green" icon="check" onClick={() => updateStatus(selected.id, "approved")}>Approve</Button>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function DocRow({ icon, label, detail, status }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderRadius: 10, border: "1px solid var(--line)", background: "var(--paper)" }}>
      <span style={{ color: status === "uploaded" ? "var(--green)" : "var(--ink-2)" }}><Icon name={icon} size={18} /></span>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, fontSize: 14, color: "var(--ink)" }}>{label}</div>
        <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{detail}</div>
      </div>
      {status === "uploaded" ? (
        <span style={{ fontSize: 12, fontWeight: 700, color: "var(--green)", display: "flex", alignItems: "center", gap: 4 }}><Icon name="check" size={13} stroke={2.5} /> Uploaded</span>
      ) : (
        <span style={{ fontSize: 12, fontWeight: 700, color: "var(--clay)" }}>Missing</span>
      )}
    </div>
  );
}

/* ============ TRANSACTIONS ============ */
function AdminTransactions({ tasks, getMeta, onRelease, onRefund }) {
  const [filter, setFilter] = useA2("all");

  // only fixed-pay tasks that have left "open" state
  const payTasks = (tasks || []).filter(t => t.pay?.kind === "fixed");

  const txStatus = (t) => {
    const s = getMeta(t.id).status || t.status || "open";
    if (s === "completed")                        return "released";
    if (s === "cancelled")                        return "refunded";
    if (s === "assigned" || s === "proof_submitted") return "held";
    return s;
  };

  const filtered = payTasks.filter(t => {
    const s = txStatus(t);
    if (s === "open") return false; // no payment yet
    return filter === "all" || s === filter;
  });

  const FILTERS = [["all","All"], ["held","Held"], ["released","Released"], ["refunded","Refunded"]];

  const heldTotal   = filtered.filter(t => txStatus(t) === "held").reduce((s, t) => s + t.pay.amount, 0);
  const releasedTotal = filtered.filter(t => txStatus(t) === "released").reduce((s, t) => s + t.pay.amount, 0);

  return (
    <div>
      <h1 style={adminH1}>Transactions</h1>
      <p style={adminSub}>Payment status for every fixed-pay task.</p>

      {/* Summary cards */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14, marginBottom: 24 }}>
        {[
          { label: "Held (escrow)", value: payTasks.filter(t => txStatus(t) === "held").length, note: `₹${heldTotal.toLocaleString()} waiting`, color: "var(--amber-dk)", bg: "color-mix(in srgb,var(--amber) 14%,transparent)" },
          { label: "Released",      value: payTasks.filter(t => txStatus(t) === "released").length, note: `₹${releasedTotal.toLocaleString()} paid out`, color: "var(--green)", bg: "var(--green-3)" },
          { label: "Refunded",      value: payTasks.filter(t => txStatus(t) === "refunded").length, note: "returned to poster", color: "var(--clay)", bg: "color-mix(in srgb,var(--clay) 10%,transparent)" },
        ].map(c => (
          <div key={c.label} style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14, padding: "16px 20px" }}>
            <div style={{ fontSize: 26, fontWeight: 700, fontFamily: "var(--display)", color: "var(--ink)", letterSpacing: "-0.02em" }}>{c.value}</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)", marginTop: 2 }}>{c.label}</div>
            <div style={{ fontSize: 12.5, color: c.color, background: c.bg, display: "inline-block", padding: "2px 9px", borderRadius: 999, marginTop: 6, fontWeight: 600 }}>{c.note}</div>
          </div>
        ))}
      </div>

      {/* Filter pills */}
      <div style={{ display: "inline-flex", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, padding: 4, marginBottom: 18 }}>
        {FILTERS.map(([v, l]) => (
          <button key={v} onClick={() => setFilter(v)} style={{ padding: "8px 16px", borderRadius: 9, border: "none", cursor: "pointer", fontFamily: "var(--sans)", fontSize: 13.5, fontWeight: 600, background: filter === v ? "var(--ink)" : "transparent", color: filter === v ? "var(--paper)" : "var(--ink-2)" }}>{l}</button>
        ))}
      </div>

      {/* Table */}
      <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 100px 160px", padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 12, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
          <span>Task</span><span>Poster</span><span>Worker</span><span>Amount</span><span>Status / Action</span>
        </div>

        {filtered.length === 0 ? (
          <div style={{ padding: "48px 20px", textAlign: "center", color: "var(--ink-2)", fontSize: 14 }}>
            {payTasks.length === 0 ? "No paid tasks yet." : "Nothing matches this filter."}
          </div>
        ) : filtered.map(t => {
          const meta    = getMeta(t.id);
          const status  = txStatus(t);
          const worker  = meta.assignedTo ? (PEOPLE[meta.assignedTo]?.name || meta.assignedTo) : "—";
          const poster  = t.poster === "__me" ? "You" : (PEOPLE[t.poster]?.name || t.posterProfile?.name || "—");

          return (
            <div key={t.id} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 100px 160px", padding: "14px 20px", borderBottom: "1px solid var(--line)", alignItems: "center", fontSize: 14 }}>
              <div>
                <div style={{ fontWeight: 600, color: "var(--ink)", marginBottom: 2 }}>{t.title}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{t.city}</div>
              </div>
              <span style={{ color: "var(--ink-2)", fontSize: 13.5 }}>{poster}</span>
              <span style={{ color: "var(--ink-2)", fontSize: 13.5 }}>{worker}</span>
              <span style={{ fontWeight: 700, color: "var(--ink)" }}>{t.pay.cur}{t.pay.amount}</span>

              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                {status === "held" && (
                  <>
                    <button onClick={() => onRelease && onRelease(t.id)} style={{ padding: "6px 12px", borderRadius: 8, border: "none", background: "var(--green)", color: "#fff", fontFamily: "var(--sans)", fontSize: 12.5, fontWeight: 700, cursor: "pointer" }}>Release</button>
                    <button onClick={() => { if (window.confirm(`Refund ₹${t.pay.amount} to poster?`)) onRefund && onRefund(t.id); }} style={{ padding: "6px 12px", borderRadius: 8, border: "1px solid var(--clay)", background: "transparent", color: "var(--clay)", fontFamily: "var(--sans)", fontSize: 12.5, fontWeight: 700, cursor: "pointer" }}>Refund</button>
                  </>
                )}
                {status === "released" && (
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--green)", display: "flex", alignItems: "center", gap: 5 }}><Icon name="check" size={13} stroke={2.5} /> Released</span>
                )}
                {status === "refunded" && (
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--clay)" }}>Refunded</span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ============ TRANSACTION DETAIL MODAL ============ */
function TxnDetailModal({ txn, onClose, onAction }) {
  const statusColor = { completed: "var(--green)", held: "var(--amber-dk)", refunded: "var(--blue)", disputed: "var(--clay)" }[txn.status] || "var(--ink-2)";

  return (
    <div onClick={onClose} style={modalOverlay}>
      <div onClick={(e) => e.stopPropagation()} style={{ ...modalCard, maxWidth: 620 }}>
        {/* Header */}
        <div style={{ padding: "22px 26px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: statusColor, textTransform: "uppercase", letterSpacing: "0.05em", display: "flex", alignItems: "center", gap: 6 }}>
              <AdminStatusBadge status={txn.status} /> · {txn.id}
            </div>
            <h2 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 21, margin: "8px 0 0", color: "var(--ink)", lineHeight: 1.2 }}>{txn.taskTitle}</h2>
          </div>
          <button onClick={onClose} style={closeBtn}>✕</button>
        </div>

        <div style={{ padding: "22px 26px", display: "flex", flexDirection: "column", gap: 22 }}>
          {/* Payment summary */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div style={{ padding: "14px 16px", borderRadius: 12, border: "1px solid var(--line)", background: "var(--paper)" }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8 }}>Buyer (payer)</div>
              <div style={{ fontWeight: 700, fontSize: 15, color: "var(--ink)" }}>{txn.buyer}</div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 3 }}>{txn.payerAccount}</div>
            </div>
            <div style={{ padding: "14px 16px", borderRadius: 12, border: "1px solid var(--line)", background: "var(--paper)" }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8 }}>Seller (payee)</div>
              <div style={{ fontWeight: 700, fontSize: 15, color: "var(--ink)" }}>{txn.seller}</div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 3 }}>{txn.payeeAccount}</div>
            </div>
          </div>

          {/* Amount breakdown */}
          <div style={{ padding: "16px 18px", borderRadius: 12, border: "1px solid var(--line)", background: "var(--paper)" }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 12 }}>Payment breakdown</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14.5 }}>
                <span style={{ color: "var(--ink-2)" }}>Total amount</span>
                <span style={{ fontWeight: 700, color: "var(--ink)" }}>{txn.cur}{txn.amount}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14.5 }}>
                <span style={{ color: "var(--ink-2)" }}>Platform fee (5%)</span>
                <span style={{ color: "var(--ink-2)" }}>−{txn.cur}{txn.platformFee}</span>
              </div>
              <div style={{ height: 1, background: "var(--line)", margin: "4px 0" }} />
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14.5 }}>
                <span style={{ fontWeight: 700, color: "var(--ink)" }}>Net to seller</span>
                <span style={{ fontWeight: 700, color: "var(--green)" }}>{txn.cur}{txn.netToSeller}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, marginTop: 2 }}>
                <span style={{ color: "var(--ink-2)" }}>Method</span>
                <span style={{ fontWeight: 600, color: "var(--ink)" }}>{txn.method}</span>
              </div>
            </div>
          </div>

          {/* Status reason */}
          {txn.reason && (
            <div style={{ padding: "14px 18px", borderRadius: 12, background: "color-mix(in srgb, " + statusColor + " 8%, var(--surface))", border: "1px solid color-mix(in srgb, " + statusColor + " 22%, transparent)" }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: statusColor, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 7, display: "flex", alignItems: "center", gap: 6 }}>
                <Icon name={txn.status === "disputed" ? "bolt" : txn.status === "held" ? "clock" : "back"} size={14} />
                {txn.status === "held" ? "Why funds are held" : txn.status === "disputed" ? "Dispute details" : txn.status === "refunded" ? "Refund reason" : "Status details"}
              </div>
              <div style={{ fontSize: 14.5, color: "var(--ink)", lineHeight: 1.55 }}>{txn.reason}</div>
            </div>
          )}

          {/* Timeline */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 14 }}>Payment timeline</div>
            <div style={{ position: "relative", paddingLeft: 24 }}>
              {/* vertical line */}
              <div style={{ position: "absolute", left: 7, top: 6, bottom: 6, width: 2, background: "var(--line)" }} />
              {txn.timeline.map((evt, i) => {
                const isLast = i === txn.timeline.length - 1;
                const dotColor = isLast
                  ? (txn.status === "completed" ? "var(--green)" : txn.status === "disputed" ? "var(--clay)" : "var(--amber)")
                  : "var(--line-dk)";
                return (
                  <div key={i} style={{ position: "relative", paddingBottom: isLast ? 0 : 18 }}>
                    <div style={{ position: "absolute", left: -20, top: 5, width: 12, height: 12, borderRadius: "50%", background: dotColor, border: "2px solid var(--surface)", zIndex: 1 }} />
                    <div style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 600, marginBottom: 2 }}>{evt.time}</div>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--ink)", marginBottom: 2 }}>{evt.event}</div>
                    <div style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.45 }}>{evt.detail}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Actions footer */}
        <div style={{ padding: "18px 26px", borderTop: "1px solid var(--line)", display: "flex", gap: 10, justifyContent: "flex-end" }}>
          <Button variant="ghost" onClick={onClose}>Close</Button>
          {txn.status === "held" && (
            <>
              <Button style={{ background: "transparent", color: "var(--clay)", border: "1px solid var(--clay)" }} onClick={() => onAction(txn.id, "refunded")}>Refund buyer</Button>
              <Button icon="check" onClick={() => onAction(txn.id, "completed")}>Release funds</Button>
            </>
          )}
          {txn.status === "disputed" && (
            <>
              <Button style={{ background: "transparent", color: "var(--clay)", border: "1px solid var(--clay)" }} onClick={() => onAction(txn.id, "refunded")}>Refund buyer</Button>
              <Button icon="check" onClick={() => onAction(txn.id, "completed")}>Release to seller</Button>
            </>
          )}
          {txn.status === "completed" && (
            <Button style={{ background: "transparent", color: "var(--clay)", border: "1px solid var(--clay)" }} onClick={() => { if (window.confirm(`Issue a refund of ${txn.cur}${txn.amount} to ${txn.buyer}?`)) onAction(txn.id, "refunded"); }}>Refund buyer</Button>
          )}
        </div>
      </div>
    </div>
  );
}

const adminH1 = { fontFamily: "var(--display)", fontWeight: 600, fontSize: 30, letterSpacing: "-0.03em", margin: "0 0 6px", color: "var(--ink)" };
const adminSub = { fontSize: 15, color: "var(--ink-2)", margin: "0 0 28px" };

function AdminStrikes({ onApprove, onReject }) {
  const [items, setItems] = useA2([...ADMIN_STRIKES]);

  const handleAction = (id, action) => {
    const report = items.find(r => r.id === id);
    if (!report) return;
    
    if (action === "approve") {
      report.status = "approved";
      // Increment strikes on the person
      const p = PEOPLE[report.reportedId];
      if (p) {
        p.strikes = (p.strikes || 0) + 1;
        if (p.strikes >= 3) {
          p.banned = true;
          alert(`${p.name} has reached 3 strikes and is now BANNED.`);
        } else {
          alert(`${p.name} now has ${p.strikes} strike(s).`);
        }
      }
    } else {
      report.status = "rejected";
    }
    setItems([...ADMIN_STRIKES]);
  };

  return (
    <div>
      <h1 style={adminH1}>Strikes & Reports</h1>
      <p style={adminSub}>Review misbehavior reports and issue strikes. 3 strikes = auto-ban.</p>
      
      <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 2fr 180px", padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
          <span>Reported User</span><span>Reported By</span><span>Reason</span><span>Actions</span>
        </div>
        {items.length === 0 ? (
          <div style={{ padding: "48px 20px", textAlign: "center", color: "var(--ink-2)" }}>No strike reports right now.</div>
        ) : items.map((r) => {
          const reporter = PEOPLE[r.reporterId] || { name: "User" };
          const reported = PEOPLE[r.reportedId] || { name: "User", strikes: 0, banned: false };
          return (
            <div key={r.id} style={{ display: "grid", gridTemplateColumns: "1fr 1fr 2fr 180px", padding: "14px 20px", borderBottom: "1px solid var(--line)", alignItems: "center", fontSize: 14 }}>
              <div>
                <div style={{ fontWeight: 600, color: reported.banned ? "var(--clay)" : "var(--ink)" }}>{reported.name} {reported.banned && "(BANNED)"}</div>
                <div style={{ fontSize: 12.5, color: "var(--amber-dk)" }}>{reported.strikes || 0} strikes</div>
              </div>
              <div style={{ color: "var(--ink-2)" }}>{reporter.name}</div>
              <div style={{ color: "var(--ink-2)", fontStyle: "italic", paddingRight: 20 }}>"{r.reason}"</div>
              
              {r.status === "pending" ? (
                <div style={{ display: "flex", gap: 8 }}>
                  <Button size="sm" variant="dark" style={{ background: "var(--clay)", borderColor: "var(--clay)" }} onClick={() => handleAction(r.id, "approve")}>Approve Strike</Button>
                  <Button size="sm" variant="ghost" onClick={() => handleAction(r.id, "reject")}>Reject</Button>
                </div>
              ) : (
                <div style={{ fontWeight: 600, color: r.status === "approved" ? "var(--clay)" : "var(--ink-2)", textTransform: "uppercase", fontSize: 12, letterSpacing: "0.05em" }}>
                  {r.status === "approved" ? "Strike Issued" : "Rejected"}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { AdminVerifications, AdminTransactions, TxnDetailModal, AdminStrikes });