Refactor socket handling and integrate database for event management

- Removed old socket handling code and replaced it with a new implementation in `app/api/socketio/route.js`.
- Added MySQL database integration for managing active sessions and queue entries.
- Implemented event retrieval and ticket purchasing APIs in `app/api/events/route.js` and `app/api/purchase/route.js`.
- Created database schema for events, tickets, active sessions, and orders in `database/schema.sql`.
- Updated front-end to handle event data fetching and ticket purchasing with improved UI components.
- Removed unused SVG files from the public directory.

app/page.tsx

@@ -1,6 +1,4 @@
 "use client";
-
-import Image from "next/image";
 import { useEffect, useState, useRef } from "react";
 
 export default function Home() {
@@ -10,8 +8,20 @@ export default function Home() {
   const [activeUsers, setActiveUsers] = useState(0);
   const [hasAccess, setHasAccess] = useState(false);
   const [tokenExpiry, setTokenExpiry] = useState<number | null>(null);
+  const [eventData, setEventData] = useState<any>(null);
+  const [selectedTicket, setSelectedTicket] = useState<string>("Normal");
+  const [quantity, setQuantity] = useState(1);
+  const [purchasing, setPurchasing] = useState(false);
   const socketRef = useRef<any>(null);
 
+  // Load event data
+  useEffect(() => {
+    fetch('/api/events?id=pamkutya')
+      .then(res => res.json())
+      .then(data => setEventData(data))
+      .catch(console.error);
+  }, []);
+
   useEffect(() => {
     let mounted = true;
     
@@ -87,68 +97,216 @@ export default function Home() {
     return () => clearInterval(id);
   }, [tokenExpiry]);
 
-  const tryBuy = () => {
-    if (!hasAccess) return;
-    // Here you'd call your purchase API with the stored token
-    alert("You can proceed to purchase (this is a demo stub).");
+  const tryBuy = async () => {
+    if (!hasAccess || purchasing) return;
+    
+    setPurchasing(true);
+    
+    try {
+      const token = localStorage.getItem("event_token");
+      if (!token) {
+        alert("Nincs érvényes token!");
+        return;
+      }
+
+      const response = await fetch('/api/purchase', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          eventId: 'pamkutya',
+          ticketType: selectedTicket,
+          quantity,
+          token
+        })
+      });
+
+      const result = await response.json();
+      
+      if (response.ok) {
+        alert(`🎉 Sikeres vásárlás!\n\nJegyek: ${quantity}x ${selectedTicket}\nÖsszeg: ${result.totalPrice.toLocaleString()} Ft\nRendelés ID: ${result.orderId}`);
+        // Refresh event data to show updated availability
+        const eventResponse = await fetch('/api/events?id=pamkutya');
+        const eventData = await eventResponse.json();
+        setEventData(eventData);
+      } else {
+        alert(`Hiba: ${result.error}`);
+      }
+    } catch (error) {
+      console.error('Purchase error:', error);
+      alert('Hiba történt a vásárlás során!');
+    } finally {
+      setPurchasing(false);
+    }
   };
 
+  const timeLeft = tokenExpiry ? Math.max(0, tokenExpiry - Date.now()) : 0;
+  const minutesLeft = Math.floor(timeLeft / 60000);
+  const secondsLeft = Math.floor((timeLeft % 60000) / 1000);
+
   return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[24px] row-start-2 items-center sm:items-start w-full max-w-3xl">
-        <h1 className="text-2xl font-bold">Koncert jegyek — Queue rendszer demo</h1>
-
-        <section className="p-4 border rounded w-full">
-          <div className="flex justify-between items-center mb-3">
-            <div>
-              <strong>Event:</strong> pamkutya
-            </div>
-            <div>
-              <span className="text-sm">Socket:</span>{" "}
-              <span className={`font-mono ${connected ? "text-green-600" : "text-red-600"}`}>
-                {connected ? "connected" : "disconnected"}
-              </span>
-            </div>
+    <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">
+          <div className="inline-flex items-center gap-2 text-white/60 text-sm mb-2">
+            <div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400 animate-pulse' : 'bg-red-400'}`}></div>
+            {connected ? 'Kapcsolódva' : 'Nincs kapcsolat'}
           </div>
+          <h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
+            🎵 Pam Kutya
+          </h1>
+          <p className="text-xl text-white/80">Legendás Underground Koncert</p>
+        </header>
 
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            <div className="p-2 bg-gray-50 rounded">
-              <div className="text-xs text-gray-500">Aktív felhasználók</div>
-              <div className="text-lg font-semibold">{activeUsers}</div>
-            </div>
-            <div className="p-2 bg-gray-50 rounded">
-              <div className="text-xs text-gray-500">Helyed a sorban</div>
-              <div className="text-lg font-semibold">{position ?? "—"}</div>
-            </div>
-            <div className="p-2 bg-gray-50 rounded">
-              <div className="text-xs text-gray-500">Becsült várakozás</div>
-              <div className="text-lg font-semibold">{estimatedWait ? `${Math.ceil(estimatedWait)} s` : "—"}</div>
-            </div>
-          </div>
+        {/* Main Content */}
+        <main className="flex-1 flex items-center justify-center p-6">
+          <div className="w-full max-w-2xl">
+            {/* Queue Status Card */}
+            <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20">
+              <div className="text-center mb-8">
+                {position ? (
+                  <>
+                    <div className="text-6xl font-bold text-white mb-4">#{position}</div>
+                    <p className="text-xl text-white/80">Helyed a várakozási sorban</p>
+                    {estimatedWait && (
+                      <p className="text-white/60 mt-2">
+                        Becsült várakozási idő: <span className="font-mono">{Math.ceil(estimatedWait)}s</span>
+                      </p>
+                    )}
+                  </>
+                ) : hasAccess ? (
+                  <>
+                    <div className="text-6xl mb-4">🎫</div>
+                    <p className="text-2xl font-bold text-green-400 mb-2">Hozzáféred engedélyezve!</p>
+                    <p className="text-white/80">Most vásárolhatsz jegyeket</p>
+                  </>
+                ) : (
+                  <>
+                    <div className="text-6xl mb-4">⏳</div>
+                    <p className="text-xl text-white/80">Csatlakozás a sorhoz...</p>
+                  </>
+                )}
+              </div>
 
-          <div className="mt-4 flex gap-3">
-            <button
-              onClick={tryBuy}
-              disabled={!hasAccess}
-              className={`px-4 py-2 rounded font-medium ${hasAccess ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600 cursor-not-allowed"}`}
-            >
-              {hasAccess ? "Vásárlás" : "Nincs hozzáférés — váróban vagy"}
-            </button>
+              {/* Stats Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                <div className="bg-white/5 rounded-2xl p-4 text-center">
+                  <div className="text-2xl font-bold text-white">{activeUsers}</div>
+                  <div className="text-sm text-white/60">Aktív felhasználó</div>
+                </div>
+                <div className="bg-white/5 rounded-2xl p-4 text-center">
+                  <div className="text-2xl font-bold text-white">{position || '—'}</div>
+                  <div className="text-sm text-white/60">Pozíció</div>
+                </div>
+                <div className="bg-white/5 rounded-2xl p-4 text-center">
+                  <div className="text-2xl font-bold text-white">
+                    {estimatedWait ? `${Math.ceil(estimatedWait)}s` : '—'}
+                  </div>
+                  <div className="text-sm text-white/60">Várható idő</div>
+                </div>
+              </div>
 
-            {tokenExpiry && (
-              <div className="text-sm text-gray-500 self-center">
-                Token lejár: {new Date(tokenExpiry).toLocaleTimeString()}
+              {/* Purchase Form */}
+              {hasAccess && (
+                <div className="space-y-4 mb-6">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-white/80 text-sm mb-2">Jegytípus</label>
+                      <select
+                        value={selectedTicket}
+                        onChange={(e) => setSelectedTicket(e.target.value)}
+                        className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
+                      >
+                        {eventData?.tickets?.map((ticket: any) => (
+                          <option key={ticket.type} value={ticket.type} className="bg-gray-800">
+                            {ticket.type} - {ticket.price.toLocaleString()} Ft
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div>
+                      <label className="block text-white/80 text-sm mb-2">Darabszám</label>
+                      <input
+                        type="number"
+                        min="1"
+                        max="10"
+                        value={quantity}
+                        onChange={(e) => setQuantity(parseInt(e.target.value))}
+                        className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Action Button */}
+              <div className="space-y-4">
+                <button
+                  onClick={tryBuy}
+                  disabled={!hasAccess || purchasing}
+                  className={`w-full py-4 px-6 rounded-2xl font-bold text-lg transition-all duration-300 ${
+                    hasAccess && !purchasing
+                      ? 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl transform hover:scale-105' 
+                      : 'bg-white/10 text-white/50 cursor-not-allowed'
+                  }`}
+                >
+                  {purchasing ? '⏳ Vásárlás...' : hasAccess ? '🎫 Jegyvásárlás' : '⏳ Várakozás...'}
+                </button>
+
+                {/* Token Timer */}
+                {hasAccess && tokenExpiry && (
+                  <div className="bg-orange-500/20 border border-orange-400/30 rounded-xl p-4 text-center">
+                    <div className="text-orange-300 font-semibold">
+                      ⏰ Hozzáférés lejár: {minutesLeft}:{secondsLeft.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-orange-200/80 text-sm mt-1">
+                      Használd ki a lehetőséget!
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Ticket Prices */}
+            {eventData?.tickets && (
+              <div className="mt-8 bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10">
+                <h3 className="text-white font-bold text-lg mb-4 text-center">🎟️ Jegytípusok</h3>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  {eventData.tickets.map((ticket: any, index: number) => {
+                    const available = ticket.total_quantity - ticket.sold_quantity;
+                    const colors = ['text-green-400', 'text-yellow-400', 'text-purple-400'];
+                    const borders = ['border-green-400/30', 'border-yellow-400/30', 'border-purple-400/30'];
+                    
+                    return (
+                      <div key={ticket.type} className={`bg-white/5 rounded-xl p-4 text-center ${index === 1 ? borders[index] + ' border' : ''}`}>
+                        <div className="text-white font-bold">{ticket.type}</div>
+                        <div className={`text-2xl font-bold ${colors[index % 3]}`}>
+                          {ticket.price.toLocaleString()} Ft
+                        </div>
+                        <div className="text-white/60 text-sm">
+                          {available > 0 ? `${available} db elérhető` : 'Elfogyott'}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
               </div>
             )}
           </div>
-        </section>
+        </main>
 
-        <p className="text-sm text-gray-600">A rendszer WebSocket + JWT alapú. Ha a rendezvény eléri a küszöböt, a rendszer sorba helyez.</p>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
-        <span className="text-sm">Demo — Queue system</span>
-      </footer>
+        {/* Footer */}
+        <footer className="p-4 text-center text-white/40 text-sm">
+          WebSocket + JWT alapú várakozási rendszer • Demo célokra
+        </footer>
+      </div>
     </div>
   );
 }