"use client";
import { useEffect, useState } from "react";
import Link from "next/link";

export default function Home() {
  const [events, setEvents] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  // Load all events
  useEffect(() => {
    fetch('/api/events')
      .then(res => res.json())
      .then(data => {
        setEvents(data.events || []);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error loading events:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
        <div className="text-white text-2xl">Loading events...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden">
      {/* Background Effects */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white/5 to-transparent"></div>
      </div>
      
      <div className="relative z-10 flex flex-col min-h-screen">
        {/* Header */}
        <header className="p-6 text-center">
          <h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
            🎵 Koncert Jegyek
          </h1>
          <p className="text-xl text-white/80">Válassz egy eseményt</p>
        </header>

        {/* Main Content */}
        <main className="flex-1 flex items-center justify-center p-6">
          <div className="w-full max-w-6xl">
            {events.length === 0 ? (
              <div className="text-center text-white/60">
                <div className="text-6xl mb-4">🎪</div>
                <p className="text-xl">Jelenleg nincsenek elérhető események</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {events.map((event) => (
                  <Link key={event.id} href={`/event/${event.id}`}>
                    <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20 hover:bg-white/15 transition-all duration-300 hover:scale-105 cursor-pointer">
                      <div className="text-center">
                        <div className="text-4xl mb-4">🎵</div>
                        <h2 className="text-2xl font-bold text-white mb-4">{event.name}</h2>
                        <p className="text-white/80 mb-6">{event.description}</p>
                        
                        <div className="space-y-3">
                          <div className="flex justify-between items-center bg-white/5 rounded-xl p-3">
                            <span className="text-white/60">Max egyidejű:</span>
                            <span className="text-white font-semibold">{event.max_concurrent_users} fő</span>
                          </div>
                          
                          <div className="flex justify-between items-center bg-white/5 rounded-xl p-3">
                            <span className="text-white/60">Jegytípusok:</span>
                            <span className="text-white font-semibold">{event.ticket_types || 0} db</span>
                          </div>
                        </div>

                        <div className="mt-6 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white py-3 px-6 rounded-2xl font-bold transition-all duration-300">
                          🎫 Jegyvásárlás
                        </div>
                      </div>
                    </div>
                  </Link>
                ))}
              </div>
            )}
          </div>
        </main>

        {/* Footer */}
        <footer className="p-4 text-center text-white/40 text-sm">
          WebSocket + JWT alapú várakozási rendszer • Válassz egy eseményt a jegyvásárláshoz
        </footer>
      </div>
    </div>
  );
}