initiative/apps/web/src/components/pf2e-stat-block.tsx

import type { Pf2eCreature } from "@initiative/domain";
import { formatInitiativeModifier } from "@initiative/domain";
import {
	PropertyLine,
	SectionDivider,
	TraitSection,
} from "./stat-block-parts.js";

interface Pf2eStatBlockProps {
	creature: Pf2eCreature;
}

const ALIGNMENTS = new Set([
	"lg",
	"ng",
	"cg",
	"ln",
	"n",
	"cn",
	"le",
	"ne",
	"ce",
]);

function capitalize(s: string): string {
	return s.charAt(0).toUpperCase() + s.slice(1);
}

function displayTraits(traits: readonly string[]): string[] {
	return traits.filter((t) => !ALIGNMENTS.has(t)).map(capitalize);
}

function formatMod(mod: number): string {
	return mod >= 0 ? `+${mod}` : `${mod}`;
}

export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
	const abilityEntries = [
		{ label: "Str", mod: creature.abilityMods.str },
		{ label: "Dex", mod: creature.abilityMods.dex },
		{ label: "Con", mod: creature.abilityMods.con },
		{ label: "Int", mod: creature.abilityMods.int },
		{ label: "Wis", mod: creature.abilityMods.wis },
		{ label: "Cha", mod: creature.abilityMods.cha },
	];

	return (
		<div className="space-y-1 text-foreground">
			{/* Header */}
			<div>
				<div className="flex items-baseline justify-between gap-2">
					<h2 className="font-bold text-stat-heading text-xl">
						{creature.name}
					</h2>
					<span className="shrink-0 font-semibold text-sm">
						Level {creature.level}
					</span>
				</div>
				<div className="mt-1 flex flex-wrap gap-1">
					{displayTraits(creature.traits).map((trait) => (
						<span
							key={trait}
							className="rounded border border-border bg-card px-1.5 py-0.5 text-foreground text-xs"
						>
							{trait}
						</span>
					))}
				</div>
				<p className="mt-1 text-muted-foreground text-xs">
					{creature.sourceDisplayName}
				</p>
			</div>

			<SectionDivider />

			{/* Perception, Languages, Skills */}
			<div className="space-y-0.5 text-sm">
				<div>
					<span className="font-semibold">Perception</span>{" "}
					{formatInitiativeModifier(creature.perception)}
					{creature.senses ? `; ${creature.senses}` : ""}
				</div>
				<PropertyLine label="Languages" value={creature.languages} />
				<PropertyLine label="Skills" value={creature.skills} />
			</div>

			{/* Ability Modifiers */}
			<div className="grid grid-cols-6 gap-1 text-center text-sm">
				{abilityEntries.map((a) => (
					<div key={a.label}>
						<div className="font-semibold text-muted-foreground text-xs">
							{a.label}
						</div>
						<div>{formatMod(a.mod)}</div>
					</div>
				))}
			</div>

			<PropertyLine label="Items" value={creature.items} />

			{/* Top abilities (before defenses) */}
			<TraitSection entries={creature.abilitiesTop} />

			<SectionDivider />

			{/* Defenses */}
			<div className="space-y-0.5 text-sm">
				<div>
					<span className="font-semibold">AC</span> {creature.ac}
					{creature.acConditional ? ` (${creature.acConditional})` : ""};{" "}
					<span className="font-semibold">Fort</span>{" "}
					{formatMod(creature.saveFort)},{" "}
					<span className="font-semibold">Ref</span>{" "}
					{formatMod(creature.saveRef)},{" "}
					<span className="font-semibold">Will</span>{" "}
					{formatMod(creature.saveWill)}
				</div>
				<div>
					<span className="font-semibold">HP</span> {creature.hp}
				</div>
				<PropertyLine label="Immunities" value={creature.immunities} />
				<PropertyLine label="Resistances" value={creature.resistances} />
				<PropertyLine label="Weaknesses" value={creature.weaknesses} />
			</div>

			{/* Mid abilities (reactions, auras) */}
			<TraitSection entries={creature.abilitiesMid} />

			<SectionDivider />

			{/* Speed */}
			<div className="text-sm">
				<span className="font-semibold">Speed</span> {creature.speed}
			</div>

			{/* Attacks */}
			<TraitSection entries={creature.attacks} />

			{/* Bottom abilities (active abilities) */}
			<TraitSection entries={creature.abilitiesBot} />
		</div>
	);
}