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

export const metadata: Metadata = { title: "Sources", description: "Directory of the exchanges, regulators, central banks and datasets Market Atlas observes, with rights and real-time classification.", alternates: { canonical: "/sources" } };
export const dynamic = "force-dynamic";

const CATEGORY_LABEL: Record<string, string> = { EXCHANGE: "Exchanges", REGULATOR: "Regulators", CENTRAL_BANK: "Central banks", GOVERNMENT: "Government", ISSUER: "Issuer websites", PUBLIC_MARKET_SOURCE: "Public market sources", OFFICIAL_DATASET: "Official & licensed datasets", NEWS: "News", INTERNAL: "Market Atlas internal" };
const RT_LABEL: Record<string, string> = { REALTIME: "real time", DELAYED: "delayed", END_OF_DAY: "end of day", INDICATIVE: "indicative", UNKNOWN: "unknown", STALE: "stale" };

export default async function SourcesPage() {
  const sources = (await api<Source[]>("/v1/sources")).filter((s) => s.category !== "INTERNAL");
  const cats = [...new Set(sources.map((s) => s.category))];
  return (
    <Page wide>
      <PageHeader kicker="Provenance" title="Sources" lead={`${sources.length} organizations feed the atlas through ${sources.reduce((a, s) => a + s.connectors, 0)} connectors. Each source declares how its data may be used and how fresh it is; endpoints are not published to discourage abuse.`} actions={
          <>
            <Link href="/coverage" className="text-sm text-accent hover:underline">
              Source coverage →
            </Link>
            <Link href="/connectors" className="text-sm text-accent hover:underline">
              Connector operations →
            </Link>
          </>
        } />
      {cats.map((cat) => (
        <Section key={cat} title={CATEGORY_LABEL[cat] ?? cat}>
          <div className="overflow-x-auto rounded-md border border-rule bg-surface">
            <table className="table-dense">
              <thead>
                <tr>
                  <th>Source</th>
                  <th>Status</th>
                  <th>Role</th>
                  <th>Type</th>
                  <th>Rights</th>
                  <th>Freshness</th>
                  <th className="text-right">Coverage</th>
                  <th className="text-right">Reliability</th>
                  <th>Last observation</th>
                </tr>
              </thead>
              <tbody>
                {sources
                  .filter((s) => s.category === cat)
                  .map((s) => (
                    <tr key={s.id} id={s.id}>
                      <td className="max-w-[360px] whitespace-normal">
                        <div className="font-medium">
                          {s.homepage ? (
                            <a href={s.homepage} target="_blank" rel="noopener noreferrer" className="hover:underline">
                              {s.name}
                            </a>
                          ) : (
                            s.name
                          )}
                        </div>
                        <div className="text-[11.5px] text-ink-3">
                          {s.organization}
                          {s.jurisdiction ? ` · ${s.jurisdiction}` : ""}
                          {s.asset_classes.length ? ` · ${s.asset_classes.map((c) => ASSET_CLASS_LABEL[c] ?? c).join(", ")}` : ""}
                        </div>
                        {s.description && <div className="mt-1 text-xs text-ink-2">{s.description}</div>}
                        {s.rights_notes && (
                          <div className="mt-1 text-[11px] text-ink-3">
                            {s.rights_notes}
                            {s.terms_url && (
                              <>
                                {" "}
                                <a href={s.terms_url} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
                                  terms ↗
                                </a>
                              </>
                            )}
                          </div>
                        )}
                      </td>
                      <td>
                        <StatusBadge status={s.status} />
                      </td>
                      <td className="text-xs">
                        {s.role === "validator" ? (
                          <span className="inline-flex h-5 items-center rounded-[3px] bg-surface-3 px-1.5 text-[10.5px] font-medium uppercase tracking-wide text-ink-2" title="Restricted rights: compared to the consensus, never sets the price, never displayed">
                            validator
                          </span>
                        ) : (
                          <span className="inline-flex h-5 items-center rounded-[3px] bg-positive-soft px-1.5 text-[10.5px] font-medium uppercase tracking-wide text-positive" title="Votes in the consensus and is redistributed with attribution">
                            contributor
                          </span>
                        )}
                        {s.likely_shared_upstream_with && s.likely_shared_upstream_with.length > 0 && (
                          <div className="mt-1 max-w-[180px] whitespace-normal text-[10.5px] text-warning">
                            likely shares an upstream with {s.likely_shared_upstream_with.join(", ")} — counted as one family
                          </div>
                        )}
                      </td>
                      <td className="mono text-xs text-ink-2">{s.source_type}</td>
                      <td>
                        <RightsBadge status={s.rights_status} />
                      </td>
                      <td className="text-xs text-ink-2">{RT_LABEL[s.realtime_status] ?? s.realtime_status}</td>
                      <td className="num">{s.coverage.toLocaleString("en-US")}</td>
                      <td className="num">{s.reliability_score ?? "—"}</td>
                      <td className="text-xs text-ink-3">{s.last_observation ? <RelativeTime value={s.last_observation} /> : "—"}</td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        </Section>
      ))}
      <p className="mt-6 text-xs text-ink-3">
        Role: <strong>contributors</strong> vote in the consensus and are redistributed with attribution; <strong>validators</strong> are sources whose data rights forbid redistribution — Market Atlas compares them to the canonical value to confirm or contest it, but they never set the price and are never displayed. Sources that statistically mirror each other (identical values within seconds) are counted as one family; see <Link href="/coverage" className="text-accent hover:underline">source coverage</Link>. Coverage = instruments this source has published a value for in the last 24 hours. Reliability = operational score (availability, latency, parse success, stability), see <Link href="/methodology" className="text-accent hover:underline">methodology</Link>. Rights statuses are explained on the <Link href="/licensing" className="text-accent hover:underline">data rights</Link> page.
      </p>
    </Page>
  );
}