import React, { useMemo } from 'react'
import { Link } from 'react-router-dom'
import SEOHead from '../components/SEOHead'
import { useEvents } from '../hooks/useEvents'

function formatDateRange(dateStr, timeStr) {
  const date = new Date(dateStr)
  if (Number.isNaN(date)) {
    return `${dateStr}${timeStr ? ` - ${timeStr}` : ''}`
  }
  return `${date.toLocaleDateString(undefined, {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
  })}${timeStr ? ` - ${timeStr}` : ''}`
}

export default function Calendar() {
  const { events, loading, error } = useEvents()

  const upcoming = useMemo(() => {
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    return events.filter(event => {
      const date = new Date(event.date)
      if (Number.isNaN(date)) return true
      return date >= today
    })
  }, [events])

  return (
    <>
      <SEOHead 
        title="Calendar - Annaville Seventh-day Adventist Church"
        description="Church events and calendar"
      />
      
      <div className="max-w-4xl">
        <h1 className="text-3xl font-bold text-blue-600 mb-6 flex items-center">
          Church Events
          <div className="ml-4 flex space-x-1">
            <div className="w-2 h-2 bg-blue-400"></div>
            <div className="w-2 h-2 bg-blue-400"></div>
            <div className="w-2 h-2 bg-blue-400"></div>
            <div className="w-2 h-2 bg-blue-400"></div>
            <div className="w-2 h-2 bg-blue-400"></div>
          </div>
        </h1>
        
        <h2 className="text-xl font-semibold text-red-600 mb-6">
          Upcoming events:
        </h2>
        
        <div className="bg-gray-50 p-8 rounded-lg border border-gray-200">
          {loading && (
            <p className="text-gray-600 text-center">Loading events...</p>
          )}
          {error && !loading && (
            <p className="text-red-600 text-center">Unable to load events right now. Please try again later.</p>
          )}
          {!loading && !error && upcoming.length === 0 && (
            <p className="text-gray-600 text-center">
              No upcoming events at this time. Please check back later for updates.
            </p>
          )}
          {!loading && !error && upcoming.length > 0 && (
            <ul className="space-y-6">
              {upcoming.map(event => (
                <li key={event.slug} className="p-6 bg-white rounded-lg shadow-sm border border-subtle">
                  <h3 className="text-2xl font-semibold text-blue-700 mb-2">{event.title}</h3>
                  <div className="text-muted mb-3">{formatDateRange(event.date, event.time)}{event.location ? ` - ${event.location}` : ''}</div>
                  <p className="text-body mb-4">{event.description}</p>
                  <Link to={`/events/${event.slug}`} className="text-primary font-medium underline">
                    View details
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </>
  )
}
