import type { SourceRef } from "@dci/core";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
import { SOURCE_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";

/** Attribution footer listing the sources behind the figures on the page (from the API envelope `sources`). */
export function SourcesFooter({ sources, updatedAt, note }: { sources: SourceRef[] | undefined | null; updatedAt?: string | null; note?: string }) {
  const list = sources ?? [];
  return (
    <footer className="mt-10 border-t border-hair pt-4 text-[12px] text-ink-3">
      <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
        <div className="label-caps">Sources &amp; attribution</div>
        {updatedAt && <div className="figure text-[11.5px]">Record updated {new Date(updatedAt).toISOString().slice(0, 10)} UTC</div>}
      </div>
      {list.length ? (
        <ul className="mt-2 divide-y divide-hair">
          {list.map((s) => (
            <li key={s.id} className="flex flex-col gap-0.5 py-2 sm:flex-row sm:items-baseline sm:gap-3">
              <div className="flex min-w-0 items-center gap-2 sm:w-[260px] sm:shrink-0">
                <Link href={routes.source(s.id)} className="truncate font-medium text-ink-2 hover:text-ink hover:underline">
                  {s.name}
                </Link>
                <span className="shrink-0 text-[11px] text-ink-4">{SOURCE_KIND_LABEL[s.kind]}</span>
              </div>
              <div className="min-w-0 flex-1">
                {s.attribution && <span className="text-ink-3">{s.attribution}</span>}
                {s.license && <span className="text-ink-4"> · {s.license.length > 90 ? `${s.license.slice(0, 87)}…` : s.license}</span>}
              </div>
              {s.url && (
                <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex shrink-0 items-center gap-1 text-ink-3 hover:text-accent">
                  {s.domain} <ExternalLink className="size-3" />
                </a>
              )}
            </li>
          ))}
        </ul>
      ) : (
        <p className="mt-2">Every figure on this page links to the page it was observed on; see the provenance table above.</p>
      )}
      <p className="mt-3 text-[11.5px] text-ink-4">
        {note ?? "Figures are lower bounds computed from published or filed values only; estimates are marked ≈. Nothing is imputed."}{" "}
        <Link href={routes.methodology()} className="underline decoration-hair-2 hover:text-ink">
          Methodology
        </Link>
      </p>
    </footer>
  );
}