import type { Metadata } from "next";
import Link from "next/link";
import { WorldMap } from "@/components/market/world-map";
import { ChangeCell } from "@/components/ui/price";
import { Page, PageHeader, Section } from "@/components/ui/section";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import type { Breadth, Exchange, ExchangeStatus } from "@/lib/types";

type Row = Exchange & { status: ExchangeStatus; instruments_tracked: number; instruments_quoted: number; breadth: Breadth | null };

export const metadata: Metadata = { title: "Exchanges", description: "World exchanges with live session state, local time, instruments tracked and breadth.", alternates: { canonical: "/exchanges" } };
export const dynamic = "force-dynamic";

const ORDER = ["OPEN", "PRE", "POST", "AUCTION", "HALTED", "CLOSED", "UNKNOWN"];

export default async function ExchangesPage() {
  const rows = await api<Row[]>("/v1/exchanges");
  const sorted = [...rows].sort((a, b) => ORDER.indexOf(a.status.state) - ORDER.indexOf(b.status.state) || b.instruments_tracked - a.instruments_tracked || a.name.localeCompare(b.name));
  const open = rows.filter((r) => r.status.state === "OPEN").length;
  const mapRows = rows.map((r) => ({ id: r.id, name: r.name, mic: r.mic, country: r.country, city: r.city, timezone: r.timezone, lat: r.lat, lon: r.lon, status: r.status, asset_classes: r.asset_classes ?? [], breadth: r.breadth }));
  return (
    <Page wide>
      <PageHeader kicker="World" title="Exchanges" lead={`${rows.length} venues in the atlas · ${open} trading right now. Session states come from the market-hours engine (time zones, holidays, early closes); instrument counts are what Market Atlas tracks, not the venue's full listing.`} />
      <WorldMap exchanges={mapRows} />
      <Section title="All venues" hint="sorted by session state, then coverage">
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Exchange</th>
                <th>MIC</th>
                <th>Country</th>
                <th>State</th>
                <th>Local time</th>
                <th className="hidden md:table-cell">Next</th>
                <th className="text-right">Tracked</th>
                <th className="text-right">Quoted</th>
                <th className="hidden text-right lg:table-cell">Adv / Dec</th>
                <th className="hidden text-right lg:table-cell">Median</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map((r) => (
                <tr key={r.id}>
                  <td>
                    <Link href={`/exchanges/${r.id}`} className="font-medium hover:underline">
                      {r.name}
                    </Link>
                    <span className="block text-[11px] text-ink-3">{r.city ?? r.operator ?? ""}</span>
                  </td>
                  <td className="mono text-ink-2">{r.mic ?? "—"}</td>
                  <td>
                    <Link href={`/countries/${r.country}`} className="hover:underline">
                      {r.country}
                    </Link>
                  </td>
                  <td>
                    <StatusBadge status={r.status.state} />
                    {r.status.isHoliday && r.status.holidayName && <span className="ml-1 text-[11px] text-ink-3">{r.status.holidayName}</span>}
                  </td>
                  <td className="mono text-ink-2">{r.status.localTime}</td>
                  <td className="mono hidden text-xs text-ink-3 md:table-cell">{r.status.nextTransition ? `${r.status.nextTransition.state.toLowerCase()} · ${new Date(r.status.nextTransition.at).toLocaleString("en-GB", { timeZone: r.timezone, weekday: "short", hour: "2-digit", minute: "2-digit", hourCycle: "h23" })}` : r.sessions.continuous ? "24/7" : "—"}</td>
                  <td className="num">{r.instruments_tracked.toLocaleString("en-US")}</td>
                  <td className="num">{r.instruments_quoted}</td>
                  <td className="num hidden lg:table-cell">{r.breadth ? `${r.breadth.advancers} / ${r.breadth.decliners}` : "—"}</td>
                  <td className="num hidden lg:table-cell">{r.breadth ? <ChangeCell value={r.breadth.median_change_percent} /> : "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
    </Page>
  );
}