import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { Badge, StatusBadge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { connectorHealth } from '@/lib/queries/admin';
import { fmtDateTime, fmtInt, relativeTime } from '@/lib/format';

export default async function AdminConnectorsPage() {
  const rows = await connectorHealth();
  return (
    <div className="space-y-6">
      <header className="pt-4">
        <h1 className="text-3xl">Connectors</h1>
        <p className="mt-1 text-[13.5px] text-ink-2">Health, last success and attempt, record counts of the last run, drift signals and license status per connector.</p>
      </header>
      <Section id="connectors" title="All connectors" kicker={`${rows.length} registered`}>
        {rows.length ? (
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>Connector</th>
                  <th>Status</th>
                  <th>License</th>
                  <th>Health</th>
                  <th>Last success</th>
                  <th>Last attempt</th>
                  <th>Last run</th>
                  <th className="num">Fetched</th>
                  <th className="num">Created</th>
                  <th className="num">Updated</th>
                  <th className="num">Rejected</th>
                  <th>Drift</th>
                  <th className="num">Runs</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => (
                  <tr key={r.slug}>
                    <td>
                      <Link className="ci-link" href={`/source/${r.slug}`}>
                        {r.name}
                      </Link>
                      <span className="ci-mono block text-[10.5px] text-ink-4">{r.slug}</span>
                    </td>
                    <td>
                      <StatusBadge status={r.status} />
                    </td>
                    <td>
                      <Badge tone={r.license_status === 'approved' ? 'ok' : 'warn'}>{r.license_status}</Badge>
                    </td>
                    <td>
                      <StatusBadge status={r.health ?? 'unknown'} />
                      {r.paused ? <Badge tone="warn" className="ml-1">paused</Badge> : null}
                      {r.health_detail ? <span className="block max-w-[220px] text-[11.5px] text-ink-3">{r.health_detail}</span> : null}
                    </td>
                    <td className="whitespace-nowrap text-[12.5px]" title={r.last_success_at ? fmtDateTime(r.last_success_at) : ''}>
                      {r.last_success_at ? relativeTime(r.last_success_at) : '—'}
                    </td>
                    <td className="whitespace-nowrap text-[12.5px]" title={r.last_attempt_at ? fmtDateTime(r.last_attempt_at) : ''}>
                      {r.last_attempt_at ? relativeTime(r.last_attempt_at) : '—'}
                    </td>
                    <td>
                      {r.last_run_id ? (
                        <>
                          <Link className="ci-mono ci-link text-[11.5px]" href={`/admin/runs/${r.last_run_id}`}>
                            {r.last_run_id}
                          </Link>{' '}
                          <StatusBadge status={r.last_run_status} />
                        </>
                      ) : (
                        <span className="text-ink-4">—</span>
                      )}
                    </td>
                    <td className="num">{r.records_fetched == null ? '—' : fmtInt(r.records_fetched)}</td>
                    <td className="num">{r.records_created == null ? '—' : fmtInt(r.records_created)}</td>
                    <td className="num">{r.records_updated == null ? '—' : fmtInt(r.records_updated)}</td>
                    <td className="num">{r.records_rejected == null ? '—' : fmtInt(r.records_rejected)}</td>
                    <td>
                      {r.schema_drift?.length ? <Badge tone="warn">{r.schema_drift.length} drift</Badge> : <span className="text-ink-4">none</span>}
                      {r.drift_fields ? <span className="block text-[11px] text-ink-3">{fmtInt(r.drift_fields)} fields tracked</span> : null}
                    </td>
                    <td className="num">{fmtInt(r.runs_total)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState compact>No connector registered.</EmptyState>
        )}
      </Section>
    </div>
  );
}