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

let churchName = 'Church';
let currentBulletin = null;
let bulletins = [];

try {
  churchName = getChurchName();
  
  // Get all bulletins first
  const bulletinsJson = fetchBulletinsJson();
  bulletins = JSON.parse(bulletinsJson);
  
  // Find the most appropriate current bulletin
  // Either today's bulletin or the next upcoming one
  const today = new Date();
  const todayString = today.toISOString().split('T')[0]; // YYYY-MM-DD format
  
  // Sort bulletins by date (newest first)
  const sortedBulletins = bulletins.sort((a, b) => new Date(b.date) - new Date(a.date));
  
  // Find current bulletin: either today's or the next upcoming one
  currentBulletin = sortedBulletins.find(bulletin => bulletin.date >= todayString);
  
  // If no upcoming bulletin found, use the most recent one
  if (!currentBulletin && sortedBulletins.length > 0) {
    currentBulletin = sortedBulletins[0];
  }
  
  // Try the API's current bulletin as fallback
  if (!currentBulletin) {
    const currentBulletinJson = fetchCurrentBulletinJson();
    currentBulletin = JSON.parse(currentBulletinJson);
  }
  
  console.log('📰 Successfully loaded bulletin data:', {
    currentBulletin: currentBulletin ? `${currentBulletin.title} (${currentBulletin.date})` : 'none',
    bulletinCount: bulletins.length,
    todayDate: todayString
  });
} catch (e) {
  console.error('Failed to load bulletin data:', e);
}

// Format date from bulletin data
const formatBulletinDate = (dateString) => {
  if (!dateString) return new Date().toLocaleDateString('en-US', { 
    weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' 
  });
  
  const date = new Date(dateString + 'T00:00:00');
  return date.toLocaleDateString('en-US', { 
    weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' 
  });
};

const displayDate = currentBulletin ? formatBulletinDate(currentBulletin.date) : formatBulletinDate(null);
const bulletinTitle = currentBulletin?.title || 'Weekly Bulletin';

// Parse service information
const parseSabbathSchool = (text) => {
  if (!text) return null;
  const lines = text.split('\n').filter(line => line.trim());
  const result = {};
  let currentKey = '';
  
  lines.forEach(line => {
    if (line.includes(':')) {
      currentKey = line.replace(':', '').trim();
      result[currentKey] = '';
    } else if (currentKey && line.trim()) {
      result[currentKey] = line.trim();
    }
  });
  
  return result;
};

const parseDivineWorship = (text) => {
  if (!text) return null;
  const lines = text.split('\n').filter(line => line.trim());
  const result = {};
  let currentKey = '';
  
  lines.forEach(line => {
    if (line.includes(':')) {
      currentKey = line.replace(':', '').trim();
      result[currentKey] = '';
    } else if (currentKey && line.trim()) {
      if (result[currentKey]) {
        result[currentKey] += '\n' + line.trim();
      } else {
        result[currentKey] = line.trim();
      }
    }
  });
  
  return result;
};

const sabbathSchoolInfo = currentBulletin ? parseSabbathSchool(currentBulletin.sabbath_school) : null;
const divineWorshipInfo = currentBulletin ? parseDivineWorship(currentBulletin.divine_worship) : null;
---

<MainLayout title={`Bulletin - ${churchName}`} description="Weekly church bulletin with service information, announcements, and upcoming events">
  
  <!-- Bulletin 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">
      <div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
        <i data-lucide="newspaper" class="w-8 h-8 text-white"></i>
      </div>
      <h1 class="text-4xl lg:text-6xl font-bold mb-6">{bulletinTitle}</h1>
      <p class="text-xl text-blue-100 max-w-2xl mx-auto">
        Stay informed with our weekly church bulletin featuring service details, announcements, and community updates
      </p>
      <div class="mt-4 flex flex-col sm:flex-row items-center justify-center gap-4">
        <span class="inline-block bg-white/20 px-4 py-2 rounded-xl text-blue-100 font-medium">
          {displayDate}
        </span>
        {currentBulletin?.pdf_path && (
          <a href={currentBulletin.pdf_path} target="_blank" rel="noopener" class="inline-flex items-center space-x-2 bg-white/20 hover:bg-white/30 px-4 py-2 rounded-xl text-blue-100 font-medium transition-colors">
            <i data-lucide="download" class="w-4 h-4"></i>
            <span>Download PDF</span>
          </a>
        )}
      </div>
    </div>
  </section>

  <!-- Service Information -->
  <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">
      <div class="grid lg:grid-cols-2 gap-12">
        
        <!-- Sabbath Services -->
        <div class="bg-gradient-to-br from-primary-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8">
          <div class="flex items-center space-x-3 mb-6">
            <div class="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center">
              <i data-lucide="sun" class="w-6 h-6 text-white"></i>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Sabbath Services</h2>
          </div>
          
          <div class="space-y-6">
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Sabbath School</h3>
              <div class="space-y-3">
                <div class="flex items-center space-x-3">
                  <i data-lucide="clock" class="w-5 h-5 text-primary-500"></i>
                  <span class="text-gray-600 dark:text-gray-300">9:30 AM - 10:45 AM</span>
                </div>
                {sabbathSchoolInfo && Object.entries(sabbathSchoolInfo).map(([key, value]) => (
                  <div class="flex items-start space-x-3">
                    <i data-lucide="user" class="w-5 h-5 text-primary-500 mt-0.5 flex-shrink-0"></i>
                    <div>
                      <span class="text-sm font-medium text-gray-900 dark:text-white">{key}:</span>
                      <span class="text-gray-600 dark:text-gray-300 ml-2">{value}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Divine Service</h3>
              <div class="space-y-3">
                <div class="flex items-center space-x-3">
                  <i data-lucide="clock" class="w-5 h-5 text-primary-500"></i>
                  <span class="text-gray-600 dark:text-gray-300">11:00 AM - 12:15 PM</span>
                </div>
                {divineWorshipInfo && Object.entries(divineWorshipInfo).map(([key, value]) => (
                  <div class="flex items-start space-x-3">
                    <i data-lucide="mic" class="w-5 h-5 text-primary-500 mt-0.5 flex-shrink-0"></i>
                    <div>
                      <span class="text-sm font-medium text-gray-900 dark:text-white">{key}:</span>
                      <div class="text-gray-600 dark:text-gray-300 ml-2 whitespace-pre-line">{value}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <!-- This Week's Focus -->
        <div class="bg-gradient-to-br from-gold-50 to-orange-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8">
          <div class="flex items-center space-x-3 mb-6">
            <div class="w-12 h-12 bg-gold-500 rounded-xl flex items-center justify-center">
              <i data-lucide="star" class="w-6 h-6 text-black"></i>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">This Week's Focus</h2>
          </div>
          
          <div class="space-y-6">
            {currentBulletin?.scripture_reading && (
              <div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Scripture Reading</h3>
                <div class="text-gray-600 dark:text-gray-300 whitespace-pre-line">
                  {currentBulletin.scripture_reading}
                </div>
              </div>
            )}
            
            {divineWorshipInfo?.Sermon && (
              <div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Sermon</h3>
                <div class="text-gray-600 dark:text-gray-300 whitespace-pre-line">
                  {divineWorshipInfo.Sermon}
                </div>
              </div>
            )}
            
            {currentBulletin?.sunset && (
              <div class="bg-white dark:bg-gray-800 rounded-2xl p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Sunset Times</h3>
                <div class="text-gray-600 dark:text-gray-300 whitespace-pre-line">
                  {currentBulletin.sunset}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Recent Bulletins -->
  {bulletins && bulletins.length > 1 && (
    <section class="py-16 bg-gray-50 dark:bg-gray-800">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">Recent Bulletins</h2>
          <p class="text-xl text-gray-600 dark:text-gray-300">View our previous weekly bulletins</p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {bulletins.slice(0, 6).map((bulletin) => (
            <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg">
              <div class="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center mb-4">
                <i data-lucide="calendar" class="w-6 h-6 text-white"></i>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">{bulletin.title}</h3>
              <p class="text-gray-600 dark:text-gray-300 mb-4">
                {formatBulletinDate(bulletin.date)}
              </p>
              <div class="flex gap-2">
                <a href={`/bulletin/${bulletin.id}`} class="inline-flex items-center space-x-2 bg-primary-600 text-white px-4 py-2 rounded-xl text-sm font-medium hover:bg-primary-700 transition-colors">
                  <i data-lucide="eye" class="w-4 h-4"></i>
                  <span>View</span>
                </a>
                {bulletin.pdf_path && (
                  <a href={bulletin.pdf_path} target="_blank" rel="noopener" class="inline-flex items-center space-x-2 bg-gray-600 text-white px-4 py-2 rounded-xl text-sm font-medium hover:bg-gray-700 transition-colors">
                    <i data-lucide="download" class="w-4 h-4"></i>
                    <span>PDF</span>
                  </a>
                )}
              </div>
            </div>
          ))}
        </div>
        
        {bulletins.length > 6 && (
          <div class="text-center mt-12">
            <a href="/bulletin/archive" 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="archive" class="w-5 h-5"></i>
              <span>View All Bulletins ({bulletins.length})</span>
            </a>
          </div>
        )}
      </div>
    </section>
  )}

  <!-- Prayer Requests & Contact -->
  <section class="py-16 bg-white dark:bg-gray-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-4xl 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">
        Have prayer requests or questions? We're here for you.
      </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="/events" 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="calendar" class="w-5 h-5"></i>
          <span>View Events</span>
        </a>
      </div>
    </div>
  </section>
</MainLayout>