import { ActionBar } from "./components/action-bar";
import { CombatantRow } from "./components/combatant-row";
import { TurnNavigation } from "./components/turn-navigation";
import { useEncounter } from "./hooks/use-encounter";

export function App() {
	const {
		encounter,
		advanceTurn,
		retreatTurn,
		addCombatant,
		removeCombatant,
		editCombatant,
		setInitiative,
		setHp,
		adjustHp,
		setAc,
		toggleCondition,
		toggleConcentration,
	} = useEncounter();

	return (
		<div className="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 px-4 py-8">
			{/* Header */}
			<header className="space-y-1">
				<h1 className="text-2xl font-bold tracking-tight">
					Initiative Tracker
				</h1>
			</header>

			{/* Turn Navigation */}
			<TurnNavigation
				encounter={encounter}
				onAdvanceTurn={advanceTurn}
				onRetreatTurn={retreatTurn}
			/>

			{/* Combatant List */}
			<div className="flex flex-1 flex-col gap-1">
				{encounter.combatants.length === 0 ? (
					<p className="py-12 text-center text-sm text-muted-foreground">
						No combatants yet — add one to get started
					</p>
				) : (
					encounter.combatants.map((c, i) => (
						<CombatantRow
							key={c.id}
							combatant={c}
							isActive={i === encounter.activeIndex}
							onRename={editCombatant}
							onSetInitiative={setInitiative}
							onRemove={removeCombatant}
							onSetHp={setHp}
							onAdjustHp={adjustHp}
							onSetAc={setAc}
							onToggleCondition={toggleCondition}
							onToggleConcentration={toggleConcentration}
						/>
					))
				)}
			</div>

			{/* Action Bar */}
			<ActionBar onAddCombatant={addCombatant} />
		</div>
	);
}