import type { ReactNode } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';

/** Dense, plain admin primitives: heading row, key/value list, compact table, status pill. */
export function AdminSection({ title, sub, actions, children, className }: { title: string; sub?: ReactNode; actions?: ReactNode; children: ReactNode; className?: string }) {
  return (
    <section className={cn('border-t border-rule py-4 first:border-t-0', className)}>
      <div className="mb-2 flex flex-wrap items-end justify-between gap-2">
        <div>
          <h2 className="text-base font-semibold text-ink">{title}</h2>
          {sub ? <p className="text-xs text-ink-3">{sub}</p> : null}
        </div>
        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
      </div>
      {children}
    </section>
  );
}

export function Kv({ rows, className }: { rows: Array<[string, ReactNode]>; className?: string }) {
  return (
    <dl className={cn('grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1 text-xs', className)}>
      {rows.map(([k, v]) => (
        <div key={k} className="contents">
          <dt className="text-ink-3">{k}</dt>
          <dd className="tnum break-all text-ink">{v ?? t('admin.na')}</dd>
        </div>
      ))}
    </dl>
  );
}

export interface Col<T> {
  key: string;
  header: ReactNode;
  cell: (row: T) => ReactNode;
  numeric?: boolean;
  className?: string;
}

/** Compact table with horizontal scroll on narrow screens (admin only — dense by design). */
export function AdminTable<T>({ rows, columns, rowKey, className, empty }: { rows: T[]; columns: Col<T>[]; rowKey: (r: T, i: number) => string; className?: string; empty?: ReactNode }) {
  if (rows.length === 0) return <p className="py-3 text-xs text-ink-3">{empty ?? t('common.noDataLong')}</p>;
  return (
    <div className={cn('-mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0', className)}>
      <table className="w-full min-w-[640px] border-collapse text-xs">
        <thead>
          <tr className="border-b border-rule text-left text-2xs uppercase tracking-wide text-ink-3">
            {columns.map((c) => (
              <th key={c.key} scope="col" className={cn('py-1.5 pr-3 font-medium', c.numeric && 'text-right', c.className)}>
                {c.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-rule">
          {rows.map((r, i) => (
            <tr key={rowKey(r, i)} className="hover:bg-surface-2/60">
              {columns.map((c) => (
                <td key={c.key} className={cn('py-1.5 pr-3 align-top', c.numeric && 'tnum text-right', c.className)}>
                  {c.cell(r)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function Pill({ tone, children }: { tone: 'ok' | 'warn' | 'bad' | 'muted'; children: ReactNode }) {
  return (
    <span className={cn('inline-flex items-center rounded-sm border px-1.5 py-px text-2xs font-medium', tone === 'ok' && 'border-up/40 text-up', tone === 'warn' && 'border-warn/40 text-warn', tone === 'bad' && 'border-down/40 text-down', tone === 'muted' && 'border-rule text-ink-3')}>
      {children}
    </span>
  );
}

export function statusTone(s: string | null | undefined): 'ok' | 'warn' | 'bad' | 'muted' {
  const v = (s ?? '').toLowerCase();
  if (v === 'ok' || v === 'verified') return 'ok';
  if (v === 'partial' || v === 'warning' || v === 'stale') return 'warn';
  if (v === 'failed' || v === 'quarantined' || v === 'error') return 'bad';
  return 'muted';
}

export function bytes(n: number | null | undefined): string {
  if (n == null) return t('admin.na');
  if (n >= 1e9) return `${(n / 1e9).toFixed(2)} GB`;
  if (n >= 1e6) return `${(n / 1e6).toFixed(1)} MB`;
  if (n >= 1e3) return `${(n / 1e3).toFixed(0)} kB`;
  return `${n} B`;
}

export function ts(iso: string | null | undefined): string {
  if (!iso) return t('admin.na');
  return iso.replace('T', ' ').replace(/\.\d+/, '').replace(/\+00:00$/, 'Z');
}