initiative/apps/web/src/components/settings-modal.tsx

import type { RulesEdition } from "@initiative/domain";
import { Monitor, Moon, Sun, X } from "lucide-react";
import { useEffect, useRef } from "react";
import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
import { useThemeContext } from "../contexts/theme-context.js";
import { cn } from "../lib/utils.js";
import { Button } from "./ui/button.js";

interface SettingsModalProps {
	open: boolean;
	onClose: () => void;
}

const EDITION_OPTIONS: { value: RulesEdition; label: string }[] = [
	{ value: "5e", label: "5e (2014)" },
	{ value: "5.5e", label: "5.5e (2024)" },
];

const THEME_OPTIONS: {
	value: "system" | "light" | "dark";
	label: string;
	icon: typeof Sun;
}[] = [
	{ value: "system", label: "System", icon: Monitor },
	{ value: "light", label: "Light", icon: Sun },
	{ value: "dark", label: "Dark", icon: Moon },
];

export function SettingsModal({ open, onClose }: Readonly<SettingsModalProps>) {
	const dialogRef = useRef<HTMLDialogElement>(null);
	const { edition, setEdition } = useRulesEditionContext();
	const { preference, setPreference } = useThemeContext();

	useEffect(() => {
		const dialog = dialogRef.current;
		if (!dialog) return;
		if (open && !dialog.open) dialog.showModal();
		else if (!open && dialog.open) dialog.close();
	}, [open]);

	useEffect(() => {
		const dialog = dialogRef.current;
		if (!dialog) return;
		function handleCancel(e: Event) {
			e.preventDefault();
			onClose();
		}
		function handleBackdropClick(e: MouseEvent) {
			if (e.target === dialog) onClose();
		}
		dialog.addEventListener("cancel", handleCancel);
		dialog.addEventListener("mousedown", handleBackdropClick);
		return () => {
			dialog.removeEventListener("cancel", handleCancel);
			dialog.removeEventListener("mousedown", handleBackdropClick);
		};
	}, [onClose]);

	return (
		<dialog
			ref={dialogRef}
			className="card-glow m-auto w-full max-w-sm rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
		>
			<div className="mb-4 flex items-center justify-between">
				<h2 className="font-semibold text-foreground text-lg">Settings</h2>
				<Button
					variant="ghost"
					size="icon"
					onClick={onClose}
					className="text-muted-foreground"
				>
					<X size={20} />
				</Button>
			</div>

			<div className="flex flex-col gap-5">
				<div>
					<span className="mb-2 block font-medium text-muted-foreground text-sm">
						Conditions
					</span>
					<div className="flex gap-1">
						{EDITION_OPTIONS.map((opt) => (
							<button
								key={opt.value}
								type="button"
								className={cn(
									"flex-1 rounded-md px-3 py-1.5 text-sm transition-colors",
									edition === opt.value
										? "bg-accent text-primary-foreground"
										: "bg-card text-muted-foreground hover:bg-hover-neutral-bg hover:text-foreground",
								)}
								onClick={() => setEdition(opt.value)}
							>
								{opt.label}
							</button>
						))}
					</div>
				</div>

				<div>
					<span className="mb-2 block font-medium text-muted-foreground text-sm">
						Theme
					</span>
					<div className="flex gap-1">
						{THEME_OPTIONS.map((opt) => {
							const Icon = opt.icon;
							return (
								<button
									key={opt.value}
									type="button"
									className={cn(
										"flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-colors",
										preference === opt.value
											? "bg-accent text-primary-foreground"
											: "bg-card text-muted-foreground hover:bg-hover-neutral-bg hover:text-foreground",
									)}
									onClick={() => setPreference(opt.value)}
								>
									<Icon size={14} />
									{opt.label}
								</button>
							);
						})}
					</div>
				</div>
			</div>
		</dialog>
	);
}