import {
	Avatar,
	Card,
	CardBody,
	CardFooter,
	CardHeader,
	Chip
} from "@heroui/react"
import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/_authed/dashboard")({
	component: RouteComponent
})

function RouteComponent() {
	const { user } = Route.useRouteContext()

	return (
		<div className="flex justify-center items-center flex-col gap-2">
			<Card className="max-w-6xl border-none" fullWidth shadow="none">
				<CardHeader className="mb-0 pb-0 justify-between flex-wrap gap-2">
					<Chip variant="light" size="lg">
						Inicio {user?.name ?? "demo"}
					</Chip>
					<div className="rounded-md bg-warning/30 border-2 border-warning/70 px-3 py-1">
						<p> 🏗️ La web está en mantenimiento</p>
					</div>
				</CardHeader>
				<CardBody>
					{/* === GRID PRINCIPAL === */}
					<div className="grid sm:grid-cols-3 grid-rows-[auto_1fr] gap-5 mt-2">
						{/* === Tarjeta 1: Mis drones === */}
						<Card
							shadow="none"
							className="rounded-md max-w-sm bg-default-50"
							isPressable
						>
							<CardHeader className="flex justify-between items-center gap-2">
								<div className="flex flex-col gap-1 justify-start items-start">
									<h2 className="text-start font-semibold text-lg">
										Mis drones
									</h2>
									<p className="text-default-500 text-sm text-start">
										Actualiza tus drones en uso o pilotados.
									</p>
								</div>
								<Avatar
									src="/drone.webp"
									alt="Drone"
									className="rounded-full"
								/>
							</CardHeader>
							<CardFooter>
								<p className="text-default-500 text-sm text-start">Ver más</p>
							</CardFooter>
						</Card>

						{/* === Tarjeta 2: Datos personales === */}
						<Card
							shadow="none"
							className="rounded-md max-w-sm bg-default-50"
							isPressable
						>
							<CardHeader className="flex justify-between items-center  gap-2">
								<div className="flex flex-col gap-1 justify-start items-start">
									<h2 className="text-start font-semibold text-lg">
										Datos personales
									</h2>
									<p className="text-default-500 text-sm text-start">
										Actualiza tu información, ubicación y detalles.
									</p>
								</div>
								<Avatar
									src="/profile.png"
									alt="User"
									className="rounded-full"
								/>
							</CardHeader>
							<CardFooter>
								<p className="text-default-500 text-sm">Ver más</p>
							</CardFooter>
						</Card>
						{/* === Tarjeta 3: Ofertas de vuelo === */}
						<Card
							shadow="none"
							className="rounded-md max-w-sm bg-default-50 row-span-2 self-end h-full"
							isPressable
						>
							<CardHeader className="flex justify-between items-center  gap-2">
								<div className="flex flex-col gap-1 justify-start items-start">
									<h2 className="text-start font-semibold text-lg">
										Certificados
									</h2>
									<p className="text-default-500 text-sm text-start"></p>
								</div>
								<Avatar
									src="/profile.png"
									alt="User"
									className="rounded-full"
								/>
							</CardHeader>
							<CardBody>
								<p className="text-default-500 text-sm">Próximamente...</p>
							</CardBody>
							<CardFooter>
								<p className="text-default-500 text-sm">Ver más</p>
							</CardFooter>
						</Card>

						{/* === Mapa (ocupa 2 columnas) === */}
						<div className="w-full h-[400px] bg-default-100 col-span-2 rounded-md flex justify-center items-center">
							{/* Aquí irá el mapa */}
						</div>
					</div>
				</CardBody>
			</Card>
		</div>
	)
}
