"use client";
import { useRef, useEffect, useState } from "react";

export const FirstPath = () => {
	const modalRef = useRef<HTMLDialogElement>(null);
	const [selected, setSelected] = useState<"disponent" | "pilot" | null>(null);

	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="flex items-center gap-2 text-lg font-bold mb-10">Wähle deinen Einstieg!</h3>
				<p className="mb-8 text-base text-base-content/80 text-center">
					Willkommen bei Virtual Air Rescue!
					<br /> Wähle deinen ersten Pfad aus. Du kannst später jederzeit auch den anderen Pfad
					ausprobieren, wenn du möchtest.
				</p>
				<div className="flex flex-col items-center justify-center m-20">
					<div className="flex gap-6">
						{/* Disponent Card */}
						<div
							className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
								selected === "disponent" ? "border-info ring-2 ring-info" : "border-base-300"
							}`}
							onClick={() => setSelected("disponent")}
							role="button"
							tabIndex={0}
							aria-pressed={selected === "disponent"}
						>
							<div className="font-semibold text-lg mb-2">Disponent</div>
							<div className="text-sm text-base-content/70">
								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={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
								selected === "pilot" ? "border-info ring-2 ring-info" : "border-base-300"
							}`}
							onClick={() => setSelected("pilot")}
							role="button"
							tabIndex={0}
							aria-pressed={selected === "pilot"}
						>
							<div className="font-semibold text-lg mb-2">Pilot</div>
							<div className="text-sm text-base-content/70">
								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>
				</div>
				<div className="modal-action">
					<button
						className="btn btn-info"
						disabled={!selected}
						onClick={() => modalRef.current?.close()}
					>
						Auswahl Bestätigen
					</button>
				</div>
			</div>
		</dialog>
	);
};