import type { PlayerCharacter, PlayerCharacterId } from "@initiative/domain";
import { Pencil, Plus, Trash2 } from "lucide-react";
import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
import { Button } from "./ui/button";
import { ConfirmButton } from "./ui/confirm-button";
import { Dialog, DialogHeader } from "./ui/dialog";

interface PlayerManagementProps {
	open: boolean;
	onClose: () => void;
	characters: readonly PlayerCharacter[];
	onEdit: (pc: PlayerCharacter) => void;
	onDelete: (id: PlayerCharacterId) => void;
	onCreate: () => void;
}

export function PlayerManagement({
	open,
	onClose,
	characters,
	onEdit,
	onDelete,
	onCreate,
}: Readonly<PlayerManagementProps>) {
	return (
		<Dialog open={open} onClose={onClose} className="card-glow w-full max-w-md">
			<DialogHeader title="Player Characters" onClose={onClose} />

			{characters.length === 0 ? (
				<div className="flex flex-col items-center gap-3 py-8 text-center">
					<p className="text-muted-foreground">No player characters yet</p>
					<Button onClick={onCreate}>
						<Plus size={16} />
						Create your first player character
					</Button>
				</div>
			) : (
				<div className="flex flex-col gap-1">
					{characters.map((pc) => {
						const Icon = pc.icon ? PLAYER_ICON_MAP[pc.icon] : undefined;
						const color = pc.color ? PLAYER_COLOR_HEX[pc.color] : undefined;
						return (
							<div
								key={pc.id}
								className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-hover-neutral-bg"
							>
								{!!Icon && (
									<Icon size={18} style={{ color }} className="shrink-0" />
								)}
								<span className="flex-1 truncate text-foreground text-sm">
									{pc.name}
								</span>
								<span className="text-muted-foreground text-xs tabular-nums">
									AC {pc.ac}
								</span>
								<span className="text-muted-foreground text-xs tabular-nums">
									HP {pc.maxHp}
								</span>
								{pc.level !== undefined && (
									<span className="text-muted-foreground text-xs tabular-nums">
										Lv {pc.level}
									</span>
								)}
								<Button
									variant="ghost"
									size="icon-sm"
									onClick={() => onEdit(pc)}
									className="text-muted-foreground"
									title="Edit"
								>
									<Pencil size={14} />
								</Button>
								<ConfirmButton
									icon={<Trash2 size={14} />}
									label="Delete player character"
									onConfirm={() => onDelete(pc.id)}
									size="icon-sm"
									className="text-muted-foreground"
								/>
							</div>
						);
					})}
					<div className="mt-2 flex justify-end">
						<Button onClick={onCreate} variant="ghost">
							<Plus size={16} />
							Add
						</Button>
					</div>
				</div>
			)}
		</Dialog>
	);
}