// admin-layout.jsx — Admin shell + dashboard overview
const { useState: useA1 } = React;

function AdminPanel({ go, data }) {
  const [tab, setTab] = useA1("dashboard");
  // real data passed from app.jsx; falls back to sample data if not provided
  const d = data || {};
  const stats         = d.stats         || ADMIN_STATS;
  const verifications = d.verifications || ADMIN_VERIFICATIONS;
  const onApprove     = d.onApprove;
  const onReject      = d.onReject;
  const tasks         = d.tasks         || [];
  const getMeta       = d.getMeta       || (() => ({ status: "open" }));
  const onRelease     = d.onRelease;
  const onRefund      = d.onRefund;
  return (
    <div className="admin-shell" style={{ display: "flex", minHeight: "100vh", background: "var(--paper)" }}>
      {/* Sidebar */}
      <aside className="admin-sidebar" style={{ width: 240, background: "var(--surface)", borderRight: "1px solid var(--line)", padding: "20px 14px", display: "flex", flexDirection: "column", gap: 4, flexShrink: 0, position: "sticky", top: 0, height: "100vh" }}>
        <button onClick={() => go("home")} style={{ display: "flex", alignItems: "center", gap: 9, padding: "10px 12px", background: "none", border: "none", cursor: "pointer", marginBottom: 12 }}>
          <span style={{ width: 28, height: 28, borderRadius: 8, background: "var(--clay)", color: "#fff", display: "grid", placeItems: "center" }}><Icon name="users" size={16} stroke={2} /></span>
          <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 17, color: "var(--ink)", letterSpacing: "-0.02em" }}>Admin</span>
        </button>
        {[
          { id: "dashboard", icon: "grid", label: "Dashboard" },
          { id: "verifications", icon: "shield", label: "Verifications" },
          { id: "transactions", icon: "wallet", label: "Transactions" },
          { id: "strikes", icon: "ban", label: "Strikes & Reports" },
        ].map((item) => (
          <button key={item.id} onClick={() => setTab(item.id)} style={{
            display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderRadius: 10,
            border: "none", cursor: "pointer", fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 600, width: "100%", textAlign: "left",
            background: tab === item.id ? "var(--ink)" : "transparent", color: tab === item.id ? "var(--paper)" : "var(--ink-2)",
          }}>
            <Icon name={item.icon} size={18} /> {item.label}
          </button>
        ))}
        <div className="admin-spacer" style={{ flex: 1 }} />
        <button onClick={() => go("home")} style={{ display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderRadius: 10, border: "none", cursor: "pointer", fontFamily: "var(--sans)", fontSize: 14, fontWeight: 600, color: "var(--ink-2)", background: "none", width: "100%" }}>
          <Icon name="back" size={17} /> Back to app
        </button>
      </aside>
      {/* Main */}
      <div className="admin-main" style={{ flex: 1, padding: "28px 36px", maxWidth: 1100 }}>
        {tab === "dashboard" && <AdminDashboard onNav={setTab} stats={stats} verifications={verifications} tasks={tasks} getMeta={getMeta} />}
        {tab === "verifications" && <AdminVerifications items={verifications} onApprove={onApprove} onReject={onReject} />}
        {tab === "transactions" && <AdminTransactions tasks={tasks} getMeta={getMeta} onRelease={onRelease} onRefund={onRefund} />}
        {tab === "strikes" && <AdminStrikes />}
      </div>
    </div>
  );
}

function AdminDashboard({ onNav, stats: s, verifications, tasks, getMeta }) {
  s = s || ADMIN_STATS;
  const stats = [
    { label: "Total users", value: (s.totalUsers || 0).toLocaleString(), icon: "users", color: "var(--blue)" },
    { label: "Pending verifications", value: s.pendingVerifications || 0, icon: "shield", color: "var(--amber)" },
    { label: "Held in escrow", value: (tasks || []).filter(t => { const st = (getMeta(t.id).status || t.status); return st === "assigned" || st === "proof_submitted"; }).length, icon: "wallet", color: "var(--green)" },
    { label: "Tasks completed", value: (tasks || []).filter(t => (getMeta(t.id).status || t.status) === "completed").length, icon: "check", color: "var(--clay)" },
  ];
  const recentV = (verifications || ADMIN_VERIFICATIONS).slice(0, 3);
  const recentT = (tasks || []).filter(t => t.pay?.kind === "fixed").slice(0, 4);

  return (
    <div>
      <h1 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 30, letterSpacing: "-0.03em", margin: "0 0 6px", color: "var(--ink)" }}>Dashboard</h1>
      <p style={{ fontSize: 15, color: "var(--ink-2)", margin: "0 0 28px" }}>Overview of platform activity.</p>

      {/* Stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 32 }}>
        {stats.map((s) => (
          <div key={s.label} style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, padding: 20 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 11, background: "color-mix(in srgb, " + s.color + " 12%, transparent)", color: s.color, display: "grid", placeItems: "center" }}>
                <Icon name={s.icon} size={20} />
              </span>
            </div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 28, letterSpacing: "-0.02em", color: "var(--ink)" }}>{s.value}</div>
            <div style={{ fontSize: 13.5, color: "var(--ink-2)", fontWeight: 500, marginTop: 3 }}>{s.label}</div>
          </div>
        ))}
      </div>

      {/* Recent verifications */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 18, padding: 22 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
            <h3 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 19, margin: 0, color: "var(--ink)" }}>Recent verifications</h3>
            <button onClick={() => onNav("verifications")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--clay)", fontWeight: 600, fontSize: 13.5, fontFamily: "var(--sans)" }}>View all →</button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {recentV.map((v) => (
              <div key={v.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
                <Avatar name={v.name} size={34} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 14, color: "var(--ink)" }}>{v.name}</div>
                  <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{v.docType} · {v.submitted}</div>
                </div>
                <AdminStatusBadge status={v.status} />
              </div>
            ))}
          </div>
        </div>

        {/* Recent transactions */}
        <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 18, padding: 22 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
            <h3 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 19, margin: 0, color: "var(--ink)" }}>Recent transactions</h3>
            <button onClick={() => onNav("transactions")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--clay)", fontWeight: 600, fontSize: 13.5, fontFamily: "var(--sans)" }}>View all →</button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {recentT.length === 0 ? (
              <div style={{ fontSize: 13.5, color: "var(--ink-2)", padding: "12px 0" }}>No paid tasks yet.</div>
            ) : recentT.map((t) => {
              const st = getMeta(t.id).status || t.status || "open";
              const badge = st === "completed" ? "released" : st === "cancelled" ? "refunded" : st === "assigned" || st === "proof_submitted" ? "held" : st;
              return (
                <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
                  <span style={{ width: 34, height: 34, borderRadius: 9, background: "var(--ink-3)", display: "grid", placeItems: "center", color: "var(--ink-2)", flexShrink: 0 }}>
                    <Icon name="wallet" size={17} />
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13.5, color: "var(--ink)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.title}</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{t.city}</div>
                  </div>
                  <div style={{ textAlign: "right", flexShrink: 0 }}>
                    <div style={{ fontWeight: 700, fontSize: 14, color: "var(--ink)" }}>{t.pay.cur}{t.pay.amount}</div>
                    <AdminStatusBadge status={badge} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function AdminStatusBadge({ status }) {
  const map = {
    pending: { bg: "color-mix(in srgb, var(--amber) 16%, transparent)", color: "var(--amber-dk)", label: "Pending" },
    approved: { bg: "var(--green-3)", color: "var(--green)", label: "Approved" },
    rejected: { bg: "color-mix(in srgb, var(--clay) 12%, transparent)", color: "var(--clay)", label: "Rejected" },
    completed: { bg: "var(--green-3)", color: "var(--green)", label: "Completed" },
    held: { bg: "color-mix(in srgb, var(--amber) 16%, transparent)", color: "var(--amber-dk)", label: "Held" },
    refunded: { bg: "color-mix(in srgb, var(--blue) 14%, transparent)", color: "var(--blue)", label: "Refunded" },
    disputed: { bg: "color-mix(in srgb, var(--clay) 12%, transparent)", color: "var(--clay)", label: "Disputed" },
  }[status] || { bg: "var(--ink-3)", color: "var(--ink-2)", label: status };
  return <span style={{ fontSize: 12, fontWeight: 700, padding: "3px 9px", borderRadius: 999, background: map.bg, color: map.color, whiteSpace: "nowrap" }}>{map.label}</span>;
}

Object.assign(window, { AdminPanel, AdminDashboard, AdminStatusBadge });