'use client'

import { useEffect, useState } from 'react'
import Image from 'next/image'
import dynamic from 'next/dynamic'
import { useBack } from '@/hooks/useBack'
import { useVisitor } from '@/context/VisitorContext'
import { t, tPlain, ui } from '@/lib/i18n'
import type { SectionDTO, EventAgendaDTO } from '@/lib/api/types'
import AppBar from '@/components/ui/AppBar'
import { trackEvent } from '@/lib/stats'
import { getAgendaEvents } from '@/lib/api/client'

const EventMiniMap = dynamic(() => import('./agenda/EventMiniMap'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center text-xs" style={{ background: '#e8eef3', color: 'var(--color-text-muted)' }}>
      Chargement…
    </div>
  ),
})

interface Props {
  section: SectionDTO
  slug: string
  configId: string
  languages: string[]
  apiKey: string
}

function formatMonthHeader(year: number, month: number, lang: string): string {
  const name = new Date(year, month, 1).toLocaleDateString(lang.toLowerCase(), { month: 'long' })
  return name.charAt(0).toUpperCase() + name.slice(1) + ' ' + year
}

function eventImage(e: EventAgendaDTO): string | undefined {
  return e.resource?.url
}

function eventCoords(e: EventAgendaDTO): { lat: number; lng: number } | null {
  const c = e.address?.geometry?.coordinates
  if (!Array.isArray(c) || c.length < 2) return null
  return { lat: c[1], lng: c[0] }
}

function fullAddress(e: EventAgendaDTO): string {
  const a = e.address
  if (!a) return ''
  return [
    [a.streetNumber, a.streetName].filter(Boolean).join(' '),
    [a.postCode, a.city].filter(Boolean).join(' '),
    a.country,
  ].filter(Boolean).join(', ')
}

function youtubeEmbedUrl(idOrUrl: string): string {
  if (idOrUrl.includes('youtube.com') || idOrUrl.includes('youtu.be')) {
    const m = idOrUrl.match(/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/)
    if (m) return `https://www.youtube.com/embed/${m[1]}`
    return idOrUrl
  }
  return `https://www.youtube.com/embed/${idOrUrl}`
}

export default function AgendaSection({ section, configId, languages, apiKey }: Props) {
  const { language, setAvailableLanguages, instanceId } = useVisitor()
  const back = useBack()
  const [events, setEvents] = useState<EventAgendaDTO[]>([])

  useEffect(() => { setAvailableLanguages([]) }, [languages])

  useEffect(() => {
    getAgendaEvents(section.id, language, apiKey).then(setEvents).catch(() => setEvents([]))
  }, [section.id, language, apiKey])

  const now = new Date()
  const [selectedMonth, setSelectedMonth] = useState(now.getMonth())
  const [selectedYear, setSelectedYear] = useState(now.getFullYear())
  const [selected, setSelected] = useState<EventAgendaDTO | null>(null)

  const filtered = events
    .filter((e) => {
      if (!e.dateFrom) return false
      const d = new Date(e.dateFrom)
      return d.getMonth() === selectedMonth && d.getFullYear() === selectedYear
    })
    .sort((a, b) => new Date(a.dateFrom!).getTime() - new Date(b.dateFrom!).getTime())

  function prevMonth() {
    if (selectedMonth === 0) { setSelectedMonth(11); setSelectedYear(y => y - 1) }
    else setSelectedMonth(m => m - 1)
  }
  function nextMonth() {
    if (selectedMonth === 11) { setSelectedMonth(0); setSelectedYear(y => y + 1) }
    else setSelectedMonth(m => m + 1)
  }

  return (
    <div className="min-h-screen flex flex-col" style={{ background: '#F6F3EE' }}>
      <AppBar title={tPlain(section.title, language)} onBack={back} />

      {/* Month selector */}
      <div className="flex items-center justify-center px-4 py-3">
        <div
          style={{
            display: 'flex', alignItems: 'center', gap: 4,
            background: '#fff', border: '1px solid #EFEAE2', borderRadius: 14,
            padding: 4, boxShadow: '0 6px 16px -12px rgba(0,0,0,0.3)',
          }}
        >
          <button
            onClick={prevMonth}
            style={{
              width: 36, height: 36, borderRadius: 10, border: 'none', cursor: 'pointer',
              background: 'color-mix(in srgb, var(--color-primary) 10%, white)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--color-primary)' }}>
              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
            </svg>
          </button>
          <span className="text-center" style={{ color: '#1E2A33', fontWeight: 700, fontSize: 14, minWidth: 150 }}>
            {formatMonthHeader(selectedYear, selectedMonth, language)}
          </span>
          <button
            onClick={nextMonth}
            style={{
              width: 36, height: 36, borderRadius: 10, border: 'none', cursor: 'pointer',
              background: 'color-mix(in srgb, var(--color-primary) 10%, white)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--color-primary)' }}>
              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
            </svg>
          </button>
        </div>
      </div>

      {/* Events grid */}
      <main className="flex-1 overflow-y-auto p-3">
        {filtered.length === 0 ? (
          <p className="text-center py-12 text-sm" style={{ color: 'var(--color-text-muted)' }}>
            {ui('noEventsThisMonth', language)}
          </p>
        ) : (
          <div className="grid grid-cols-2 gap-3">
            {filtered.map((event) => {
              const img = eventImage(event)
              return (
                <button
                  key={event.id}
                  onClick={() => {
                    setSelected(event)
                    if (instanceId) {
                      trackEvent({
                        instanceId, configurationId: configId, sectionId: section.id,
                        eventType: 'AgendaEventTap', language,
                        metadata: JSON.stringify({ eventAgendaId: event.id, title: tPlain(event.label, language) }),
                      })
                    }
                  }}
                  className="rounded-2xl overflow-hidden text-left flex flex-col"
                  style={{ background: 'var(--color-surface)', boxShadow: '0 2px 8px rgba(0,0,0,0.10)' }}
                >
                  {/* Image */}
                  <div className="relative w-full aspect-video">
                    {img ? (
                      <Image src={img} alt="" fill className="object-cover" sizes="50vw" />
                    ) : (
                      <div className="w-full h-full" style={{ background: 'var(--color-primary-light)' }} />
                    )}
                    {event.dateFrom && (
                      <div
                        className="absolute bottom-0 right-0 flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-bold whitespace-nowrap"
                        style={{ background: 'var(--color-primary)', color: 'var(--color-on-primary)', borderTopLeftRadius: 10 }}
                      >
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
                          <path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 18H5V8h14v13z"/>
                        </svg>
                        {new Date(event.dateFrom).toLocaleDateString(language.toLowerCase(), { day: 'numeric', month: 'short' })}
                      </div>
                    )}
                  </div>
                  {/* Title */}
                  <div className="p-3 flex-1 flex items-center justify-center">
                    <p
                      className="text-sm font-semibold text-center w-full [&_p]:m-0 line-clamp-3"
                      style={{ color: 'var(--color-text)' }}
                      dangerouslySetInnerHTML={{ __html: t(event.label, language) }}
                    />
                  </div>
                </button>
              )
            })}
          </div>
        )}
      </main>

      {/* Event detail popup */}
      {selected && (
        <EventDetail
          event={selected}
          language={language}
          onClose={() => setSelected(null)}
        />
      )}
    </div>
  )
}

function EventDetail({
  event, language, onClose,
}: {
  event: EventAgendaDTO
  language: string
  onClose: () => void
}) {
  useEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => { document.body.style.overflow = '' }
  }, [])

  const img = eventImage(event)
  const coords = eventCoords(event)
  const address = fullAddress(event)
  const yt = event.idVideoYoutube
  const videoLink = event.videoLink
  const videoResource = event.videoResource?.url

  const cardStyle = {
    background: '#fff',
    border: '1px solid #EFEAE2',
    borderRadius: 16,
    boxShadow: '0 6px 16px -12px rgba(0,0,0,0.3)',
  }

  return (
    <div className="fixed inset-0 z-50" style={{ background: '#F6F3EE' }}>
      <div className="h-full overflow-y-auto">
        <AppBar title={img ? '' : tPlain(event.label, language)} onBack={onClose} overlay={!!img} />
        {img && (
          <div className="relative w-full" style={{ height: 300, marginTop: -56 }}>
            <Image src={img} alt="" fill className="object-cover" sizes="100vw" />
            <div
              className="absolute inset-0"
              style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 45%, transparent 55%, rgba(0,0,0,0.55) 100%)' }}
            />
            <div className="absolute bottom-0 left-0 right-0 px-5 pb-5">
              <h1 className="text-2xl font-bold text-white" style={{ textShadow: '0 2px 10px rgba(0,0,0,0.7)' }}>
                {tPlain(event.label, language)}
              </h1>
            </div>
          </div>
        )}
        <div className="p-5 flex flex-col gap-6">
          {!img && (
            <h1 className="text-xl font-bold" style={{ color: 'var(--color-text)' }}>
              {tPlain(event.label, language)}
            </h1>
          )}
          {event.dateFrom && (
            <div
              className="flex items-center gap-3 p-3"
              style={cardStyle}
            >
              <div
                className="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center"
                style={{ background: 'color-mix(in srgb, var(--color-primary) 12%, white)' }}
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--color-primary)' }}>
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                  <line x1="16" y1="2" x2="16" y2="6" />
                  <line x1="8" y1="2" x2="8" y2="6" />
                  <line x1="3" y1="10" x2="21" y2="10" />
                </svg>
              </div>
              <div>
                <div className="text-sm font-semibold" style={{ color: '#1E2A33' }}>
                  {new Date(event.dateFrom).toLocaleDateString(language.toLowerCase(), { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
                </div>
                {event.dateTo && event.dateTo !== event.dateFrom && (
                  <div className="text-xs mt-0.5" style={{ color: '#6B7B86' }}>
                    → {new Date(event.dateTo).toLocaleDateString(language.toLowerCase(), { day: 'numeric', month: 'long', year: 'numeric' })}
                  </div>
                )}
              </div>
            </div>
          )}

          {t(event.description, language) && (
            <div
              className="text-sm leading-relaxed [&_p]:m-0 [&_p+p]:mt-2"
              style={{ color: '#46555F' }}
              dangerouslySetInnerHTML={{ __html: t(event.description, language) }}
            />
          )}

          {/* Video */}
          {(yt || videoLink || videoResource) && (
            <div className="rounded-xl overflow-hidden" style={{ background: '#000', aspectRatio: '16/9' }}>
              {yt ? (
                <iframe
                  src={youtubeEmbedUrl(yt)}
                  title="Vidéo"
                  className="w-full h-full"
                  allowFullScreen
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                />
              ) : videoLink ? (
                videoLink.includes('youtube') || videoLink.includes('youtu.be') ? (
                  <iframe
                    src={youtubeEmbedUrl(videoLink)}
                    title="Vidéo"
                    className="w-full h-full"
                    allowFullScreen
                  />
                ) : (
                  // eslint-disable-next-line jsx-a11y/media-has-caption
                  <video src={videoLink} controls className="w-full h-full" />
                )
              ) : videoResource ? (
                // eslint-disable-next-line jsx-a11y/media-has-caption
                <video src={videoResource} controls className="w-full h-full" />
              ) : null}
            </div>
          )}

          {/* Mini map */}
          {coords && (
            <div className="rounded-2xl overflow-hidden" style={{ height: 180, border: '1px solid #EFEAE2', boxShadow: '0 6px 16px -12px rgba(0,0,0,0.3)' }}>
              <EventMiniMap lat={coords.lat} lng={coords.lng} />
            </div>
          )}

          {/* Address */}
          {address && (
            <a
              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`}
              target="_blank"
              rel="noreferrer"
              className="flex items-center gap-3 p-3"
              style={cardStyle}
            >
              <span style={{ color: 'var(--color-primary)', flexShrink: 0, display: 'flex' }}><Icon name="place" /></span>
              <span className="text-sm flex-1" style={{ color: '#1E2A33' }}>{address}</span>
            </a>
          )}

          {/* Contact */}
          {(event.phone || event.email || event.website) && (
            <div className="flex flex-col gap-2">
              {event.phone && (
                <a
                  href={`tel:${event.phone}`}
                  className="flex items-center gap-3 p-3"
                  style={{ ...cardStyle, color: 'var(--color-primary)' }}
                >
                  <Icon name="phone" />
                  <span className="text-sm">{event.phone}</span>
                </a>
              )}
              {event.email && (
                <a
                  href={`mailto:${event.email}`}
                  className="flex items-center gap-3 p-3"
                  style={{ ...cardStyle, color: 'var(--color-primary)' }}
                >
                  <Icon name="email" />
                  <span className="text-sm truncate">{event.email}</span>
                </a>
              )}
              {event.website && (
                <a
                  href={event.website.startsWith('http') ? event.website : `https://${event.website}`}
                  target="_blank"
                  rel="noreferrer"
                  className="flex items-center gap-3 p-3"
                  style={{ ...cardStyle, color: 'var(--color-primary)' }}
                >
                  <Icon name="web" />
                  <span className="text-sm truncate">{event.website}</span>
                </a>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

function Icon({ name }: { name: 'phone' | 'email' | 'web' | 'place' }) {
  const paths: Record<string, string> = {
    phone: 'M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.05-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.05l-2.2 2.17z',
    email: 'M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z',
    web: 'M12 2A10 10 0 1 0 22 12 10 10 0 0 0 12 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8 8 0 0 1 18.92 8zM12 4a14 14 0 0 1 1.81 4h-3.62A14 14 0 0 1 12 4zM4.26 14a8 8 0 0 1 0-4h3.38a16.5 16.5 0 0 0 0 4zm.82 2h2.95a15.65 15.65 0 0 0 1.38 3.56A8 8 0 0 1 5.08 16zm2.95-8H5.08a8 8 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.05 8zM12 20a14 14 0 0 1-1.81-4h3.62A14 14 0 0 1 12 20zm2.34-6h-4.68a14.6 14.6 0 0 1 0-4h4.68a14.6 14.6 0 0 1 0 4zm.25 5.56A15.65 15.65 0 0 0 15.97 16h2.95a8 8 0 0 1-4.33 3.56zM16.36 14a16.5 16.5 0 0 0 0-4h3.38a8 8 0 0 1 0 4z',
    place: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z',
  }
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d={paths[name]} />
    </svg>
  )
}