function Admin({ onNavigate }) {
  const { address, isAdmin, connect } = useWallet();
  const [overview, setOverview] = React.useState(null);
  const [users, setUsers] = React.useState(null);
  const [projects, setProjects] = React.useState(null);
  const [loadError, setLoadError] = React.useState(null);
  const [tab, setTab] = React.useState('projects');

  function load() {
    setLoadError(null);
    Promise.all([
      fetch('/api/admin/overview', { credentials: 'include' }).then((r) => r.json().then((b) => ({ ok: r.ok, b }))),
      fetch('/api/admin/users', { credentials: 'include' }).then((r) => r.json().then((b) => ({ ok: r.ok, b }))),
      fetch('/api/admin/projects', { credentials: 'include' }).then((r) => r.json().then((b) => ({ ok: r.ok, b }))),
    ])
      .then(([o, u, p]) => {
        if (!o.ok) throw new Error(o.b.error || 'Failed to load overview.');
        if (!u.ok) throw new Error(u.b.error || 'Failed to load users.');
        if (!p.ok) throw new Error(p.b.error || 'Failed to load projects.');
        setOverview(o.b);
        setUsers(u.b);
        setProjects(p.b);
      })
      .catch((e) => setLoadError(e.message || String(e)));
  }

  React.useEffect(() => { if (address) load(); }, [address]);

  if (!address) {
    return (
      <div className="container py-48 text-center">
        <p className="ink-2 mb-24">Connect your wallet to continue.</p>
        <button className="btn btn-primary" onClick={connect}>Connect Wallet</button>
      </div>
    );
  }

  if (!isAdmin) {
    return (
      <div className="container py-48 text-center">
        <p style={{ color: 'var(--error)' }}>This wallet does not have admin access.</p>
      </div>
    );
  }

  if (loadError) {
    return (
      <div className="container py-48 text-center">
        <p style={{ color: 'var(--error)' }} className="mb-24">{loadError}</p>
        <button className="btn btn-secondary" onClick={load}>Try again</button>
      </div>
    );
  }
  if (!overview) return <div className="container py-48" />;

  return (
    <div className="container py-48">
      <div className="mb-32">
        <div className="eyebrow mb-8">Admin</div>
        <h1 className="h2 serif">Database overview</h1>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginBottom: 40 }}>
        <StatCard label="Users" value={overview.userCount} />
        <StatCard label="Projects" value={overview.projectCount} />
        <StatCard label="Sealed" value={overview.sealedCount} />
        <StatCard label="Events" value={overview.eventCount} />
      </div>

      <div className="seg mb-24" style={{ display: 'inline-flex' }}>
        <div className={'seg-item' + (tab === 'projects' ? ' active' : '')} onClick={() => setTab('projects')}>Projects · {projects.length}</div>
        <div className={'seg-item' + (tab === 'users' ? ' active' : '')} onClick={() => setTab('users')}>Users · {users.length}</div>
      </div>

      {tab === 'projects' ? (
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 160px 120px 100px 90px 160px', gap: 0 }}>
            {['TITLE', 'OWNER', 'STATUS', 'CHAIN', 'EVENTS', 'CREATED'].map((h) => (
              <div key={h} className="tiny" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{h}</div>
            ))}
            {projects.map((p) => (
              <React.Fragment key={p.id}>
                <div
                  className="small"
                  style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)', cursor: 'pointer', color: 'var(--primary-active)' }}
                  onClick={() => onNavigate('adminproject:' + p.id)}
                >
                  {p.title}
                </div>
                <div className="mono small" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{p.ownerWallet.slice(0, 6)}…{p.ownerWallet.slice(-4)}</div>
                <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}><StatusBadge status={p.status} /></div>
                <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{p.chain ? <ChainBadge chain={p.chain} /> : <span className="tiny">—</span>}</div>
                <div className="mono small" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{p.stats.events}</div>
                <div className="mono small ink-3" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{fmtDate(p.createdAt, { dateOnly: true })}</div>
              </React.Fragment>
            ))}
          </div>
        </div>
      ) : (
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px 100px 180px', gap: 0 }}>
            {['WALLET', 'PROJECTS', 'SEALED', 'JOINED'].map((h) => (
              <div key={h} className="tiny" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{h}</div>
            ))}
            {users.map((u) => (
              <React.Fragment key={u.walletAddress}>
                <div className="mono small" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{u.walletAddress}</div>
                <div className="mono small" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{u.projectCount}</div>
                <div className="mono small" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{u.sealedCount}</div>
                <div className="mono small ink-3" style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)' }}>{fmtDate(u.createdAt, { dateOnly: true })}</div>
              </React.Fragment>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function StatCard({ label, value }) {
  return (
    <div className="card-flat" style={{ padding: 20 }}>
      <div className="tiny">{label}</div>
      <div className="serif mt-8" style={{ fontSize: 40, lineHeight: 1, letterSpacing: '-0.02em' }}>{value}</div>
    </div>
  );
}

function AdminProjectDetail({ projectId, onNavigate }) {
  const { address, connect, isAdmin } = useWallet();
  const [data, setData] = React.useState(null);
  const [loadError, setLoadError] = React.useState(null);

  function load() {
    setLoadError(null);
    setData(null);
    fetch(`/api/admin/projects/${projectId}`, { credentials: 'include' })
      .then(async (r) => {
        const body = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(body.error || `Failed to load (HTTP ${r.status}).`);
        setData(body);
      })
      .catch((e) => setLoadError(e.message || String(e)));
  }

  React.useEffect(() => { if (address) load(); }, [address, projectId]);

  if (!address) {
    return (
      <div className="container py-48 text-center">
        <p className="ink-2 mb-24">Connect your wallet to continue.</p>
        <button className="btn btn-primary" onClick={connect}>Connect Wallet</button>
      </div>
    );
  }
  if (!isAdmin) {
    return (
      <div className="container py-48 text-center">
        <p style={{ color: 'var(--error)' }}>This wallet does not have admin access.</p>
      </div>
    );
  }
  if (loadError) {
    return (
      <div className="container py-48 text-center">
        <p style={{ color: 'var(--error)' }} className="mb-24">{loadError}</p>
        <button className="btn btn-secondary" onClick={load}>Try again</button>
      </div>
    );
  }
  if (!data) return <div className="container py-48" />;

  const { project, ownerWallet } = data;

  return (
    <div className="container py-48">
      <div className="row gap-8 mb-24 tiny" style={{ textTransform: 'none', letterSpacing: 0.04 }}>
        <a onClick={() => onNavigate('admin')} style={{ cursor: 'pointer' }}>Admin</a>
        <span>›</span>
        <span className="ink-2">{project.title}</span>
      </div>

      <div className="row gap-12 mb-16" style={{ flexWrap: 'wrap' }}>
        <StatusBadge status={project.status} />
        {project.chain && <ChainBadge chain={project.chain} />}
      </div>
      <h1 className="h2 serif mb-8">{project.title}</h1>
      <p className="ink-2 mb-32">{project.subtitle}</p>

      <div className="card mb-24" style={{ padding: 28 }}>
        <div className="col gap-16">
          <AdminRow label="Project ID"><span className="mono small">{project.id}</span></AdminRow>
          <AdminRow label="Owner wallet"><span className="mono small">{ownerWallet}</span></AdminRow>
          <AdminRow label="Created"><span className="mono small">{fmtTimeUTC(project.createdAt)}</span></AdminRow>
          {project.sealedAt && <AdminRow label="Sealed"><span className="mono small">{fmtTimeUTC(project.sealedAt)}</span></AdminRow>}
          {project.finalHash && <AdminRow label="Final hash"><span className="mono small" style={{ wordBreak: 'break-all' }}>{project.finalHash}</span></AdminRow>}
          {project.txHash && (
            <AdminRow label="Tx">
              <a className="mono small" style={{ cursor: 'pointer', color: 'var(--primary-active)' }} onClick={() => onNavigate('tx:' + project.txHash)}>
                {project.txHash}
              </a>
            </AdminRow>
          )}
        </div>
      </div>

      <h3 className="h3 serif mb-16">Events ({project.events.length})</h3>
      <div className="col gap-8">
        {project.events.map((e) => (
          <div key={e.id} className="card-flat" style={{ padding: 16 }}>
            <EventBadge event={e} compact={false} />
          </div>
        ))}
      </div>
    </div>
  );
}

function AdminRow({ label, children }) {
  return (
    <div className="row between" style={{ gap: 24 }}>
      <span className="tiny" style={{ flexShrink: 0 }}>{label}</span>
      {children}
    </div>
  );
}

window.Admin = Admin;
window.AdminProjectDetail = AdminProjectDetail;