---
export const prerender = false;

import Layout from '../../layouts/Layout.astro';
import TicketCheckout from '../../components/TicketCheckout.tsx';
import { supabase } from '../../lib/supabase';

const { slug } = Astro.params;

// Validate slug parameter
if (!slug) {
  return Astro.redirect('/404');
}

// Fetch event data with ticket types
const { data: event, error } = await supabase
  .from('events')
  .select(`
    *,
    availability_display_mode,
    availability_threshold,
    show_sold_out,
    low_stock_threshold,
    availability_messages,
    organizations (
      name,
      logo,
      platform_fee_type,
      platform_fee_percentage,
      platform_fee_fixed
    ),
    ticket_types (
      id,
      name,
      description,
      price,
      quantity_available,
      quantity_sold,
      is_active,
      sale_start_time,
      sale_end_time,
      sort_order
    )
  `)
  .eq('slug', slug)
  .single();

if (error || !event) {
  return Astro.redirect('/404');
}

// Format date for display
const eventDate = new Date(event.start_time);
const formattedDate = eventDate.toLocaleDateString('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
const formattedTime = eventDate.toLocaleTimeString('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  hour12: true
});
---

<Layout title={`${event.title} - Black Canyon Tickets`}>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
    <main class="max-w-5xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
      <div class="bg-white shadow-2xl rounded-2xl overflow-hidden border border-slate-200">
        <!-- Event Image -->
        {event.image_url && (
          <div class="w-full h-48 sm:h-64 md:h-72 lg:h-80 overflow-hidden">
            <img 
              src={event.image_url} 
              alt={event.title}
              class="w-full h-full object-cover"
            />
          </div>
        )}
        
        <div class="px-4 sm:px-6 py-4 sm:py-6">
          <!-- Compact Header -->
          <div class="bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 text-white">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
              <div class="flex items-center">
                {event.organizations.logo && (
                  <img 
                    src={event.organizations.logo} 
                    alt={event.organizations.name}
                    class="h-10 w-10 sm:h-12 sm:w-12 rounded-xl mr-3 sm:mr-4 shadow-lg border-2 border-white/20 flex-shrink-0"
                  />
                )}
                <div class="min-w-0 flex-1">
                  <h1 class="text-xl sm:text-2xl font-light mb-1 tracking-wide truncate">{event.title}</h1>
                  <p class="text-slate-200 text-sm font-medium truncate">Presented by {event.organizations.name}</p>
                </div>
              </div>
              <div class="text-left sm:text-right">
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20">
                  <p class="text-xs text-slate-300 uppercase tracking-wide font-medium">Event Date</p>
                  <p class="text-base sm:text-lg font-semibold text-white">{formattedDate}</p>
                  <p class="text-slate-200 text-sm">{formattedTime}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
            <div>
              <div class="bg-gradient-to-br from-slate-50 to-white rounded-xl p-4 sm:p-5 border border-slate-200 shadow-lg">
                <h2 class="text-base sm:text-lg font-semibold text-slate-900 mb-3 sm:mb-4 flex items-center">
                  <div class="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mr-2"></div>
                  Event Details
                </h2>
                
                <div class="space-y-3">
                  <div class="flex items-start p-3 bg-white rounded-lg border border-slate-200">
                    <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-green-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                      <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                    <div class="min-w-0 flex-1">
                      <p class="font-medium text-slate-900">Venue</p>
                      <p class="text-slate-600 text-sm break-words">{event.venue}</p>
                    </div>
                  </div>

                  <div class="flex items-start p-3 bg-white rounded-lg border border-slate-200">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                      <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </div>
                    <div class="min-w-0 flex-1">
                      <p class="font-medium text-slate-900">Date & Time</p>
                      <p class="text-slate-600 text-sm break-words">{formattedDate} at {formattedTime}</p>
                    </div>
                  </div>
                </div>

                {event.description && (
                  <div class="mt-4 p-3 sm:p-4 bg-white rounded-lg border border-slate-200">
                    <h3 class="text-sm font-semibold text-slate-900 mb-2 flex items-center">
                      <div class="w-1 h-1 bg-gradient-to-r from-amber-400 to-orange-500 rounded-full mr-2"></div>
                      About This Event
                    </h3>
                    <p class="text-slate-600 text-sm whitespace-pre-line leading-relaxed break-words">{event.description}</p>
                  </div>
                )}
              </div>
            </div>

            <div>
              <div class="bg-gradient-to-br from-slate-50 to-white rounded-xl p-4 sm:p-5 border border-slate-200 shadow-lg lg:sticky lg:top-8">
                <h2 class="text-base sm:text-lg font-semibold text-slate-900 mb-3 sm:mb-4 flex items-center">
                  <div class="w-2 h-2 bg-gradient-to-r from-emerald-500 to-green-500 rounded-full mr-2"></div>
                  Get Your Tickets
                </h2>
                <TicketCheckout event={event as any} client:load />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</Layout>

