import Link from 'next/link';
import { Section, KV } from '@/components/ui/section';
import { StatusBadge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { adminOverview } from '@/lib/queries/admin';
import { listRuns } from '@/lib/queries/sources';
import { fmtDateTime, fmtDuration, fmtInt } from '@/lib/format';

export default async function AdminOverviewPage() {
  const [o, runs] = await Promise.all([adminOverview(), listRuns({ limit: 15 })]);
  return (
    <div className="space-y-8">
      <header className="pt-4">
        <h1 className="text-3xl">Overview</h1>
      </header>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {[
          { label: 'Runs, last 24 h', value: o.runs24h, href: '/admin/connectors' },
          { label: 'Failed runs, 7 d', value: o.failedRuns7d, href: '/admin/connectors' },
          { label: 'Open unresolved labels', value: o.openUnresolved, href: '/admin/unresolved' },
          { label: 'Current ranking snapshots', value: o.currentSnapshots, href: '/admin/rankings' },
        ].map((k) => (
          <Link key={k.label} href={k.href} className="border border-rule px-3 py-2 no-underline hover:border-accent">
            <span className="ci-num block font-display text-2xl">{fmtInt(k.value)}</span>
            <span className="text-[12.5px] text-ink-2">{k.label}</span>
          </Link>
        ))}
      </div>

      <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
        <Section id="tables" kicker="Database" title="Row counts">
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>Table</th>
                  <th className="num">Rows</th>
                </tr>
              </thead>
              <tbody>
                {o.tables.map((t) => (
                  <tr key={t.table}>
                    <td className="ci-mono">{t.table}</td>
                    <td className={`num ${t.n === 0 ? 'text-ink-4' : ''}`}>{fmtInt(t.n)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Section>
        <div className="space-y-8">
          <Section id="runs" kicker="Connectors" title="Last runs">
            {runs.length ? (
              <div className="ci-table-wrap">
                <table className="ci-table">
                  <thead>
                    <tr>
                      <th>Run</th>
                      <th>Status</th>
                      <th>Started</th>
                      <th className="num">Duration</th>
                      <th className="num">Fetched</th>
                    </tr>
                  </thead>
                  <tbody>
                    {runs.map((r) => (
                      <tr key={r.id}>
                        <td>
                          <Link className="ci-mono ci-link text-[11.5px]" href={`/admin/runs/${r.id}`}>
                            {r.id}
                          </Link>
                        </td>
                        <td>
                          <StatusBadge status={r.status} />
                        </td>
                        <td className="whitespace-nowrap text-[12.5px]">{fmtDateTime(r.started_at)}</td>
                        <td className="num">{fmtDuration(r.duration_ms)}</td>
                        <td className="num">{fmtInt(r.records_fetched)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <EmptyState compact>No ingest run recorded.</EmptyState>
            )}
          </Section>
          <Section id="audit" kicker="Audit" title="Recent audit log">
            {o.auditRecent.length ? (
              <ul className="divide-y divide-rule text-[13px]">
                {o.auditRecent.map((a) => (
                  <li key={a.id} className="py-1.5">
                    <span className="ci-mono">{a.action}</span> by {a.actor}
                    {a.entity_type ? (
                      <>
                        {' '}
                        on {a.entity_type} <span className="ci-mono">{a.entity_id}</span>
                      </>
                    ) : null}
                    {a.reason ? <span className="text-ink-3"> — {a.reason}</span> : null}
                    <span className="block text-[11.5px] text-ink-3">{fmtDateTime(a.created_at)}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <EmptyState compact>No audit entry yet.</EmptyState>
            )}
          </Section>
          <KV items={[{ k: 'Environment', v: process.env.NODE_ENV ?? 'development' }, { k: 'API proxy', v: <span className="ci-mono">{process.env.CI_API_URL ?? `http://127.0.0.1:${process.env.API_PORT ?? 8251}`}</span> }]} />
        </div>
      </div>
    </div>
  );
}