// Admin — runs, review queue, error log (API-wired).

// React hooks (Babel-standalone — make hooks visible per-script)
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

const adminStyles = {
  page: { padding: 16, display: "flex", flexDirection: "column", gap: 14, overflowY: "auto", height: "100%" },
  statBlock: { display: "flex", flexDirection: "column", gap: 4 },
  progBar: { height: 6, background: "var(--vk-surface-2)", borderRadius: 3, overflow: "hidden" },
  progFill: { height: "100%", background: "linear-gradient(135deg,#E91E63,#FF6B35)" },
  reviewRow: {
    display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr auto", gap: 12,
    alignItems: "center", padding: "8px 0",
    borderBottom: "1px solid var(--vk-border-subtle)",
  },
};

function Admin({ openEntity }) {
  const app = useAppState();
  const runsQ = useApi("/runs", { city: app.city }, [app.city]);
  const runs = Array.isArray(runsQ.data) ? runsQ.data : [];
  const live = runs.find((r) => r.status === "running");
  const recent = runs.filter((r) => r.status !== "running");

  const reviewQ = useApi("/review-queue", { limit: 50 }, []);
  const reviewRows = Array.isArray(reviewQ.data) ? reviewQ.data : [];

  return (
    <div style={adminStyles.page}>
      <div>
        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 500 }}>Admin</h2>
        <span style={{ fontSize: 11, color: "var(--vk-text-tertiary)" }}>Operator-only · run health and review</span>
      </div>

      {live && (
        <Card padding={16}>
          <CardHeader title="Current run" subtitle={live.run_id} action={<Pill kind="med">{live.status}</Pill>} />
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 14 }}>
            <div style={adminStyles.statBlock}>
              <div style={{ fontSize: 11, color: "var(--vk-text-secondary)" }}>Progress</div>
              <div className="vk-mono" style={{ fontSize: 16 }}>{Math.round((live.progress ?? 0) * 100)}%</div>
              <div style={adminStyles.progBar}>
                <div style={{ ...adminStyles.progFill, width: `${(live.progress ?? 0) * 100}%` }}></div>
              </div>
            </div>
            <div style={adminStyles.statBlock}>
              <div style={{ fontSize: 11, color: "var(--vk-text-secondary)" }}>Stage</div>
              <div style={{ fontSize: 13, color: "var(--vk-text-primary)" }}>{live.stage || "—"}</div>
            </div>
            <div style={adminStyles.statBlock}>
              <div style={{ fontSize: 11, color: "var(--vk-text-secondary)" }}>Runtime</div>
              <div className="vk-mono" style={{ fontSize: 16 }}>{live.runtime_minutes ?? "?"}m</div>
            </div>
            <div style={adminStyles.statBlock}>
              <div style={{ fontSize: 11, color: "var(--vk-text-secondary)" }}>Sources</div>
              <div className="vk-mono" style={{ fontSize: 16 }}>{live.source_count}</div>
            </div>
            <div style={adminStyles.statBlock}>
              <div style={{ fontSize: 11, color: "var(--vk-text-secondary)" }}>Entities</div>
              <div className="vk-mono" style={{ fontSize: 16 }}>{live.entity_count}</div>
            </div>
          </div>
        </Card>
      )}

      <Card padding={16}>
        <CardHeader title="Recent runs" subtitle="last 20" />
        {runsQ.loading ? <SkeletonBlock rows={3} /> : recent.length === 0 ? (
          <EmptyState icon="Inbox" title="No completed runs for this city yet." />
        ) : (
          <MiniTable
            columns={[
              { key: "run", label: "Run", width: "1.6fr" },
              { key: "city", label: "City", width: "1fr" },
              { key: "status", label: "Status", width: "1fr" },
              { key: "duration", label: "Duration", width: "80px", align: "right" },
              { key: "entities", label: "Entities", width: "80px", align: "right" },
              { key: "conf", label: "Conf.", width: "60px", align: "right" },
            ]}
            rows={recent.map((r) => ({
              key: r.run_id,
              run: <span className="vk-mono" style={{ color: "var(--vk-text-secondary)" }}>{r.run_id}</span>,
              city: r.city,
              status: <Pill kind={r.status === "completed" ? "high" : "neutral"}>{r.status}</Pill>,
              duration: <span className="vk-mono">
                {r.completed_at ? Math.round((new Date(r.completed_at) - new Date(r.started_at)) / 60000) + "m" : "—"}
              </span>,
              entities: <span className="vk-mono">{r.entity_count}</span>,
              conf: <ConfPill confidence={r.overall_confidence} />,
            }))}
          />
        )}
      </Card>

      <Card padding={16}>
        <CardHeader title="Needs-review queue" subtitle={`${reviewRows.length} entities`} />
        {reviewQ.loading ? <SkeletonBlock rows={4} /> : reviewRows.length === 0 ? (
          <EmptyState icon="ShieldCheck" title="Queue clear — nothing flagged for review." />
        ) : (
          <div>
            {reviewRows.map((e) => (
              <div key={e.entity_id} style={adminStyles.reviewRow}>
                <EntityLink entity={e} onOpen={openEntity}>{e.canonical_name}</EntityLink>
                <span style={{ fontSize: 12, color: "var(--vk-text-secondary)" }}>
                  {e.entity_type} · {e.sector_or_focus}
                </span>
                <span style={{ fontSize: 11, color: "var(--vk-text-tertiary)" }}>Flagged by needs_review default</span>
                <div style={{ display: "flex", gap: 6 }}>
                  <button className="vk-btn" style={{ height: 24, padding: "0 8px" }}>
                    <Icon name="Check" size={13} color="var(--vk-success)" /> Approve
                  </button>
                  <button className="vk-btn" style={{ height: 24, padding: "0 8px" }}>
                    <Icon name="X" size={13} color="var(--vk-danger)" /> Reject
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  );
}

Object.assign(window, { Admin });