'use client'

import { useEffect, useState } from 'react'
import { useLocale, useTranslations } from 'next-intl'
import Link from 'next/link'
import { ArrowLeft, Calendar, MapPin, ExternalLink } from 'lucide-react'
import api from '@/lib/api'
import type { Locale, EventsPageData } from '@/types'
import { t as ls, dateLocale } from '@/types'

function formatDateRange(start: string, end?: string, locale?: string) {
  const opts: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }
  const loc = dateLocale(locale || 'en')
  const startDate = new Date(start)
  if (!end) return startDate.toLocaleDateString(loc, opts)
  const endDate = new Date(end)
  if (startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear()) {
    return `${startDate.toLocaleDateString(loc, { month: 'long', day: 'numeric' })} – ${endDate.toLocaleDateString(loc, opts)}`
  }
  return `${startDate.toLocaleDateString(loc, opts)} – ${endDate.toLocaleDateString(loc, opts)}`
}

export default function EventsPage() {
  const locale = useLocale() as Locale
  const t = useTranslations('services')
  const lp = (path: string) => `/${locale}${path}`

  const [data, setData] = useState<EventsPageData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    api.getEventsPage()
      .then(setData)
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="min-h-[60vh] flex items-center justify-center">
        <div className="w-10 h-10 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin" />
      </div>
    )
  }

  const heroTitle = data ? ls(data.heroTitle, locale) : ''
  const heroSubtitle = data ? ls(data.heroSubtitle, locale) : ''
  const heroImage = data?.heroImage
  const events = data?.events ?? []

  const featured = events.find(e => e.isFeatured) || events[0]
  const upcoming = events.filter(e => e !== featured)

  return (
    <div>
      {/* Hero */}
      <section
        className="relative min-h-[calc(100dvh-4rem)] lg:min-h-[calc(100dvh-100px)] flex items-end bg-secondary-950 overflow-hidden"
        style={heroImage ? { backgroundImage: `url(${heroImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}
      >
        {heroImage && <div className="absolute inset-0 bg-secondary-950/60" />}
        <div className="relative z-10 max-w-7xl mx-auto container-padding pb-16 md:pb-24 pt-32 w-full text-white">
          <Link
            href={lp('/services')}
            className="inline-flex items-center text-sm font-semibold mb-8 transition-colors text-white/80 hover:text-white"
          >
            <ArrowLeft className="mr-1.5 h-4 w-4" />
            {t('backToServices')}
          </Link>
          <div className="max-w-3xl">
            <span className="section-label !text-white/70">
              {t('events.label')}
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 tracking-tight text-white">
              {heroTitle}
            </h1>
            {heroSubtitle && (
              <p className="text-xl leading-relaxed text-white/70">
                {heroSubtitle}
              </p>
            )}
          </div>
        </div>
      </section>

      {/* Featured Event */}
      {featured && (
        <section className="section-padding">
          <div className="max-w-7xl mx-auto container-padding">
            <span className="section-label">{t('events.featured')}</span>
            <div className="mt-6 bg-white rounded-sm shadow-sm overflow-hidden lg:grid lg:grid-cols-2">
              {featured.image ? (
                <div className="aspect-[16/10] lg:aspect-auto bg-gray-100">
                  <img
                    src={featured.image}
                    alt={ls(featured.title, locale)}
                    className="w-full h-full object-cover"
                  />
                </div>
              ) : (
                <div className="aspect-[16/10] lg:aspect-auto bg-secondary-900 flex items-center justify-center">
                  <Calendar className="w-16 h-16 text-secondary-700" />
                </div>
              )}
              <div className="p-8 lg:p-10 flex flex-col justify-center">
                <h2 className="text-2xl md:text-3xl font-bold text-secondary-900 mb-4 tracking-tight">
                  {ls(featured.title, locale)}
                </h2>

                <div className="space-y-3 mb-6">
                  <div className="flex items-center gap-2 text-secondary-600">
                    <Calendar className="w-4 h-4 text-primary-600 flex-shrink-0" />
                    <span className="text-sm font-medium">
                      {formatDateRange(featured.date, featured.endDate, locale)}
                    </span>
                  </div>
                  {ls(featured.venue, locale) && (
                    <div className="flex items-center gap-2 text-secondary-600">
                      <MapPin className="w-4 h-4 text-primary-600 flex-shrink-0" />
                      <span className="text-sm font-medium">
                        {ls(featured.venue, locale)}{ls(featured.location, locale) ? ` · ${ls(featured.location, locale)}` : ''}
                      </span>
                    </div>
                  )}
                </div>

                {ls(featured.description, locale) && (
                  <p className="text-secondary-600 leading-relaxed mb-6">
                    {ls(featured.description, locale)}
                  </p>
                )}

                {featured.links && featured.links.length > 0 && (
                  <div className="flex flex-wrap gap-3">
                    {featured.links.map((link, i) => (
                      <a
                        key={i}
                        href={link.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg text-sm font-semibold transition-colors ${
                          i === 0
                            ? 'bg-primary-600 text-white hover:bg-primary-700'
                            : 'border border-secondary-300 text-secondary-700 hover:bg-secondary-50'
                        }`}
                      >
                        {ls(link.label, locale)}
                        <ExternalLink className="w-3.5 h-3.5" />
                      </a>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Upcoming Events */}
      {upcoming.length > 0 && (
        <section className="section-padding bg-gray-50">
          <div className="max-w-7xl mx-auto container-padding">
            <span className="section-label">{t('events.upcoming')}</span>
            <h2 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-10 mt-2 tracking-tight">
              {t('events.upcomingTitle')}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {upcoming.map((event, i) => (
                <div key={i} className="bg-white rounded-sm shadow-sm overflow-hidden hover:shadow-lg transition-shadow">
                  {event.image ? (
                    <div className="aspect-[16/9] bg-gray-100">
                      <img
                        src={event.image}
                        alt={ls(event.title, locale)}
                        className="w-full h-full object-cover"
                      />
                    </div>
                  ) : (
                    <div className="aspect-[16/9] bg-secondary-900 flex items-center justify-center">
                      <Calendar className="w-12 h-12 text-secondary-700" />
                    </div>
                  )}
                  <div className="p-6">
                    <h3 className="text-lg font-bold text-secondary-900 mb-3">
                      {ls(event.title, locale)}
                    </h3>
                    <div className="space-y-2 mb-4">
                      <div className="flex items-center gap-2 text-secondary-500">
                        <Calendar className="w-3.5 h-3.5 text-primary-600 flex-shrink-0" />
                        <span className="text-sm">
                          {formatDateRange(event.date, event.endDate, locale)}
                        </span>
                      </div>
                      {ls(event.venue, locale) && (
                        <div className="flex items-center gap-2 text-secondary-500">
                          <MapPin className="w-3.5 h-3.5 text-primary-600 flex-shrink-0" />
                          <span className="text-sm">
                            {ls(event.venue, locale)}{ls(event.location, locale) ? ` · ${ls(event.location, locale)}` : ''}
                          </span>
                        </div>
                      )}
                    </div>
                    {ls(event.description, locale) && (
                      <p className="text-sm text-secondary-600 leading-relaxed line-clamp-2 mb-4">
                        {ls(event.description, locale)}
                      </p>
                    )}
                    {event.links && event.links.length > 0 && (
                      <div className="flex flex-wrap gap-2">
                        {event.links.map((link, j) => (
                          <a
                            key={j}
                            href={link.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-1 text-sm font-semibold text-primary-600 hover:text-primary-700 transition-colors"
                          >
                            {ls(link.label, locale)}
                            <ExternalLink className="w-3 h-3" />
                          </a>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Empty state */}
      {events.length === 0 && (
        <section className="section-padding">
          <div className="max-w-7xl mx-auto container-padding text-center py-16">
            <Calendar className="w-12 h-12 text-secondary-300 mx-auto mb-4" />
            <h2 className="text-xl font-bold text-secondary-900 mb-2">
              {t('events.noEvents')}
            </h2>
            <p className="text-secondary-500">
              {t('events.noEventsDesc')}
            </p>
          </div>
        </section>
      )}
    </div>
  )
}