import React from "react";
import type { ColorSchemePreference } from "../hooks/useColorScheme";

/**
 * Props for the `ColorSchemeToggle` segmented control.
 */
export interface ColorSchemeToggleProps {
	/**
	 * Current color scheme preference selection.
	 */
	value: ColorSchemePreference;
	/**
	 * Change handler invoked when the user selects a new scheme.
	 */
	onChange: (value: ColorSchemePreference) => void;
	/**
	 * Theme used to style the control itself; defaults to `'light'`.
	 */
	scheme?: "light" | "dark";
}

const options: Array<{
	label: string;
	value: ColorSchemePreference;
	description: string;
}> = [
	{ label: "System", value: "system", description: "Follow OS preference" },
	{ label: "Light", value: "light", description: "Always light mode" },
	{ label: "Dark", value: "dark", description: "Always dark mode" },
];

/**
 * A button group that lets users choose between light, dark, or system color modes.
 *
 * @param value - Current scheme selection displayed as active.
 * @param onChange - Callback fired when a new option is selected.
 * @param scheme - Theme used to style the control itself. Defaults to `'light'`.
 * @returns A fully keyboard-accessible toggle rendered as a radio group.
 */
export const ColorSchemeToggle: React.FC<ColorSchemeToggleProps> = ({
	value,
	onChange,
	scheme = "light",
}) => {
	const palette = scheme === "dark" ? darkTheme : lightTheme;

	return (
		<div
			aria-label="Color scheme"
			role="radiogroup"
			style={{ ...containerStyle, ...palette.container }}
		>
			{options.map((option) => {
				const isActive = option.value === value;
				const activeStyles = isActive ? palette.active : undefined;
				return (
					<button
						key={option.value}
						role="radio"
						aria-checked={isActive}
						type="button"
						onClick={() => onChange(option.value)}
						style={{
							...buttonStyle,
							...palette.button,
							...(activeStyles ?? {}),
						}}
						title={option.description}
					>
						{option.label}
					</button>
				);
			})}
		</div>
	);
};

const containerStyle: React.CSSProperties = {
	display: "inline-flex",
	borderRadius: 999,
	padding: 4,
	gap: 4,
	border: "1px solid transparent",
	background: "#f8fafc",
};

const buttonStyle: React.CSSProperties = {
	border: "1px solid transparent",
	borderRadius: 999,
	padding: "4px 12px",
	fontSize: 12,
	fontWeight: 500,
	cursor: "pointer",
	background: "transparent",
	transition:
		"background-color 160ms ease, border-color 160ms ease, color 160ms ease",
};

const lightTheme = {
	container: {
		borderColor: "#e2e8f0",
		background: "rgba(241, 245, 249, 0.8)",
	},
	button: {
		color: "#334155",
	},
	active: {
		background: "#2563eb",
		borderColor: "#2563eb",
		color: "#f8fafc",
	},
} satisfies Record<string, React.CSSProperties>;

const darkTheme = {
	container: {
		borderColor: "#2e3540ff",
		background: "rgba(30, 38, 49, 0.6)",
	},
	button: {
		color: "#e2e8f0",
	},
	active: {
		background: "#38bdf8",
		borderColor: "#38bdf8",
		color: "#020617",
	},
} satisfies Record<string, React.CSSProperties>;

export default ColorSchemeToggle;