import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import {
	useApiKeys,
	useAuth,
	useChangePassword,
	useCreateApiKey,
	useDeleteApiKey,
} from "../hooks/useAuth";
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 ChangePasswordSection() {
	const changePassword = useChangePassword();
	const [currentPassword, setCurrentPassword] = useState("");
	const [newPassword, setNewPassword] = useState("");
	const [message, setMessage] = useState<{
		type: "success" | "error";
		text: string;
	} | null>(null);

	async function handleSubmit(e: React.FormEvent) {
		e.preventDefault();
		setMessage(null);
		try {
			await changePassword.mutateAsync({ currentPassword, newPassword });
			setMessage({ type: "success", text: "Password changed" });
			setCurrentPassword("");
			setNewPassword("");
		} catch (err) {
			setMessage({ type: "error", text: (err as Error).message });
		}
	}

	return (
		<form onSubmit={handleSubmit} className="space-y-3">
			<h3 className="text-sm font-medium text-gray-900">Change Password</h3>
			<input
				type="password"
				placeholder="Current password"
				value={currentPassword}
				onChange={(e) => setCurrentPassword(e.target.value)}
				required
				className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
			/>
			<input
				type="password"
				placeholder="New password"
				value={newPassword}
				onChange={(e) => setNewPassword(e.target.value)}
				required
				minLength={6}
				className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
			/>
			{message && (
				<p
					className={`text-sm ${message.type === "success" ? "text-green-600" : "text-red-600"}`}
				>
					{message.text}
				</p>
			)}
			<button
				type="submit"
				disabled={changePassword.isPending}
				className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
			>
				{changePassword.isPending ? "..." : "Change Password"}
			</button>
		</form>
	);
}

function ApiKeySection() {
	const { data: keys } = useApiKeys();
	const createKey = useCreateApiKey();
	const deleteKey = useDeleteApiKey();
	const [name, setName] = useState("");
	const [newKey, setNewKey] = useState<string | null>(null);

	async function handleCreate(e: React.FormEvent) {
		e.preventDefault();
		const result = await createKey.mutateAsync({ name });
		setNewKey(result.key);
		setName("");
	}

	return (
		<div className="space-y-3">
			<h3 className="text-sm font-medium text-gray-900">API Keys</h3>
			<p className="text-xs text-gray-500">
				API keys allow programmatic access to GearBox (e.g., from Claude Desktop
				or scripts).
			</p>

			{newKey && (
				<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
					<p className="text-xs font-medium text-amber-800 mb-1">
						Copy this key now — it won't be shown again:
					</p>
					<code className="text-xs text-amber-900 break-all select-all">
						{newKey}
					</code>
					<button
						type="button"
						onClick={() => setNewKey(null)}
						className="mt-2 block text-xs text-amber-700 hover:text-amber-900"
					>
						Dismiss
					</button>
				</div>
			)}

			<form onSubmit={handleCreate} className="flex gap-2">
				<input
					type="text"
					placeholder="Key name (e.g., claude-desktop)"
					value={name}
					onChange={(e) => setName(e.target.value)}
					required
					className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
				/>
				<button
					type="submit"
					disabled={createKey.isPending}
					className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
				>
					Create
				</button>
			</form>

			{keys && keys.length > 0 && (
				<div className="space-y-2">
					{keys.map((key) => (
						<div
							key={key.id}
							className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg"
						>
							<div>
								<span className="text-sm text-gray-900">{key.name}</span>
								<span className="text-xs text-gray-400 ml-2">
									{key.keyPrefix}...
								</span>
							</div>
							<button
								type="button"
								onClick={() => deleteKey.mutate(key.id)}
								className="text-xs text-red-500 hover:text-red-700"
							>
								Revoke
							</button>
						</div>
					))}
				</div>
			)}
		</div>
	);
}

function SettingsPage() {
	const unit = useWeightUnit();
	const currency = useCurrency();
	const updateSetting = useUpdateSetting();
	const { data: auth } = useAuth();

	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>

			{auth?.user && (
				<div className="bg-white rounded-xl border border-gray-100 p-5 space-y-6 mt-4">
					<ChangePasswordSection />
					<div className="border-t border-gray-100" />
					<ApiKeySection />
				</div>
			)}
		</div>
	);
}