import type { RulesEdition } from "@initiative/domain";
import { Monitor, Moon, Sun } from "lucide-react";
import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
import { useThemeContext } from "../contexts/theme-context.js";
import { Dialog, DialogHeader } from "./ui/dialog.js";
import type { SegmentedOption } from "./ui/segmented-control.js";
import { SegmentedControl } from "./ui/segmented-control.js";

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

const EDITION_OPTIONS: SegmentedOption<RulesEdition>[] = [
	{ value: "5e", label: "5e (2014)" },
	{ value: "5.5e", label: "5.5e (2024)" },
	{ value: "pf2e", label: "Pathfinder 2e" },
];

type ThemePreference = "system" | "light" | "dark";

const THEME_OPTIONS: SegmentedOption<ThemePreference>[] = [
	{
		value: "system",
		label: (
			<>
				<Monitor size={14} />
				System
			</>
		),
	},
	{
		value: "light",
		label: (
			<>
				<Sun size={14} />
				Light
			</>
		),
	},
	{
		value: "dark",
		label: (
			<>
				<Moon size={14} />
				Dark
			</>
		),
	},
];

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

	return (
		<Dialog open={open} onClose={onClose} className="card-glow w-full max-w-sm">
			<DialogHeader title="Settings" onClose={onClose} />

			<div className="flex flex-col gap-5">
				<div>
					<span className="mb-2 block font-medium text-muted-foreground text-sm">
						Game System
					</span>
					<SegmentedControl
						options={EDITION_OPTIONS}
						value={edition}
						onChange={setEdition}
						stretch
						label="Game System"
					/>
				</div>

				<div>
					<span className="mb-2 block font-medium text-muted-foreground text-sm">
						Theme
					</span>
					<SegmentedControl
						options={THEME_OPTIONS}
						value={preference}
						onChange={setPreference}
						stretch
						label="Theme"
					/>
				</div>
			</div>
		</Dialog>
	);
}