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/api/events/route.js

@@ -0,0 +1,59 @@
+import mysql from 'mysql2/promise'
+
+async function getDbConnection() {
+  if (!process.env.MYSQL_HOST) return null
+  return await mysql.createConnection({
+    host: process.env.MYSQL_HOST,
+    user: process.env.MYSQL_USER,
+    password: process.env.MYSQL_PASSWORD,
+    database: process.env.MYSQL_DATABASE,
+  })
+}
+
+export async function GET(request) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const eventId = searchParams.get('id')
+    
+    const connection = await getDbConnection()
+    if (!connection) {
+      return Response.json({ error: 'Database not configured' }, { status: 500 })
+    }
+
+    if (eventId) {
+      // Get specific event with tickets
+      const [eventRows] = await connection.execute(
+        'SELECT * FROM events WHERE id = ?',
+        [eventId]
+      )
+      
+      const [ticketRows] = await connection.execute(
+        'SELECT * FROM tickets WHERE event_id = ? ORDER BY price ASC',
+        [eventId]
+      )
+
+      if (eventRows.length === 0) {
+        return Response.json({ error: 'Event not found' }, { status: 404 })
+      }
+
+      await connection.end()
+
+      return Response.json({
+        event: eventRows[0],
+        tickets: ticketRows
+      })
+    } else {
+      // Get all events
+      const [eventRows] = await connection.execute(
+        'SELECT e.*, COUNT(t.id) as ticket_types FROM events e LEFT JOIN tickets t ON e.id = t.event_id GROUP BY e.id ORDER BY e.created_at DESC'
+      )
+
+      await connection.end()
+
+      return Response.json({ events: eventRows })
+    }
+  } catch (error) {
+    console.error('Events API error:', error)
+    return Response.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}

app/api/purchase/route.js

@@ -0,0 +1,106 @@
+import mysql from 'mysql2/promise'
+import jwt from 'jsonwebtoken'
+
+async function getDbConnection() {
+  if (!process.env.MYSQL_HOST) return null
+  return await mysql.createConnection({
+    host: process.env.MYSQL_HOST,
+    user: process.env.MYSQL_USER,
+    password: process.env.MYSQL_PASSWORD,
+    database: process.env.MYSQL_DATABASE,
+  })
+}
+
+export async function POST(request) {
+  try {
+    const { eventId, ticketType, quantity, token } = await request.json()
+    
+    if (!eventId || !ticketType || !quantity || !token) {
+      return Response.json({ error: 'Missing required fields' }, { status: 400 })
+    }
+
+    // Verify JWT token
+    let decoded
+    try {
+      decoded = jwt.verify(token, process.env.JWT_SECRET || 'dev-secret')
+    } catch (error) {
+      return Response.json({ error: 'Invalid or expired token' }, { status: 401 })
+    }
+
+    const connection = await getDbConnection()
+    if (!connection) {
+      return Response.json({ error: 'Database not configured' }, { status: 500 })
+    }
+
+    // Check if token is still active in database
+    const [activeRows] = await connection.execute(
+      'SELECT * FROM active_sessions WHERE event_id = ? AND socket_id = ? AND expires_at > NOW()',
+      [eventId, decoded.sid]
+    )
+
+    if (activeRows.length === 0) {
+      await connection.end()
+      return Response.json({ error: 'Session expired or not authorized' }, { status: 401 })
+    }
+
+    // Get ticket information
+    const [ticketRows] = await connection.execute(
+      'SELECT * FROM tickets WHERE event_id = ? AND type = ?',
+      [eventId, ticketType]
+    )
+
+    if (ticketRows.length === 0) {
+      await connection.end()
+      return Response.json({ error: 'Ticket type not found' }, { status: 404 })
+    }
+
+    const ticket = ticketRows[0]
+    const availableQuantity = ticket.total_quantity - ticket.sold_quantity
+
+    if (quantity > availableQuantity) {
+      await connection.end()
+      return Response.json({ 
+        error: 'Not enough tickets available', 
+        available: availableQuantity 
+      }, { status: 400 })
+    }
+
+    const totalPrice = ticket.price * quantity
+
+    // Start transaction
+    await connection.beginTransaction()
+
+    try {
+      // Create order
+      const [orderResult] = await connection.execute(
+        'INSERT INTO orders (event_id, socket_id, ticket_type, quantity, total_price, status) VALUES (?, ?, ?, ?, ?, ?)',
+        [eventId, decoded.sid, ticketType, quantity, totalPrice, 'completed']
+      )
+
+      // Update sold quantity
+      await connection.execute(
+        'UPDATE tickets SET sold_quantity = sold_quantity + ? WHERE event_id = ? AND type = ?',
+        [quantity, eventId, ticketType]
+      )
+
+      await connection.commit()
+      await connection.end()
+
+      return Response.json({
+        success: true,
+        orderId: orderResult.insertId,
+        totalPrice,
+        message: `Successfully purchased ${quantity} ${ticketType} ticket(s)`
+      })
+
+    } catch (error) {
+      await connection.rollback()
+      await connection.end()
+      throw error
+    }
+
+  } catch (error) {
+    console.error('Purchase API error:', error)
+    return Response.json({ error: 'Purchase failed' }, { status: 500 })
+  }
+}

app/api/socket/route.js

@@ -1,157 +0,0 @@
-import { Server } from "socket.io";
-import jwt from "jsonwebtoken";
-import mysql from "mysql2/promise";
-import { NextRequest, NextResponse } from "next/server";
-
-// Simple in-memory structures keyed by eventId
-const events = {};
-
-const QUEUE_THRESHOLD = parseInt(process.env.QUEUE_THRESHOLD || "100", 10);
-const CONCURRENT_ACTIVE = parseInt(process.env.CONCURRENT_ACTIVE || "50", 10);
-const TOKEN_TTL_SECONDS = parseInt(process.env.TOKEN_TTL_SECONDS || `${15 * 60}`, 10);
-
-function ensureEvent(eventId) {
-  if (!events[eventId]) {
-    events[eventId] = {
-      sockets: new Set(), // connected socket ids
-      queue: [], // array of socket ids in order
-      active: new Set(), // sockets that currently hold a token (allowed to buy)
-      queueOn: false,
-    };
-  }
-  return events[eventId];
-}
-
-async function createDbPool() {
-  if (!process.env.MYSQL_HOST) return null;
-  return mysql.createPool({
-    host: process.env.MYSQL_HOST,
-    user: process.env.MYSQL_USER,
-    password: process.env.MYSQL_PASSWORD,
-    database: process.env.MYSQL_DATABASE,
-    waitForConnections: true,
-    connectionLimit: 5,
-  });
-}
-
-function buildUpdate(ev) {
-  const positionMap = {};
-  ev.queue.forEach((sid, idx) => (positionMap[sid] = idx + 1));
-  return {
-    activeCount: ev.sockets.size,
-    queueOn: ev.queueOn,
-    estimatedWait: ev.queue.length * 5, // naive: 5s per person
-    positions: positionMap,
-  };
-}
-
-function broadcastUpdate(eventId, io) {
-  const ev = events[eventId];
-  if (!ev) return;
-  // notify all connected sockets in room
-  for (const sid of ev.sockets) {
-    const pos = ev.queue.indexOf(sid);
-    io.to(sid).emit("queue_update", {
-      activeCount: ev.sockets.size,
-      position: pos === -1 ? null : pos + 1,
-      estimatedWait: pos === -1 ? null : ev.queue.length * 5,
-    });
-  }
-}
-
-function evaluateQueue(eventId, io) {
-  const ev = events[eventId];
-  if (!ev) return;
-
-  // ensure active set size <= CONCURRENT_ACTIVE
-  while (ev.active.size < CONCURRENT_ACTIVE && ev.queue.length > 0) {
-    const next = ev.queue.shift();
-    if (!next) break;
-    // sign token
-    const token = jwt.sign({ sid: next, eventId }, process.env.JWT_SECRET || "dev-secret", {
-      expiresIn: TOKEN_TTL_SECONDS,
-    });
-    ev.active.add(next);
-    io.to(next).emit("granted", { token, expiresAt: new Date(Date.now() + TOKEN_TTL_SECONDS * 1000).toISOString() });
-  }
-
-  // If too many active (rare), revoke oldest
-  if (ev.active.size > CONCURRENT_ACTIVE) {
-    const toRevoke = Array.from(ev.active).slice(CONCURRENT_ACTIVE);
-    toRevoke.forEach((sid) => {
-      ev.active.delete(sid);
-      io.to(sid).emit("revoked");
-    });
-  }
-
-  // If queue no longer needed, clear it
-  if (ev.sockets.size < QUEUE_THRESHOLD) ev.queueOn = false;
-
-  // broadcast
-  broadcastUpdate(eventId, io);
-}
-
-export async function GET(req) {
-  const res = NextResponse.next();
-  
-  if (global.io) {
-    console.log("Socket is already running");
-  } else {
-    console.log("Socket is initializing");
-    const httpServer = req.socket?.server;
-    
-    if (httpServer) {
-      const io = new Server(httpServer, {
-        path: "/api/socket",
-        cors: { origin: true },
-      });
-      
-      global.io = io;
-
-      const db = await createDbPool();
-
-      io.on("connection", (socket) => {
-        console.log("connect", socket.id);
-
-        socket.on("join_event", async ({ eventId }) => {
-          if (!eventId) return;
-          const ev = ensureEvent(eventId);
-          ev.sockets.add(socket.id);
-          socket.join(eventId);
-
-          // compute counts
-          const activeCount = ev.sockets.size;
-          // turn on queue if threshold reached
-          if (activeCount >= QUEUE_THRESHOLD) ev.queueOn = true;
-
-          // if queueOn and socket not active, add to queue
-          if (ev.queueOn && !ev.active.has(socket.id)) {
-            if (!ev.queue.includes(socket.id)) ev.queue.push(socket.id);
-          }
-
-          // evaluate granting
-          evaluateQueue(eventId, io);
-
-          // send initial update
-          io.to(socket.id).emit("queue_update", buildUpdate(ev));
-        });
-
-        socket.on("disconnect", () => {
-          // remove from every event
-          for (const [eventId, ev] of Object.entries(events)) {
-            if (ev.sockets.has(socket.id)) ev.sockets.delete(socket.id);
-            const qi = ev.queue.indexOf(socket.id);
-            if (qi !== -1) ev.queue.splice(qi, 1);
-            if (ev.active.has(socket.id)) ev.active.delete(socket.id);
-            // re-evaluate to grant next in line
-            evaluateQueue(eventId, io);
-            // notify remaining sockets
-            broadcastUpdate(eventId, io);
-          }
-        });
-      });
-    }
-  }
-  
-  return new Response("Socket.IO server initialized", { status: 200 });
-}

app/api/socketio/route.js

@@ -1,13 +1,29 @@
 import { Server } from 'socket.io'
 import jwt from 'jsonwebtoken'
+import mysql from 'mysql2/promise'
 
-// Simple in-memory structures keyed by eventId
+// Simple in-memory structures keyed by eventId (for fast access)
 const events = {}
 
 const QUEUE_THRESHOLD = parseInt(process.env.QUEUE_THRESHOLD || "100", 10)
 const CONCURRENT_ACTIVE = parseInt(process.env.CONCURRENT_ACTIVE || "50", 10)
 const TOKEN_TTL_SECONDS = parseInt(process.env.TOKEN_TTL_SECONDS || `${15 * 60}`, 10)
 
+// MySQL kapcsolat
+let db = null
+
+async function getDbConnection() {
+  if (!db && process.env.MYSQL_HOST) {
+    db = await mysql.createConnection({
+      host: process.env.MYSQL_HOST,
+      user: process.env.MYSQL_USER,
+      password: process.env.MYSQL_PASSWORD,
+      database: process.env.MYSQL_DATABASE,
+    })
+  }
+  return db
+}
+
 function ensureEvent(eventId) {
   if (!events[eventId]) {
     events[eventId] = {
@@ -34,29 +50,59 @@ function broadcastUpdate(eventId, io) {
   }
 }
 
-function evaluateQueue(eventId, io) {
+async function evaluateQueue(eventId, io) {
   const ev = events[eventId]
   if (!ev) return
 
+  const connection = await getDbConnection()
+
   // ensure active set size <= CONCURRENT_ACTIVE
   while (ev.active.size < CONCURRENT_ACTIVE && ev.queue.length > 0) {
     const next = ev.queue.shift()
     if (!next) break
+    
     // sign token
+    const expiresAt = new Date(Date.now() + TOKEN_TTL_SECONDS * 1000)
     const token = jwt.sign({ sid: next, eventId }, process.env.JWT_SECRET || "dev-secret", {
       expiresIn: TOKEN_TTL_SECONDS,
     })
+    
     ev.active.add(next)
-    io.to(next).emit("granted", { token, expiresAt: new Date(Date.now() + TOKEN_TTL_SECONDS * 1000).toISOString() })
+    
+    // Save to database
+    if (connection) {
+      try {
+        await connection.execute(
+          'INSERT INTO active_sessions (event_id, socket_id, jwt_token, expires_at) VALUES (?, ?, ?, ?) ON DUPLICATE KEY UPDATE jwt_token = VALUES(jwt_token), expires_at = VALUES(expires_at)',
+          [eventId, next, token, expiresAt]
+        )
+      } catch (error) {
+        console.error('DB error saving active session:', error)
+      }
+    }
+    
+    io.to(next).emit("granted", { token, expiresAt: expiresAt.toISOString() })
   }
 
   // If too many active (rare), revoke oldest
   if (ev.active.size > CONCURRENT_ACTIVE) {
     const toRevoke = Array.from(ev.active).slice(CONCURRENT_ACTIVE)
-    toRevoke.forEach((sid) => {
+    for (const sid of toRevoke) {
       ev.active.delete(sid)
       io.to(sid).emit("revoked")
-    })
+      
+      // Remove from database
+      if (connection) {
+        try {
+          await connection.execute(
+            'DELETE FROM active_sessions WHERE event_id = ? AND socket_id = ?',
+            [eventId, sid]
+          )
+        } catch (error) {
+          console.error('DB error removing active session:', error)
+        }
+      }
+    }
   }
 
   // If queue no longer needed, clear it
@@ -98,18 +144,50 @@ export async function GET(req) {
         ev.sockets.add(socket.id)
         socket.join(eventId)
 
+        const connection = await getDbConnection()
+
+        // Get event threshold from database
+        let eventThreshold = QUEUE_THRESHOLD
+        if (connection) {
+          try {
+            const [rows] = await connection.execute(
+              'SELECT max_concurrent_users FROM events WHERE id = ?',
+              [eventId]
+            )
+            if (rows.length > 0) {
+              eventThreshold = rows[0].max_concurrent_users
+            }
+          } catch (error) {
+            console.error('DB error getting event:', error)
+          }
+        }
+
         // compute counts
         const activeCount = ev.sockets.size
         // turn on queue if threshold reached
-        if (activeCount >= QUEUE_THRESHOLD) ev.queueOn = true
+        if (activeCount >= eventThreshold) ev.queueOn = true
 
         // if queueOn and socket not active, add to queue
         if (ev.queueOn && !ev.active.has(socket.id)) {
-          if (!ev.queue.includes(socket.id)) ev.queue.push(socket.id)
+          if (!ev.queue.includes(socket.id)) {
+            ev.queue.push(socket.id)
+            
+            // Save queue position to database
+            if (connection) {
+              try {
+                await connection.execute(
+                  'INSERT INTO queue_entries (event_id, socket_id, position) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE position = VALUES(position)',
+                  [eventId, socket.id, ev.queue.length]
+                )
+              } catch (error) {
+                console.error('DB error saving queue entry:', error)
+              }
+            }
+          }
         }
 
         // evaluate granting
-        evaluateQueue(eventId, io)
+        await evaluateQueue(eventId, io)
 
         // send initial update
         const pos = ev.queue.indexOf(socket.id)

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>
   );
 }