import Link from 'next/link';
import type { ReactNode } from 'react';
import { RunStatusPill, fmtDuration } from '@/components/meta/connectors-table';
import { cn } from '@/lib/cn';
import { fmtAgo, fmtDateTime, fmtInt, num } from '@/lib/format';
import type { ConnectorRun } from './types';

/** Server-safe admin building blocks: page header, stat tiles, error state, byte formatting, runs table. */

export function fmtBytes(v: number | string | null | undefined): string {
  const n = num(v);
  if (n === null) return '—';
  if (n < 1024) return `${fmtInt(n)} B`;
  const units = ['KB', 'MB', 'GB', 'TB'];
  let x = n / 1024;
  let i = 0;
  while (x >= 1024 && i < units.length - 1) {
    x /= 1024;
    i++;
  }
  return `${x >= 100 ? x.toFixed(0) : x.toFixed(1)} ${units[i]}`;
}

export function AdminHeader({ title, lede, action }: { title: ReactNode; lede?: ReactNode; action?: ReactNode }) {
  return (
    <div className="mb-6 flex flex-wrap items-end justify-between gap-3 border-b border-rule pb-4">
      <div className="min-w-0">
        <p className="eyebrow">Admin</p>
        <h1 className="mt-1 text-2xl font-semibold tracking-tight md:text-3xl">{title}</h1>
        {lede && <p className="mt-1.5 max-w-2xl text-sm text-ink-2">{lede}</p>}
      </div>
      {action}
    </div>
  );
}

export function AdminError({ message, what = 'Admin API' }: { message: string; what?: string }) {
  return (
    <div role="alert" className="rounded-md border border-danger/40 bg-danger-soft px-4 py-3 text-sm text-ink">
      <p className="font-medium text-danger">{what} unavailable</p>
      <p className="mono mt-1 break-words text-xs text-ink-2">{message}</p>
    </div>
  );
}

export function Tile({ label, value, hint, tone, href }: { label: string; value: ReactNode; hint?: ReactNode; tone?: 'ok' | 'warn' | 'danger'; href?: string }) {
  const color = tone === 'ok' ? 'text-active' : tone === 'warn' ? 'text-warn' : tone === 'danger' ? 'text-danger' : '';
  const body = (
    <>
      <p className="eyebrow">{label}</p>
      <p className={cn('tnum mt-1 text-xl font-semibold tracking-tight md:text-2xl', color)}>{value}</p>
      {hint && <p className="mt-0.5 text-xs text-ink-3">{hint}</p>}
    </>
  );
  return href ? (
    <Link href={href} className="block min-w-0 rounded-md border border-rule px-3 py-2.5 hover:bg-plane-2">
      {body}
    </Link>
  ) : (
    <div className="min-w-0 rounded-md border border-rule px-3 py-2.5">{body}</div>
  );
}

export function SectionTitle({ children, action }: { children: ReactNode; action?: ReactNode }) {
  return (
    <div className="mb-3 mt-8 flex items-end justify-between gap-3">
      <h2 className="text-base font-semibold tracking-tight md:text-lg">{children}</h2>
      {action}
    </div>
  );
}

export function RunsTable({ runs, now = Date.now(), showConnector = true, emptyLabel = 'No runs recorded' }: { runs: ConnectorRun[]; now?: number; showConnector?: boolean; emptyLabel?: string }) {
  if (runs.length === 0) return <p className="rounded-md border border-dashed border-rule-strong px-4 py-6 text-center text-sm text-ink-3">{emptyLabel}</p>;
  return (
    <div className="overflow-x-auto">
      <table className="data-table stack md:min-w-[860px]">
        <thead>
          <tr>
            {showConnector && <th>Connector</th>}
            <th>Started</th>
            <th>Status</th>
            <th className="num">Duration</th>
            <th className="num">Fetched</th>
            <th className="num">Created</th>
            <th className="num">Updated</th>
            <th>Error</th>
          </tr>
        </thead>
        <tbody>
          {runs.map((r) => (
            <tr key={r.id}>
              {showConnector && (
                <td className="primary">
                  <Link href={`/admin/connectors/${encodeURIComponent(r.connector_name)}`} className="mono text-sm text-ink hover:text-accent">
                    {r.connector_name}
                  </Link>
                </td>
              )}
              <td data-label="Started" title={fmtDateTime(r.started_at)} className={cn(!showConnector && 'primary')}>
                <span className="text-sm">{fmtAgo(r.started_at, now)}</span>
                <span className="mono ml-2 text-xs text-ink-3">{fmtDateTime(r.started_at)}</span>
              </td>
              <td data-label="Status">
                <RunStatusPill status={r.status} />
              </td>
              <td data-label="Duration" className="num tnum text-sm text-ink-2">
                {fmtDuration(r.duration_ms)}
              </td>
              <td data-label="Fetched" className="num tnum text-sm">
                {fmtInt(r.records_fetched)}
              </td>
              <td data-label="Created" className="num tnum text-sm text-ink-2">
                {fmtInt(r.records_created)}
              </td>
              <td data-label="Updated" className="num tnum text-sm text-ink-2">
                {fmtInt(r.records_updated)}
              </td>
              <td data-label="Error" className="max-w-[320px]">
                {r.error ? (
                  <span className="mono block truncate text-xs text-danger" title={r.error}>
                    {r.error}
                  </span>
                ) : (
                  <span className="text-xs text-ink-3">—</span>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/** Small mono JSON preview (config, run meta) — scrolls instead of overflowing. */
export function JsonInline({ value, className }: { value: unknown; className?: string }) {
  if (value === null || value === undefined) return <span className="text-xs text-ink-3">—</span>;
  return <code className={cn('mono block max-w-full overflow-x-auto whitespace-pre text-[11px] text-ink-3', className)}>{JSON.stringify(value)}</code>;
}