import { GoogleIntegrationAlert } from '@/admin/components/google-integration-alert';
import type { FileRoutesByFullPath } from '@/admin/routeTree.gen';
import { Link, Outlet, useLocation } from '@tanstack/react-router';
import { __ } from '@wordpress/i18n';
import {
	CalendarCheck,
	CalendarDays,
	CreditCard,
	Mail,
	ScrollText,
	Video,
} from 'lucide-react';

type SettingsPath = Exclude<
	Extract<keyof FileRoutesByFullPath, `/settings/${string}`>,
	'/settings/'
>;

type NavItem = {
	label: string;
	icon: React.ComponentType<{ className?: string }>;
	to: SettingsPath;
};

const NAV_ITEMS: NavItem[] = [
	{
		label: __('Availability', 'allcoach'),
		icon: CalendarDays,
		to: '/settings/availability',
	},
	{
		label: __('Emails', 'allcoach'),
		icon: Mail,
		to: '/settings/email',
	},
	{
		label: __('Payment', 'allcoach'),
		icon: CreditCard,
		to: '/settings/payment',
	},
	{
		label: __('Google Meet / Calendar', 'allcoach'),
		icon: CalendarCheck,
		to: '/settings/google-meet',
	},
	{
		label: __('Logs', 'allcoach'),
		icon: ScrollText,
		to: '/settings/logs',
	},
];

const Settings = () => {
	const pathname = useLocation().pathname;
	return (
		<div className="min-h-screen p-4 md:p-6">
			{pathname === '/settings/availability' && <GoogleIntegrationAlert />}
			<div className="mx-auto max-w-7xl">
				<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-5">
					{/* Sidebar */}
					<div className="rounded-xl bg-white lg:w-[280px] lg:shrink-0 lg:py-5">
						{/* Label – desktop only */}
						<p className="mb-3 hidden px-5 text-[11px] font-semibold tracking-widest text-gray-400 uppercase lg:block">
							{__('Global Settings', 'allcoach')}
						</p>

						{/* Nav – horizontal scroll on mobile, vertical on desktop */}
						<nav className="flex gap-1 overflow-x-auto px-3 py-3 lg:flex-col lg:gap-1.5 lg:py-0">
							{NAV_ITEMS.map(({ label, icon: Icon, to }) => {
								return (
									<Link
										key={to}
										to={to}
										type="button"
										className={`group flex shrink-0 cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 data-[status=active]:bg-teal-50 data-[status=active]:text-teal-700 lg:w-full lg:text-start`}
									>
										<Icon
											className={`size-4 shrink-0 text-gray-400 group-data-[status=active]:text-teal-600`}
										/>
										<span className="whitespace-nowrap">{label}</span>
									</Link>
								);
							})}

							{/* Zoom – future */}
							<div className="flex shrink-0 cursor-not-allowed items-center gap-2 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-300 select-none lg:w-full">
								<Video className="size-4 shrink-0 text-gray-300" />
								<span className="whitespace-nowrap">Zoom</span>
								<span className="ms-1 rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] leading-none font-semibold tracking-wider text-gray-300 uppercase lg:ms-auto">
									Coming soon
								</span>
							</div>
						</nav>
					</div>

					{/* Content panel */}
					<div className="min-w-0 flex-1 overflow-hidden rounded-xl bg-white">
						<Outlet />
					</div>
				</div>
			</div>
		</div>
	);
};

export default Settings;