import type { Metadata } from 'next';
import Link from 'next/link';
import { AdminError, AdminHeader, SectionTitle, Tile, fmtBytes } from '@/components/admin/ui';
import { fmtDuration } from '@/components/meta/connectors-table';
import { adminApi, safeAdmin } from '@/lib/admin-api';
import { fmtDate, fmtInt, num } from '@/lib/format';

export const metadata: Metadata = { title: 'Costs' };

export default async function AdminCostsPage() {
  const res = await safeAdmin(adminApi.costs());
  if (res.error !== null) {
    return (
      <>
        <AdminHeader title="Costs" />
        <AdminError message={res.error} />
      </>
    );
  }
  const d = res.data.data;
  const totalRuns = d.per_connector.reduce((a, c) => a + (num(c.runs_30d) ?? 0), 0);
  const totalMs = d.per_connector.reduce((a, c) => a + (num(c.total_ms) ?? 0), 0);
  const totalFailed = d.per_connector.reduce((a, c) => a + (num(c.failed) ?? 0), 0);
  return (
    <>
      <AdminHeader title="Costs" lede="Compute (connector run time), storage and third-party provider usage over the last 30 days. All current sources are free; no paid provider is enabled." />

      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <Tile label="Runs · 30 d" value={fmtInt(totalRuns)} />
        <Tile label="Run time · 30 d" value={fmtDuration(totalMs)} />
        <Tile label="Failed runs" value={fmtInt(totalFailed)} tone={totalFailed > 0 ? 'warn' : undefined} />
        <Tile label="Database" value={d.storage.database} />
      </div>

      <SectionTitle>Per connector · last 30 days</SectionTitle>
      {d.per_connector.length === 0 ? (
        <p className="rounded-md border border-dashed border-rule-strong px-4 py-6 text-center text-sm text-ink-3">No runs in the last 30 days</p>
      ) : (
        <div className="overflow-x-auto">
          <table className="data-table stack md:min-w-[720px]">
            <thead>
              <tr>
                <th>Connector</th>
                <th className="num">Runs</th>
                <th className="num">Records</th>
                <th className="num">Total time</th>
                <th className="num">Avg / run</th>
                <th className="num">Failed</th>
              </tr>
            </thead>
            <tbody>
              {d.per_connector.map((c) => {
                const runs = num(c.runs_30d) ?? 0;
                const ms = num(c.total_ms) ?? 0;
                const failed = num(c.failed) ?? 0;
                return (
                  <tr key={c.connector_name}>
                    <td className="primary">
                      <Link href={`/admin/connectors/${encodeURIComponent(c.connector_name)}`} className="mono text-sm text-ink hover:text-accent">
                        {c.connector_name}
                      </Link>
                    </td>
                    <td data-label="Runs" className="num tnum text-sm">
                      {fmtInt(runs)}
                    </td>
                    <td data-label="Records" className="num tnum text-sm text-ink-2">
                      {fmtInt(c.records)}
                    </td>
                    <td data-label="Total time" className="num tnum text-sm text-ink-2">
                      {fmtDuration(ms)}
                    </td>
                    <td data-label="Avg / run" className="num tnum text-sm text-ink-2">
                      {runs > 0 ? fmtDuration(ms / runs) : '—'}
                    </td>
                    <td data-label="Failed" className={`num tnum text-sm ${failed > 0 ? 'text-warn' : 'text-ink-2'}`}>
                      {fmtInt(failed)}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      <SectionTitle>Storage</SectionTitle>
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <Tile label="Database" value={d.storage.database} hint="pg_database_size" />
        <Tile label="orbital_elements" value={d.storage.orbital_elements} hint="append-only history" />
        <Tile label="satellites" value={d.storage.satellites} hint="canonical table + indexes" />
        <Tile label="Raw payloads" value={d.storage.raw_uncompressed} hint="uncompressed bytes (stored gzip)" />
      </div>

      <SectionTitle>Raw snapshot growth · 30 days</SectionTitle>
      {d.raw_growth.length === 0 ? (
        <p className="rounded-md border border-dashed border-rule-strong px-4 py-6 text-center text-sm text-ink-3">No snapshots in the last 30 days</p>
      ) : (
        <div className="overflow-x-auto">
          <table className="data-table md:max-w-md">
            <thead>
              <tr>
                <th>Day</th>
                <th className="num">Snapshots</th>
                <th className="num">Bytes</th>
              </tr>
            </thead>
            <tbody>
              {d.raw_growth.map((g) => (
                <tr key={g.day}>
                  <td className="text-sm">{fmtDate(g.day)}</td>
                  <td className="num tnum text-sm">{fmtInt(g.snapshots)}</td>
                  <td className="num tnum text-sm text-ink-2">{fmtBytes(g.bytes)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <SectionTitle>Paid providers</SectionTitle>
      <ul className="divide-y divide-rule border-y border-rule">
        {Object.entries(d.paid_providers).map(([k, v]) => (
          <li key={k} className="flex items-center justify-between gap-3 py-2.5 text-sm">
            <span className="mono text-ink">{k}</span>
            <span className={v === 'not enabled' ? 'text-ink-3' : 'text-warn'}>{v}</span>
          </li>
        ))}
      </ul>
    </>
  );
}