"use client";

import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export default function VotarPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const rm = searchParams.get("rm") || "";
  const nome = searchParams.get("nome") || "";
  const cpf = searchParams.get("cpf") || "";
  const [selectedOption, setSelectedOption] = useState<string | null>(null);
  const [audioElement, setAudioElement] = useState<HTMLAudioElement>()

  useEffect(() => {
    if (!rm || !nome || !cpf) {
      router.push("/");
      return;
    }

    const audio = new Audio('/aperta.mp3')
    setAudioElement(audio)
  }, [rm, nome, cpf, router]);

  const handleVote = (option: string) => {
    setSelectedOption(option);

    if (!audioElement) return;
    audioElement.play()

    setTimeout(() => {
      router.push(
        `/obrigado?rm=${rm}&nome=${encodeURIComponent(
          nome
        )}&cpf=${cpf}&option=${option}`
      );
    }, 500);
  };

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa] p-4">
      <div className="w-full max-w-md md:max-w-2xl">
      <div className="mb-6 flex items-center justify-center">
        <div className="flex flex-col items-center">
        <div className="mb-2 text-center text-2xl font-bold text-[#004a93] md:text-3xl">
          JUSTIÇA ELEITORAL ESTUDANTIL
        </div>
        <div className="h-2 w-full bg-gradient-to-r from-[#009c3b] via-[#ffdf00] to-[#002776]"></div>
        </div>
      </div>

      <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden">
        <CardHeader className="bg-[#004a93] text-center text-white">
        <CardTitle className="text-xl md:text-2xl">SEU VOTO PARA</CardTitle>
        <CardDescription className="text-gray-100">
          CHAPA DO GREMIO ESTUDANTIL
        </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6 p-4 md:p-6 rounded-b-lg">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
          <Button
          onClick={() => handleVote("SIE")}
          className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl"
          variant="outline"
          >
          <div className="mb-2 text-3xl md:text-4xl">1</div>
          SIE
          </Button>
          <Button
          onClick={() => handleVote("Liderança Jovem")}
          className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl"
          variant="outline"
          >
          <div className="mb-2 text-3xl md:text-4xl">2</div>
          Liderança Jovem
          </Button>
        </div>
        <div className="mt-4 text-center text-sm text-[#004a93] md:text-base">
          Toque no quadro correspondente para VOTAR
        </div>
        </CardContent>
      </Card>

      <div className="mt-4 flex justify-center">
        <div className="text-center text-sm text-[#004a93] md:text-base">
        © {new Date().getFullYear()} Justiça Eleitoral Estudantil
        </div>
      </div>
      </div>
    </div>
  );
}