"use client";

import * as React from "react";

import { useRouter } from "next/navigation";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

export default function Home() {
    const options = [
        "NH Hannover",
        "Motel One Hannover",
        "Premier Inn Hannover City University",
        "June Six Hotel Hannover City",
    ]
    const correctAnswer = "June Six Hotel Hannover City";
    const nextLink = "https://four.christian.miniquiz.your-apps.dev";

    const [selectedAnswer, setSelectedAnswer] = React.useState<string | null>(null);
    const [showNextLink, setShowNextLink] = React.useState<boolean>(false);

    const router = useRouter();

    const handleAnswerChange = (value: string) => {
        setSelectedAnswer(value);
    };

    const handleSubmit = () => {
        if (!selectedAnswer) {
            alert("Bitte wähle eine Antwort aus!")
            return;
        }
        if (selectedAnswer !== correctAnswer) {
            alert("Falsche Antwort!")
            return;
        }
        alert("Richtige Antwort!")
        setShowNextLink(true);
    };

    const handleNext = () => {
        router.push(nextLink);
    };

    return (
        <div className="flex flex-col items-center justify-center h-screen p-10 gap-4">
            <div className="flex flex-col items-center justify-center max-w-2xl w-full gap-8">
                <h1 className="text-4xl font-bold">18. Geburtstag</h1>
                <p className="text-lg text-zinc-500">Welches Hotel in Hannover hat den Namen wie das Datum was im Sommer und in der Mitte des Jahres liegt?</p>
                <RadioGroup onValueChange={handleAnswerChange} value={selectedAnswer} className="flex flex-col items-start justify-start w-full">
                    {options.map((option) => (
                        <div key={option} className="text-2xl font-bold flex items-center justify-start border border-zinc-300 gap-2 rounded-md p-4 w-full">
                            <RadioGroupItem value={option} />
                            <Label>{option}</Label>
                        </div>
                    ))}
                </RadioGroup>
                <Button onClick={handleSubmit} className="w-full" size="lg" disabled={showNextLink}>Antworten</Button>
                {showNextLink && (
                    <Button onClick={handleNext} className="w-full" size="lg">Nächste Frage</Button>
                )}
            </div>
            <p className="text-sm text-zinc-500">
                <b>WICHTIG!</b> Merke dir die Antwort. Du wirst die Überraschung selber enthüllen.
            </p>
        </div>
    )
}