import Badge from "@/components/ui/Badge";
import FlagBadges from "@/components/ui/FlagBadges";
import ProvenanceChip from "@/components/ui/ProvenanceChip";
import { categoryLabels, trackLabels } from "@/lib/data";
import type { ModelRow } from "@/lib/types";
import FlagNotes from "./FlagNotes";

export interface ModelHeaderProps {
  model: ModelRow;
}

/** "0.6" → "0.6B"; undefined → "—". */
function fmtParams(paramsB?: number): string {
  return paramsB === undefined ? "—" : `${paramsB}B`;
}

/**
 * Model identity block: serif name, org, mono param count, license /
 * track chips, provenance chip, flag icons + plain-language flag notes,
 * and the editorial note line.
 */
export default function ModelHeader({ model }: ModelHeaderProps) {
  return (
    <header className="hairline-b pb-6 spring-up">
      <p className="num mb-3 text-[11px] uppercase tracking-[0.22em] text-muted spring-in">
        Model profile · {categoryLabels[model.category]}
      </p>

      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
        <h1 className="font-display text-4xl leading-[1.05] text-text md:text-5xl spring-in" style={{ animationDelay: "60ms" }}>
          {model.name}
        </h1>
        <div className="mb-1.5 spring-in" style={{ animationDelay: "90ms" }}>
          <ProvenanceChip provenance={model.provenance} />
        </div>
      </div>

      <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 spring-in" style={{ animationDelay: "120ms" }}>
        <span className="text-sm text-muted">{model.org}</span>
        <span aria-hidden className="text-muted/40">
          ·
        </span>
        <span className="num text-sm text-text" title="Parameter count">
          {fmtParams(model.paramsB)}
        </span>
        <Badge variant="outline" title={`License: ${model.license}`}>
          {model.license}
        </Badge>
        <Badge variant="neutral" title={trackLabels[model.track]}>
          {trackLabels[model.track]}
        </Badge>
        <FlagBadges flags={model.flags} />
      </div>

      {model.note && (
        <p className="mt-4 font-display text-lg italic text-muted spring-in" style={{ animationDelay: "180ms" }}>
          {model.note}
        </p>
      )}

      <div className="mt-4 max-w-2xl spring-in" style={{ animationDelay: "240ms" }}>
        <FlagNotes flags={model.flags} />
      </div>
    </header>
  );
}