import type { Metadata } from 'next';
import Link from 'next/link';
import { LevelBadge, PNum, Section } from '@/components/ui/primitives';
import { apiGet } from '@/lib/api';
import { fmtInt, fmtPct } from '@/lib/format';
import { VendorIndicator } from '@/components/service/VendorIndicator';
import type { ServiceRow } from '@/lib/types';

export const dynamic = 'force-dynamic';
export const metadata: Metadata = { title: 'Services', description: 'Independent observation of major Internet services versus what their status pages declare.' };

export default async function ServicesPage() {
  const { services } = await apiGet<{ services: ServiceRow[] }>('/api/v1/services');
  const sorted = [...services].sort((a, b) => b.pressure - a.pressure);
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">Index</p>
        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">Services</h1>
        <p className="mt-1 text-[13px] text-ink-2">{fmtInt(services.length)} providers · what we observe from our probes next to what the vendor declares. The discrepancy is the valuable part.</p>
      </header>
      <Section>
        <div className="scroll-x -mx-3 px-3">
          <table className="tbl">
            <thead>
              <tr>
                <th>Service</th>
                <th className="hidden sm:table-cell">Category</th>
                <th className="r">Pressure</th>
                <th className="hidden md:table-cell">Level</th>
                <th className="r">Observed avail. 24h</th>
                <th className="r hidden sm:table-cell">Targets</th>
                <th className="hidden md:table-cell">Affected regions</th>
                <th>Vendor status</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map((s) => {
                const discrepancy = s.affected_regions.length > 0 && s.vendor_status?.indicator === 'none';
                return (
                  <tr key={s.slug}>
                    <td>
                      <Link href={`/service/${s.slug}`} className="text-ink hover:text-accent">
                        {s.name}
                      </Link>
                      {discrepancy && <span className="ml-2 text-[10px] uppercase tracking-[0.1em] text-warn">discrepancy</span>}
                    </td>
                    <td className="hidden text-ink-2 sm:table-cell">{s.category}</td>
                    <td className="r">
                      <PNum value={s.pressure} className="text-[14px]" />
                    </td>
                    <td className="hidden md:table-cell">
                      <LevelBadge level={s.level} size="xs" />
                    </td>
                    <td className="num r" style={{ color: s.observed_availability_24h < 0.999 ? 'var(--p-elevated)' : 'var(--ink)' }}>
                      {fmtPct(s.observed_availability_24h, 2)}
                    </td>
                    <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(s.targets)}</td>
                    <td className="hidden text-ink-2 md:table-cell">{s.affected_regions.length ? s.affected_regions.join(', ') : '—'}</td>
                    <td>
                      <VendorIndicator v={s.vendor_status} />
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Section>
    </div>
  );
}