'use client'

import { Suspense, useMemo } from 'react'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import { ArrowLeft, ArrowRight, MapPin } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { Button } from '@/components/ui/button'
import { CourseListingCard } from '@/components/course-listing-card'
import { DataStates } from '@/components/api/data-states'
import { InfiniteScrollSentinel } from '@/components/api/infinite-scroll-sentinel'
import { VenueImage } from '@/components/venue-image'
import { useFetchData } from '@/hooks/api'
import type { Course, Venue } from '@/lib/api/entities'

const COUNTRY_FLAGS: Record<string, string> = {
  Thailand: '🇹🇭',
  'United Arab Emirates': '🇦🇪',
  UAE: '🇦🇪',
  Turkiye: '🇹🇷',
  Turkey: '🇹🇷',
  'United Kingdom': '🇬🇧',
  Spain: '🇪🇸',
  Singapore: '🇸🇬',
  Malaysia: '🇲🇾',
  'South Korea': '🇰🇷',
  Japan: '🇯🇵',
}

function VenueDetailContent() {
  const params = useParams<{ slug: string }>()
  const slug = params.slug

  const {
    record: venue,
    isLoading: venueLoading,
    isError: venueError,
    error: venueFetchError,
    refetch: refetchVenue,
  } = useFetchData<Venue>({
    endpoint: 'venues',
    recordId: slug,
    enabled: Boolean(slug),
  })

  const courseParams = useMemo(
    () => ({
      venue: slug,
      upcoming: 'true',
      ordering: 'start_date',
    }),
    [slug],
  )

  const {
    items: courses,
    isLoading: coursesLoading,
    isError: coursesError,
    isEmpty: coursesEmpty,
    error: coursesFetchError,
    refetch: refetchCourses,
    loadMore,
    hasMore,
    isLoadingMore,
  } = useFetchData<Course>({
    endpoint: 'courses',
    infinite: true,
    initialPageSize: 12,
    params: courseParams,
    enabled: Boolean(slug),
  })

  if (venueLoading) {
    return (
      <main className="animate-pulse">
        <div className="bg-primary py-20">
          <div className="container-wide space-y-4">
            <div className="h-4 w-28 rounded bg-white/20" />
            <div className="h-10 w-72 max-w-full rounded bg-white/25" />
            <div className="h-4 w-96 max-w-full rounded bg-white/15" />
          </div>
        </div>
        <div className="container-wide section-padding space-y-6">
          <div className="h-40 rounded-2xl bg-muted" />
          <div className="h-48 rounded-xl bg-muted" />
          <div className="h-48 rounded-xl bg-muted" />
        </div>
      </main>
    )
  }

  if (venueError || !venue) {
    return (
      <main>
        <PageHero
          eyebrow="Course Venue"
          title="Venue not found"
          description="This training venue could not be loaded. It may have been removed or the link is incorrect."
        >
          <div className="mt-8">
            <Link href="/information/course-venue">
              <Button size="lg" variant="outlineLight" className="h-12 px-8 font-semibold">
                <ArrowLeft className="mr-2 h-4 w-4" />
                All Course Venues
              </Button>
            </Link>
          </div>
        </PageHero>
        <section className="section-padding">
          <div className="container-wide">
            <DataStates
              isLoading={false}
              isError
              isEmpty={false}
              error={venueFetchError}
              onRetry={refetchVenue}
            />
          </div>
        </section>
      </main>
    )
  }

  const flag = COUNTRY_FLAGS[venue.country ?? ''] ?? '🌍'
  const locationLabel = [venue.city, venue.country].filter(Boolean).join(', ')

  return (
    <main>
      <PageHero
        eyebrow="Course Venue"
        title={venue.city}
        description={
          venue.description ||
          `Executive training programmes delivered in ${locationLabel}. Browse confirmed courses at this venue below.`
        }
      >
        <div className="mt-6 flex flex-wrap items-center gap-3 text-sm text-white/85">
          <span className="inline-flex items-center gap-2">
            <MapPin className="h-4 w-4 shrink-0" />
            {locationLabel}
          </span>
          <span className="text-xl leading-none" aria-hidden>
            {flag}
          </span>
          {venue.regionTag ? (
            <span className="rounded-full border border-white/25 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em]">
              {venue.regionTag}
            </span>
          ) : null}
        </div>
        <div className="mt-8 flex flex-wrap gap-4">
          <Link href="/information/course-venue">
            <Button size="lg" variant="outlineLight" className="h-12 px-8 font-semibold">
              <ArrowLeft className="mr-2 h-4 w-4" />
              All Venues
            </Button>
          </Link>
          <Link href="/contact?subject=proposal">
            <Button size="lg" variant="outlineLight" className="h-12 px-8 font-semibold">
              Enquire About This Venue
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </Link>
        </div>
      </PageHero>

      <section className="border-b border-border/60 bg-muted/30">
        <div className="container-wide py-10 md:py-12">
          <div className="relative mx-auto aspect-[21/9] max-h-[360px] w-full overflow-hidden rounded-[1.75rem] border border-primary/15 bg-muted shadow-sm">
            <VenueImage
              imageUrl={venue.imageUrl}
              alt={`${venue.city} training venue`}
              sizes="100vw"
              priority
            />
          </div>
        </div>
      </section>

      <section className="section-padding bg-background">
        <div className="container-wide">
          <div className="mb-8 max-w-2xl">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
              Programmes at this venue
            </p>
            <h2 className="mt-2 text-2xl font-bold text-foreground sm:text-3xl">
              Courses in {venue.city}
            </h2>
            <p className="mt-3 text-muted-foreground">
              All published courses linked to this venue. Select a programme for dates, outline, and
              registration.
            </p>
          </div>

          <DataStates
            isLoading={coursesLoading}
            isError={coursesError}
            isEmpty={coursesEmpty}
            error={coursesFetchError}
            loadingMessage="Loading courses for this venue…"
            emptyMessage={`No courses are currently listed for ${venue.city}.`}
            onRetry={refetchCourses}
          >
            <div className="space-y-5">
              {(courses ?? []).map((course) => (
                <CourseListingCard key={course.id} course={course} />
              ))}
            </div>
            <InfiniteScrollSentinel
              hasMore={hasMore}
              isLoadingMore={isLoadingMore}
              onLoadMore={loadMore}
            />
          </DataStates>
        </div>
      </section>
    </main>
  )
}

export default function VenueDetailPage() {
  return (
    <Suspense
      fallback={
        <main className="animate-pulse">
          <div className="bg-primary py-20">
            <div className="container-wide space-y-4">
              <div className="h-4 w-28 rounded bg-white/20" />
              <div className="h-10 w-72 max-w-full rounded bg-white/25" />
            </div>
          </div>
        </main>
      }
    >
      <VenueDetailContent />
    </Suspense>
  )
}