import { createFileRoute, Link } from "@tanstack/react-router";
import { useCurrency } from "../hooks/useCurrency";
import { useUpdateSetting } from "../hooks/useSettings";
import { useWeightUnit } from "../hooks/useWeightUnit";
import type { Currency, WeightUnit } from "../lib/formatters";

const UNITS: WeightUnit[] = ["g", "oz", "lb", "kg"];
const CURRENCIES: { value: Currency; label: string }[] = [
	{ value: "USD", label: "$" },
	{ value: "EUR", label: "€" },
	{ value: "GBP", label: "£" },
	{ value: "JPY", label: "¥" },
	{ value: "CAD", label: "CA$" },
	{ value: "AUD", label: "A$" },
];

export const Route = createFileRoute("/settings")({
	component: SettingsPage,
});

function SettingsPage() {
	const unit = useWeightUnit();
	const currency = useCurrency();
	const updateSetting = useUpdateSetting();

	return (
		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
			<div className="mb-6">
				<Link
					to="/"
					className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
				>
					&larr; Back
				</Link>
				<h1 className="text-xl font-semibold text-gray-900">Settings</h1>
			</div>

			<div className="bg-white rounded-xl border border-gray-100 p-5 space-y-6">
				<div className="flex items-center justify-between">
					<div>
						<h3 className="text-sm font-medium text-gray-900">Weight Unit</h3>
						<p className="text-xs text-gray-500 mt-0.5">
							Choose the unit used to display weights across the app
						</p>
					</div>
					<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
						{UNITS.map((u) => (
							<button
								key={u}
								type="button"
								onClick={() =>
									updateSetting.mutate({
										key: "weightUnit",
										value: u,
									})
								}
								className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
									unit === u
										? "bg-white text-gray-700 shadow-sm font-medium"
										: "text-gray-400 hover:text-gray-600"
								}`}
							>
								{u}
							</button>
						))}
					</div>
				</div>

				<div className="border-t border-gray-100" />

				<div className="flex items-center justify-between">
					<div>
						<h3 className="text-sm font-medium text-gray-900">Currency</h3>
						<p className="text-xs text-gray-500 mt-0.5">
							Changes the currency symbol displayed. This does not convert
							values.
						</p>
					</div>
					<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
						{CURRENCIES.map((c) => (
							<button
								key={c.value}
								type="button"
								onClick={() =>
									updateSetting.mutate({
										key: "currency",
										value: c.value,
									})
								}
								className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
									currency === c.value
										? "bg-white text-gray-700 shadow-sm font-medium"
										: "text-gray-400 hover:text-gray-600"
								}`}
							>
								{c.label}
							</button>
						))}
					</div>
				</div>
			</div>
		</div>
	);
}