'use client'

import { Suspense } from 'react'
import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import { ArrowRight, CalendarDays, MapPin, Users } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { SummitListingShowcase } from '@/components/summit'
import { Button } 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 { ExecutiveSummit } from '@/lib/api/entities'
import { bangkokLeadershipSummitII } from '@/lib/summits/bangkok-leadership-summit-ii'
import { formatDate } from '@/lib/utils'

function ExecutiveSummitsContent() {
  const t = useTranslations('services.summits')
  const { items, isLoading, isError, isEmpty, error, refetch, loadMore, hasMore, isLoadingMore } =
    useFetchData<ExecutiveSummit>({
      endpoint: 'executive-summits',
      infinite: true,
      initialPageSize: 10,
      params: API_QUERY.executiveSummits,
    })

  return (
    <>
      <section className="section-padding bg-background">
        <div className="container-wide">
          <div className="mb-10 max-w-3xl">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
              {t('featured.eyebrow')}
            </p>
            <h2 className="mt-3 text-3xl font-bold text-foreground sm:text-4xl">
              {t('featured.title')}
            </h2>
            <p className="mt-3 text-base leading-7 text-muted-foreground sm:text-lg">
              {t('featured.description')}
            </p>
          </div>

          <SummitListingShowcase summit={bangkokLeadershipSummitII} />
        </div>
      </section>

      <section className="section-padding bg-muted/30">
        <div className="container-wide">
          <div className="mb-8 max-w-2xl">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
              {t('more.eyebrow')}
            </p>
            <h2 className="mt-3 text-2xl font-bold text-foreground sm:text-3xl">
              {t('more.title')}
            </h2>
            <p className="mt-2 text-sm leading-7 text-muted-foreground sm:text-base">
              {t('more.description')}
            </p>
          </div>

          <DataStates
            isLoading={isLoading}
            isError={isError}
            isEmpty={false}
            error={error}
            loadingMessage={t('loading')}
            onRetry={refetch}
          >
            {isEmpty ? (
              <div className="rounded-[2rem] border border-border/60 bg-background px-8 py-12 text-center">
                <p className="text-sm text-muted-foreground">
                  {t('empty')}
                </p>
                <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
                  <Link href="/services/executive-summits/bangkok-leadership-summit-ii">
                    <Button size="lg" className="h-12 px-8 font-semibold">
                      {t('viewFeatured')}
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </Link>
                  <Link href="/contact?subject=executive-summits">
                    <Button size="lg" variant="outline" className="h-12 px-8 font-semibold">
                      {t('registerGeneral')}
                    </Button>
                  </Link>
                </div>
              </div>
            ) : (
              <div className="space-y-6">
                {(items ?? []).map((summit) => (
                  <div
                    key={summit.id}
                    className="rounded-[2rem] border border-primary/20 bg-background 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">
                          {summit.subtitle}
                        </p>
                        <h3 className="mt-2 text-2xl font-bold text-foreground sm:text-3xl">
                          {summit.title}
                        </h3>
                      </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(summit.status)
                          ? t(`status.${summit.status}` as 'status.open')
                          : t('status.upcoming')}
                      </span>
                    </div>

                    <ExpandableDescription description={summit.description} />

                    <div className="mt-5 flex flex-wrap gap-5 text-sm text-muted-foreground">
                      {summit.eventDate && (
                        <span className="inline-flex items-center gap-2">
                          <CalendarDays className="h-4 w-4 text-accent" />
                          {formatDate(summit.eventDate)}
                        </span>
                      )}
                      {summit.location && (
                        <span className="inline-flex items-center gap-2">
                          <MapPin className="h-4 w-4 text-accent" />
                          {summit.location}
                        </span>
                      )}
                      {summit.capacity > 0 && (
                        <span className="inline-flex items-center gap-2">
                          <Users className="h-4 w-4 text-accent" />
                          {t('delegates', { count: summit.capacity })}
                        </span>
                      )}
                      {summit.priceDisplay && (
                        <span className="font-semibold text-foreground">{summit.priceDisplay}</span>
                      )}
                    </div>

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

                    <div className="mt-7">
                      <Link href="/contact?subject=executive-summits">
                        <Button size="lg" className="h-12 px-8 font-semibold">
                          {t('registerInterest')} <ArrowRight className="ml-2 h-4 w-4" />
                        </Button>
                      </Link>
                    </div>
                  </div>
                ))}

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

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

export default function ExecutiveSummitsPage() {
  return (
    <main>
      <ExecutiveSummitsHero />
      <Suspense>
        <ExecutiveSummitsContent />
      </Suspense>
    </main>
  )
}