"use client";

import {
  MATURITY_BUCKET_ORDER,
  UNIVERSE_CONFIG,
  UNIVERSE_KEYS,
  getColumnLabels,
  type PeerCurveResponse,
  type UniverseKey,
} from "@/hooks/usePeerCurve";

interface Props {
  data: PeerCurveResponse;
}

function fmt(val: number | null | undefined): string {
  if (val == null) return "—";
  return val.toFixed(2);
}

export function PeerCurveTable({ data }: Props) {
  const { table, bond_counts, spread_source } = data;
  const labels = getColumnLabels(data);

  const spreadLabel =
    spread_source === "oas"
      ? "OAS"
      : spread_source === "z_spread"
      ? "Z-Spread"
      : "Asset Swap Spread";

  return (
    <div className="space-y-1.5">
      {/* Section header */}
      <h2 className="text-sm font-bold text-orange-400">Average OAS Table</h2>
      <p className="text-[11px] italic text-orange-400/70">
        Average {spreadLabel} (bps) per maturity bucket across peer universes
      </p>

      <div className="overflow-x-auto rounded-md border border-border">
        <table className="w-full text-xs">
          <thead>
            <tr className="border-b border-border bg-muted/40">
              <th className="px-3 py-2 text-left font-medium text-muted-foreground w-20">
                Maturity
              </th>
              {UNIVERSE_KEYS.map((key) => {
                const cfg = UNIVERSE_CONFIG[key];
                return (
                  <th
                    key={key}
                    className="px-3 py-2 text-right font-medium whitespace-nowrap"
                    style={{ color: cfg.color }}
                  >
                    <div>{labels[key]}</div>
                    <div className="text-[10px] font-normal text-muted-foreground/60">
                      n={bond_counts[key] ?? 0}
                    </div>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {MATURITY_BUCKET_ORDER.map((bucket, i) => {
              const row = table[bucket];
              const isAll = bucket === "All";
              return (
                <tr
                  key={bucket}
                  className={[
                    "border-b border-border/50 last:border-0",
                    isAll
                      ? "bg-muted/20 font-semibold border-t border-border"
                      : i % 2 === 0
                      ? ""
                      : "bg-muted/10",
                  ].join(" ")}
                >
                  <td className="px-3 py-1.5 font-medium text-foreground">
                    {bucket}
                  </td>
                  {UNIVERSE_KEYS.map((key) => {
                    const val = row?.[key as UniverseKey] ?? null;
                    return (
                      <td
                        key={key}
                        className="px-3 py-1.5 text-right tabular-nums"
                        style={{ color: val != null ? UNIVERSE_CONFIG[key].color : "hsl(var(--muted-foreground))" }}
                      >
                        {fmt(val)}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}