import type { Metadata } from "next";
import Link from "next/link";
import { RelativeTime } from "@/components/ui/freshness";
import { Page, PageHeader } from "@/components/ui/section";
import { RightsBadge, StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import { formatDuration } from "@/lib/format";
import type { ConnectorPublic } from "@/lib/types";

export const metadata: Metadata = { title: "Connectors", description: "Operational status of every Market Atlas connector: type, rights, message rate, latency, coverage and reliability.", alternates: { canonical: "/connectors" } };
export const dynamic = "force-dynamic";

export default async function ConnectorsPage() {
  const rows = await api<ConnectorPublic[]>("/v1/connectors");
  const healthy = rows.filter((r) => r.status === "HEALTHY").length;
  return (
    <Page wide>
      <PageHeader kicker="Operations" title="Connectors" lead={`${rows.length} connectors, ${healthy} healthy. A connector is one technical integration of a source (WebSocket feed, JSON endpoint, official file, RSS, HTML page…). The framework proves it generalizes across ${new Set(rows.map((r) => r.source_type)).size} transport types.`} actions={<Link href="/data-health" className="text-sm text-accent hover:underline">Data health →</Link>} />
      <div className="overflow-x-auto rounded-md border border-rule bg-surface">
        <table className="table-dense">
          <thead>
            <tr>
              <th>Connector</th>
              <th>Status</th>
              <th>Type</th>
              <th>Rights</th>
              <th className="hidden md:table-cell">Real time</th>
              <th className="text-right">Msg / min</th>
              <th className="text-right">Total</th>
              <th className="hidden text-right lg:table-cell">p50 / p95 latency</th>
              <th className="hidden text-right lg:table-cell">Parse</th>
              <th className="text-right">Instruments</th>
              <th className="text-right">Score</th>
              <th>Last message</th>
              <th className="hidden xl:table-cell">Next poll</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.id}>
                <td className="max-w-[340px] whitespace-normal">
                  <div className="font-medium">{r.name}</div>
                  <div className="mono text-[11px] text-ink-3">
                    {r.id} · v{r.version} ·{" "}
                    <Link href={`/sources#${r.source_id}`} className="hover:underline">
                      {r.source_id}
                    </Link>
                  </div>
                  <div className="mt-0.5 text-xs text-ink-2">{r.description}</div>
                </td>
                <td>
                  <StatusBadge status={r.status} />
                </td>
                <td className="mono text-xs">{r.source_type}</td>
                <td>
                  <RightsBadge status={r.rights_status} />
                </td>
                <td className="hidden text-xs text-ink-2 md:table-cell">{r.realtime_status.replace(/_/g, " ").toLowerCase()}</td>
                <td className="num">{r.messages_1m}</td>
                <td className="num">{r.messages_total.toLocaleString("en-US")}</td>
                <td className="num hidden lg:table-cell">
                  {r.median_latency_ms == null ? "—" : formatDuration(r.median_latency_ms)} / {r.p95_latency_ms == null ? "—" : formatDuration(r.p95_latency_ms)}
                </td>
                <td className="num hidden lg:table-cell">{r.parse_success_rate == null ? "—" : `${Math.round(r.parse_success_rate * 100)}%`}</td>
                <td className="num">{r.instruments_covered}</td>
                <td className="num">{r.reliability_score ?? "—"}</td>
                <td className="text-xs text-ink-3">{r.last_message_at ? <RelativeTime value={r.last_message_at} /> : "—"}</td>
                <td className="hidden text-xs text-ink-3 xl:table-cell">{r.next_poll_at ? <RelativeTime value={r.next_poll_at} /> : r.supports_streaming ? "streaming" : "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Page>
  );
}