import { Card, type Key, Tabs } from "@heroui/react"
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"

export const Route = createFileRoute("/access")({
	beforeLoad: ({ location }) => {
		if (location.pathname === "/access") {
			redirect({
				to: "/access/login",
				replace: true,
				throw: true
			})
		}
	},
	component: RouteComponent
})

function RouteComponent() {
	const navigate = Route.useNavigate()

	const onSelectTab = (tabId: Key) => {
		navigate({
			to: `/access/${tabId}`,
			viewTransition: true
		})
	}

	return (
		<div className="grid-cols-2 grid min-h-screen">
			<div className=" p-5 bg-default">
				<h1 className="text-4xl font-bold text-end ">
					Find<span className="text-accent">your</span>Pilot
				</h1>
				<div className="flex items-center justify-center  min-h-[90vh]">
					<Card className="w-full max-w-md bg-white/90 backdrop-blur-2xl border-3 border-accent-soft">
						<Card.Header>
							<Tabs className="w-full max-w-md" onSelectionChange={onSelectTab}>
								<Tabs.ListContainer>
									<Tabs.List aria-label="Options">
										<Tabs.Tab id="login" className="text-lg">
											Acceso
											<Tabs.Indicator className="bg-accent" />
										</Tabs.Tab>
										<Tabs.Tab id="register" className="text-lg ">
											<Tabs.Separator />
											Registro
											<Tabs.Indicator className="bg-accent" />
										</Tabs.Tab>
									</Tabs.List>
								</Tabs.ListContainer>
							</Tabs>
						</Card.Header>
						<Card.Content>
							<Outlet />
						</Card.Content>
					</Card>
				</div>
			</div>
			<div className="bg-accent bg-[url('https://cdn.pixabay.com/photo/2023/03/22/22/37/mavic-2-7870679_1280.jpg')] bg-cover"></div>
		</div>
	)
}