import Link from 'next/link';
import { t } from '@/i18n';
import { adminApi, adminErrorMessage } from '@/lib/admin-api';
import { grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import { AdminSection, AdminTable, Pill, statusTone, ts } from '@/components/admin/admin-ui';

export const dynamic = 'force-dynamic';

export default async function AdminRunsPage({ searchParams }: { searchParams: Promise<{ connector?: string; status?: string }> }) {
  const sp = await searchParams;
  try {
    const r = await adminApi.runs({ connector: sp.connector, status: sp.status, limit: 300 });
    const connectors = Array.from(new Set(r.items.map((x) => x.connector).filter((x): x is string => !!x))).sort();
    return (
      <AdminSection
        title={t('admin.runs.title')}
        sub={t('admin.runs.sub', { n: grouped(r.n) })}
        actions={
          <div className="flex flex-wrap gap-1 text-xs">
            <Link href={routes.admin('runs')} className={`inline-flex h-8 items-center rounded-sm px-2 ${!sp.connector ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2'}`}>
              {t('common.all')}
            </Link>
            {connectors.map((c) => (
              <Link key={c} href={`${routes.admin('runs')}?connector=${c}`} className={`inline-flex h-8 items-center rounded-sm px-2 ${sp.connector === c ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2'}`}>
                {c}
              </Link>
            ))}
          </div>
        }
      >
        <AdminTable
          rows={r.items}
          rowKey={(x, i) => `${x.run_id}-${x.dataset}-${i}`}
          columns={[
            { key: 'run', header: t('admin.runs.run'), cell: (x) => (x.run_id ? <Link href={`${routes.admin('raw')}?run_id=${encodeURIComponent(x.run_id)}`} className="font-mono text-accent hover:underline">{x.run_id}</Link> : t('admin.na')) },
            { key: 'c', header: t('admin.connectors.connector'), cell: (x) => x.connector },
            { key: 'd', header: t('source.runs.dataset'), cell: (x) => <span className="break-all font-mono">{x.dataset}</span>, className: 'max-w-[22rem]' },
            { key: 's', header: t('source.runs.status'), cell: (x) => <Pill tone={statusTone(x.status)}>{x.status ?? t('admin.na')}</Pill> },
            { key: 'st', header: t('source.runs.started'), cell: (x) => ts(x.started_at) },
            { key: 'rows', header: t('source.runs.rows'), numeric: true, cell: (x) => (x.rows_valid != null ? grouped(x.rows_valid) : t('admin.na')) },
            { key: 'w', header: t('source.runs.warnings'), numeric: true, cell: (x) => (x.warnings != null ? grouped(x.warnings) : t('admin.na')) },
            { key: 'e', header: t('source.runs.errors'), numeric: true, cell: (x) => (x.errors ? <span className="text-down">{grouped(x.errors)}</span> : '0') },
            { key: 'm', header: t('admin.issues.message'), cell: (x) => <span className="text-ink-2">{x.message}</span>, className: 'max-w-[24rem]' },
          ]}
        />
      </AdminSection>
    );
  } catch (e) {
    return <p className="mt-3 rounded-sm border border-down/40 px-3 py-2 text-xs text-down">{adminErrorMessage(e)}</p>;
  }
}