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 } from '@/components/admin/admin-ui';

export const dynamic = 'force-dynamic';
const SEVERITIES = ['error', 'warning', 'info'];

export default async function AdminIssuesPage({ searchParams }: { searchParams: Promise<{ severity?: string; connector?: string; indicator?: string; code?: string; run_id?: string }> }) {
  const sp = await searchParams;
  try {
    const r = await adminApi.issues({ severity: sp.severity, connector: sp.connector, indicator: sp.indicator, code: sp.code, run_id: sp.run_id, limit: 300 });
    const link = (patch: Record<string, string | undefined>) => {
      const p = new URLSearchParams();
      for (const [k, v] of Object.entries({ ...sp, ...patch })) if (v) p.set(k, v);
      const s = p.toString();
      return `${routes.admin('issues')}${s ? `?${s}` : ''}`;
    };
    return (
      <>
        <AdminSection
          title={t('admin.issues.title')}
          sub={t('admin.issues.sub', { n: grouped(r.n) })}
          actions={
            <div className="flex flex-wrap gap-1 text-xs">
              <Link href={link({ severity: undefined })} className={`inline-flex h-8 items-center rounded-sm px-2 ${!sp.severity ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2'}`}>
                {t('admin.issues.all')}
              </Link>
              {SEVERITIES.map((s) => (
                <Link key={s} href={link({ severity: s })} className={`inline-flex h-8 items-center rounded-sm px-2 ${sp.severity === s ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2'}`}>
                  {s}
                </Link>
              ))}
            </div>
          }
        >
          {r.summary.length ? (
            <ul className="mb-3 flex flex-wrap gap-1.5 text-xs">
              {r.summary.map((s) => (
                <li key={`${s.severity}-${s.code}`}>
                  <Link href={link({ severity: s.severity, code: s.code })} className="inline-flex h-8 items-center gap-1.5 rounded-sm border border-rule px-2 hover:bg-surface-2">
                    <Pill tone={statusTone(s.severity)}>{s.severity}</Pill>
                    <span className="font-mono">{s.code}</span>
                    <span className="tnum text-ink-3">{grouped(s.n)}</span>
                  </Link>
                </li>
              ))}
            </ul>
          ) : null}
          <AdminTable
            rows={r.items}
            rowKey={(x, i) => `${x.run_id}-${x.indicator_id}-${x.country_id}-${i}`}
            empty={t('admin.issues.none')}
            columns={[
              { key: 'sev', header: t('admin.issues.severity'), cell: (x) => <Pill tone={statusTone(x.severity)}>{x.severity ?? t('admin.na')}</Pill> },
              { key: 'code', header: t('admin.issues.code'), cell: (x) => <span className="font-mono">{x.code}</span> },
              { key: 'c', header: t('admin.issues.connector'), cell: (x) => x.connector },
              { key: 'i', header: t('admin.issues.indicator'), cell: (x) => (x.indicator_id ? <Link href={routes.indicator(x.indicator_id)} className="font-mono text-accent hover:underline">{x.indicator_id}</Link> : t('admin.na')) },
              { key: 'cty', header: t('admin.issues.country'), cell: (x) => x.country_id ?? t('admin.na') },
              { key: 'p', header: t('admin.issues.period'), cell: (x) => x.period ?? t('admin.na') },
              { key: 'v', header: t('admin.issues.value'), numeric: true, cell: (x) => (x.value != null ? String(x.value) : t('admin.na')) },
              { key: 'm', header: t('admin.issues.message'), cell: (x) => <span className="text-ink-2">{x.message ?? ''}</span>, className: 'max-w-[28rem]' },
            ]}
          />
        </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>;
  }
}