'use client'

import { Suspense } from 'react'
import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import { ArrowRight, CalendarDays, Download, MapPin, Users } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { Button, buttonVariants } from '@/components/ui/button'
import { DataStates } from '@/components/api/data-states'
import { InfiniteScrollSentinel } from '@/components/api/infinite-scroll-sentinel'
import { ExpandableDescription } from '@/components/expandable-description'
import { useFetchData } from '@/hooks/api'
import { API_QUERY } from '@/lib/api/query-presets'
import type { ThreeDayEvent } from '@/lib/api/entities'
import { formatDate } from '@/lib/utils'

function ThreeDayEventsContent() {
  const t = useTranslations('services.threeDay')
  const { items, isLoading, isError, isEmpty, error, refetch, loadMore, hasMore, isLoadingMore } =
    useFetchData<ThreeDayEvent>({
      endpoint: '3-day-events',
      infinite: true,
      initialPageSize: 10,
      params: API_QUERY.threeDayEvents,
    })

  return (
    <section className="section-padding bg-background">
      <div className="container-wide">
        <DataStates
          isLoading={isLoading}
          isError={isError}
          isEmpty={false}
          error={error}
          loadingMessage={t('loading')}
          onRetry={refetch}
        >
          {isEmpty ? (
            <div className="rounded-[2rem] border border-border/60 bg-muted/40 px-8 py-16 text-center">
              <span className="inline-flex items-center rounded-full border border-accent/30 bg-accent/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-accent">
                {t('empty.badge')}
              </span>
              <h2 className="mx-auto mt-5 max-w-2xl text-3xl font-bold text-foreground">
                {t('empty.title')}
              </h2>
              <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
                {t('empty.description')}
              </p>
              <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
                <Link href="/contact?subject=3-day-events">
                  <Button size="lg" className="h-12 px-8 font-semibold">
                    {t('empty.interest')} <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
                <Link href="/services/upcoming-courses">
                  <Button size="lg" variant="outline" className="h-12 px-8 font-semibold">
                    {t('empty.courses')}
                  </Button>
                </Link>
              </div>
            </div>
          ) : (
            <div className="space-y-6">
              {(items ?? []).map((event) => (
                <div
                  key={event.id}
                  className="rounded-[2rem] border border-primary/20 bg-card p-7 shadow-sm sm:p-9"
                >
                  <div className="flex flex-wrap items-start justify-between gap-4">
                    <div>
                      <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
                        {event.subtitle}
                      </p>
                      <h2 className="mt-2 text-2xl font-bold text-foreground sm:text-3xl">
                        {event.title}
                      </h2>
                    </div>
                    <span className="rounded-full border border-border/60 bg-muted/50 px-3 py-1 text-xs font-semibold text-foreground">
                      {['open','upcoming','full','completed'].includes(event.status)
                        ? t(`status.${event.status}` as 'status.open')
                        : t('status.upcoming')}
                    </span>
                  </div>

                  <ExpandableDescription description={event.description} />

                  <div className="mt-5 flex flex-wrap gap-5 text-sm text-muted-foreground">
                    {event.startDate && (
                      <span className="inline-flex items-center gap-2">
                        <CalendarDays className="h-4 w-4 text-accent" />
                        {formatDate(event.startDate)}
                        {event.endDate && event.endDate !== event.startDate
                          ? ` – ${formatDate(event.endDate)}`
                          : ''}
                      </span>
                    )}
                    {event.location && (
                      <span className="inline-flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-accent" />
                        {event.location}
                      </span>
                    )}
                    {event.capacity > 0 && (
                      <span className="inline-flex items-center gap-2">
                        <Users className="h-4 w-4 text-accent" />
                        {t('seats', { count: event.capacity })}
                      </span>
                    )}
                    {event.priceDisplay && (
                      <span className="font-semibold text-foreground">{event.priceDisplay}</span>
                    )}
                  </div>

                  {event.topics.length > 0 && (
                    <div className="mt-6 flex flex-wrap gap-2">
                      {event.topics.map((topic) => (
                        <span
                          key={topic}
                          className="rounded-full border border-border/60 bg-muted/50 px-3 py-1 text-sm text-foreground"
                        >
                          {topic}
                        </span>
                      ))}
                    </div>
                  )}

                  <div className="mt-7 flex flex-wrap gap-3">
                    <Link href="/contact?subject=3-day-events">
                      <Button size="lg" className="h-12 px-8 font-semibold">
                        {t('registerInterest')} <ArrowRight className="ml-2 h-4 w-4" />
                      </Button>
                    </Link>
                    {event.brochureFile && (
                      <a
                        href={event.brochureFile}
                        download
                        className={buttonVariants({
                          size: 'lg',
                          variant: 'outline',
                          className: 'h-12 px-8 font-semibold',
                        })}
                      >
                        <Download className="mr-2 h-4 w-4" /> {t('download')}
                      </a>
                    )}
                  </div>
                </div>
              ))}

              <InfiniteScrollSentinel
                hasMore={hasMore}
                isLoadingMore={isLoadingMore}
                onLoadMore={loadMore}
              />
            </div>
          )}
        </DataStates>
      </div>
    </section>
  )
}

function ThreeDayEventsHero() {
  const t = useTranslations('services.threeDay')
  return (
    <PageHero
      eyebrow={t('hero.eyebrow')}
      title={t('hero.title')}
      description={t('hero.description')}
    />
  )
}

export default function ThreeDayEventsPage() {
  return (
    <main>
      <ThreeDayEventsHero />
      <Suspense>
        <ThreeDayEventsContent />
      </Suspense>
    </main>
  )
}