---
import MainLayout from '../layouts/MainLayout.astro';
import { getChurchName, fetchEventsJson } from '../lib/bindings.js';

let churchName = 'Church';
let events = [];

try {
  churchName = getChurchName();
  
  // Get upcoming events from V2 API
  const eventsJson = fetchEventsJson();
  console.log('Raw events JSON:', eventsJson);
  const parsedEvents = JSON.parse(eventsJson);
  console.log('Parsed events:', parsedEvents);
  events = Array.isArray(parsedEvents) ? parsedEvents : (parsedEvents.items || []);
  console.log('Final events array:', events.length, 'events');
  
  // Fallback: If no events from binding, try direct API call
  if (events.length === 0) {
    console.log('No events from binding, trying direct API call...');
    try {
      const response = await fetch('https://api.rockvilletollandsda.church/api/events');
      const apiData = await response.json();
      if (apiData.success && apiData.data && apiData.data.items) {
        events = apiData.data.items;
        console.log('Loaded', events.length, 'events from direct API call');
      }
    } catch (apiError) {
      console.error('Direct API call failed:', apiError);
    }
  }
} catch (e) {
  console.error('Failed to load events:', e);
}
---

<MainLayout title={`Events - ${churchName}`} description="Join us for upcoming church events and fellowship">
  
  <!-- Events Hero -->
  <section class="py-16 bg-heavenly-gradient text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h1 class="text-4xl lg:text-6xl font-bold mb-6">Church Events</h1>
      <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8">
        Join us for worship, fellowship, and spiritual growth in our community
      </p>
      <div class="flex justify-center">
        <a href="/events/submit" class="inline-flex items-center space-x-2 bg-gold-500 hover:bg-gold-600 text-black px-8 py-4 rounded-2xl font-semibold transition-colors shadow-lg hover:shadow-xl hover:scale-105 transform duration-300">
          <i data-lucide="plus" class="w-5 h-5"></i>
          <span>Submit Event</span>
        </a>
      </div>
    </div>
  </section>

  <!-- Events Grid -->
  <section class="py-16 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      
      {events.length > 0 ? (
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {events.map(event => (
            <div class="bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl overflow-hidden shadow-medium hover:shadow-large transition-all duration-300 hover:-translate-y-1 group" data-animate>
              {event.image && (
                <div class="aspect-video overflow-hidden">
                  <img src={event.image} alt={event.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
              )}
              <div class="p-6">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{event.title}</h3>
                
                <div class="space-y-2 mb-4">
                  {event.formatted_date && (
                    <div class="flex items-center space-x-2 text-primary-600 dark:text-primary-400">
                      <i data-lucide="calendar" class="w-4 h-4"></i>
                      <span class="text-sm font-medium">{event.formatted_date}</span>
                    </div>
                  )}
                  
                  {event.formatted_time && (
                    <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
                      <i data-lucide="clock" class="w-4 h-4"></i>
                      <span class="text-sm">{event.formatted_time}</span>
                    </div>
                  )}
                  
                  {event.location && (
                    <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
                      <i data-lucide="map-pin" class="w-4 h-4"></i>
                      <span class="text-sm">{event.location}</span>
                    </div>
                  )}
                </div>
                
                {event.description && (
                  <p class="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed text-sm line-clamp-3">{event.description}</p>
                )}
                
                <div class="flex space-x-2">
                  <a href={`/events/${event.id}`} class="flex-1 inline-flex items-center justify-center space-x-2 bg-primary-600 text-white px-4 py-2 rounded-xl font-medium hover:bg-primary-700 transition-colors text-sm">
                    <i data-lucide="info" class="w-4 h-4"></i>
                    <span>Details</span>
                  </a>
                  
                  {event.registration_url && (
                    <a href={event.registration_url} target="_blank" rel="noopener" class="inline-flex items-center justify-center p-2 bg-gold-500 text-black rounded-xl hover:bg-gold-400 transition-colors">
                      <i data-lucide="user-plus" class="w-4 h-4"></i>
                    </a>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div class="text-center py-16">
          <div class="w-24 h-24 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <i data-lucide="calendar" class="w-12 h-12 text-gray-400"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Events Scheduled</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-8">
            Check back soon for upcoming events and gatherings
          </p>
          <a href="/contact" class="inline-flex items-center space-x-2 bg-primary-600 text-white px-8 py-4 rounded-2xl font-semibold hover:bg-primary-700 transition-colors">
            <i data-lucide="mail" class="w-5 h-5"></i>
            <span>Contact Us</span>
          </a>
        </div>
      )}
    </div>
  </section>

  <!-- Call to Action -->
  <section class="py-16 bg-gray-50 dark:bg-gray-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Stay Connected</h2>
      <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
        Don't miss our events and gatherings. Join our church family!
      </p>
      
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/contact" class="inline-flex items-center space-x-2 bg-primary-600 text-white px-8 py-4 rounded-2xl font-semibold hover:bg-primary-700 transition-colors">
          <i data-lucide="mail" class="w-5 h-5"></i>
          <span>Contact Us</span>
        </a>
        <a href="/about" class="inline-flex items-center space-x-2 border-2 border-primary-600 text-primary-600 dark:text-primary-400 px-8 py-4 rounded-2xl font-semibold hover:bg-primary-600 hover:text-white transition-colors">
          <i data-lucide="info" class="w-5 h-5"></i>
          <span>Learn More</span>
        </a>
      </div>
    </div>
  </section>
</MainLayout>

<style>
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>