---
export const prerender = false;

import Layout from '../../../layouts/Layout.astro';
import Navigation from '../../../components/Navigation.astro';
import EventHeader from '../../../components/EventHeader.astro';
import QuickStats from '../../../components/QuickStats.astro';
import EventManagement from '../../../components/EventManagement.tsx';
import { verifyAuth } from '../../../lib/auth';

// Server-side authentication check using cookies
const auth = await verifyAuth(Astro.cookies);
if (!auth) {
  return Astro.redirect('/login-new');
}

// Get event ID from URL parameters
const { id } = Astro.params;

if (!id) {
  return Astro.redirect('/dashboard');
}

const eventId = id as string;

// Pass auth info to the client-side component
const authData = {
  user: auth.user,
  organizationId: auth.organizationId,
  isAdmin: auth.isAdmin
};
---

<Layout title="Event Management - Black Canyon Tickets">
  <style>
    .bg-grid-pattern {
      background-image: 
        linear-gradient(var(--grid-pattern) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-pattern) 1px, transparent 1px);
      background-size: 20px 20px;
    }
  </style>
  <div class="min-h-screen" style="background: var(--bg-gradient);">
    <!-- Animated background elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 rounded-full blur-3xl animate-pulse" style="background: var(--bg-orb-1);"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 rounded-full blur-3xl animate-pulse" style="background: var(--bg-orb-2);"></div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full blur-3xl animate-pulse" style="background: var(--bg-orb-3);"></div>
    </div>
    
    <!-- Grid pattern overlay -->
    <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
    
    <Navigation 
      title="Event Management" 
      showBackLink={true} 
      backLinkUrl="/dashboard" 
      backLinkText="← All Events" 
    />

    <main class="relative max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
      <!-- Event Header -->
      <EventHeader eventId={eventId} />

      <!-- Quick Stats -->
      <QuickStats eventId={eventId} />

      <!-- Event Management Tabs -->
      <EventManagement 
        eventId={eventId} 
        authData={authData}
        client:load
      />
      
    </main>
  </div>
</Layout>