var-monorepo/apps/hub/app/(app)/_components/FirstPath.tsx

"use client";
import { editUser } from "(app)/admin/user/action";
import { Button } from "_components/ui/Button";
import { Plane, Workflow } from "lucide-react";
import { useSession } from "next-auth/react";
import { useRef, useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { getEvents } from "../../../helper/events";
import { EventCard } from "(app)/events/_components/EventCard";

const PathsOptions = ({
	selected,
	setSelected,
}: {
	selected: "disponent" | "pilot" | null;
	setSelected: (value: "disponent" | "pilot") => void;
}) => {
	return (
		<>
			<div className="flex gap-6">
				{/* Disponent Card */}
				<div
					className={`w-80 cursor-pointer rounded-lg border p-6 transition-colors ${
						selected === "disponent" ? "border-info ring-info ring-2" : "border-base-300"
					}`}
					onClick={() => setSelected("disponent")}
					role="button"
					tabIndex={0}
					aria-pressed={selected === "disponent"}
				>
					<h1 className="mb-2 flex items-center justify-center gap-2 text-lg font-semibold">
						Disponent <Workflow />
					</h1>
					<div className="text-base-content/70 text-sm">
						Denkt sich realistische Einsatzszenarien aus, koordiniert deren Ablauf und ist die
						zentrale Schnittstelle zwischen Piloten und bodengebundenen Rettungsmitteln. Er trägt
						die Verantwortung für einen reibungslosen Ablauf und der erfolgreichen Durchführung der
						Einsätze.
						<div className="badge badge-sm badge-secondary mt-3">
							Teilnahme an Einführungsevent nötig
						</div>
					</div>
				</div>
				{/* Pilot Card */}
				<div
					className={`w-80 cursor-pointer rounded-lg border p-6 transition-colors ${
						selected === "pilot" ? "border-info ring-info ring-2" : "border-base-300"
					}`}
					onClick={() => setSelected("pilot")}
					role="button"
					tabIndex={0}
					aria-pressed={selected === "pilot"}
				>
					<h1 className="mb-2 flex items-center justify-center gap-2 text-lg font-semibold">
						Pilot <Plane />
					</h1>
					<div className="text-base-content/70 text-sm">
						Fliegt die vom Disponenten erstellten Einsätze und transportiert die Med-Crew sicher zum
						Einsatzort. Er übernimmt die navigatorische Vorbereitung, achtet auf Wetterentwicklungen
						und sorgt für die Sicherheit seiner Crew im Flug.
					</div>
				</div>
			</div>
		</>
	);
};

const EventSelect = ({ pathSelected }: { pathSelected: "disponent" | "pilot" }) => {
	const { data: events } = useQuery({
		queryKey: ["events", "initial", pathSelected],
		queryFn: () =>
			getEvents({
				type: pathSelected === "pilot" ? "PILOT_STARTER" : "DISPATCH_STARTER",
			}),
	});
	const user = useSession().data?.user;
	if (!user) return null;
	return events?.map((event) => {
		return <EventCard user={user} event={event} key={event.id} />;
	});
};

export const FirstPath = () => {
	const modalRef = useRef<HTMLDialogElement>(null);
	const { data: session } = useSession();
	const [selected, setSelected] = useState<"disponent" | "pilot" | null>(
		session?.user.badges.includes("D1") ? "disponent" : null,
	);
	const [page, setPage] = useState<"path" | "event-select">("path");

	useEffect(() => {
		if (modalRef.current && !modalRef.current.open) {
			modalRef.current.showModal();
		}
	}, []);

	return (
		<dialog ref={modalRef} className="modal">
			<div className="modal-box w-11/12 max-w-5xl">
				<h3 className="mb-10 flex items-center gap-2 text-lg font-bold">
					{session?.user.migratedFromV1
						? "Hallo, hier hat sich einiges geändert!"
						: "Wähle deinen Einstieg!"}
				</h3>
				<h2 className="mb-4 text-center text-2xl font-bold">Willkommen bei Virtual Air Rescue!</h2>
				{session?.user.migratedFromV1 ? (
					<p className="text-base-content/80 mb-8 text-center text-base">
						Dein Account wurde erfolgreich auf das neue System migriert. Herzlich Willkommen im
						neuen HUB! Um die Erfahrung für alle Nutzer zu steigern haben wir uns dazu entschlossen,
						dass alle Nutzer einen Test absolvieren müssen:{" "}
						{session.user.badges.includes("D1") &&
							`Da du vorher schon den D1-Test absolviert hast, kannst du unter Disponent das "Quick-Lane-Event" auswählen. Um Pilot zu werden, kannst du dann später den Piloten-Kurs absolvieren.`}
						{(!session.user.badges.includes("D1") || session.user.badges.includes("P1")) &&
							`Als Pilot musst du den Piloten-Test abschließen.`}
					</p>
				) : (
					<p>
						Wie möchtest du bei uns starten? Du kannst später jederzeit auch den anderen Pfad
						ausprobieren, wenn du möchtest.
					</p>
				)}
				<div className="m-20 flex flex-col items-center justify-center">
					{page === "path" && <PathsOptions selected={selected} setSelected={setSelected} />}
					{page === "event-select" && (
						<div className="flex min-w-[800px] flex-col gap-3">
							<div>
								<p className="text-left text-sm text-gray-400">Wähle dein Einführungs-Event aus:</p>
							</div>
							<EventSelect pathSelected={selected!} />
						</div>
					)}
				</div>
				<div className="modal-action">
					<button className="btn" disabled={page === "path"} onClick={() => setPage("path")}>
						Zurück
					</button>
					<Button
						className="btn btn-info"
						disabled={!selected}
						onClick={async () => {
							if (page === "path") {
								setPage("event-select");
							} else if (session?.user.id) {
								await editUser(session?.user.id, {
									pathSelected: true,
								});
								modalRef.current?.close();
							}
						}}
					>
						{page === "path" ? "Weiter" : "Intro abschließen"}
					</Button>
				</div>
			</div>
		</dialog>
	);
};