import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import {
  ArrowRight,
  Building2,
  Car,
  CheckCircle2,
  Clock,
  Coffee,
  Globe,
  Mail,
  MapPin,
  Monitor,
  Phone,
  Plane,
  Projector,
  Train,
  Users,
  Wifi,
} from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { VenuesGrid } from '@/components/venues-grid'
import { VenueImage } from '@/components/venue-image'
import { fetchApiList } from '@/lib/api/server-fetch'
import { API_QUERY } from '@/lib/api/query-presets'
import type { Venue } from '@/lib/api/entities'
import { getResolvedSiteSettings, formatFullAddress } from '@/lib/site-settings'
import { type Locale } from '@/i18n/config'

type PageProps = { params: Promise<{ locale: string }> }

const highlightIcons = {
  capacity: Users,
  type: Building2,
  region: Globe,
  access: Train,
} as const

const facilityIcons = {
  classrooms: Monitor,
  av: Projector,
  wifi: Wifi,
  catering: Coffee,
  access: Car,
  layouts: Users,
} as const

export default async function CourseVenuePage({ params }: PageProps) {
  const { locale } = await params
  setRequestLocale(locale as Locale)

  const t = await getTranslations('information.venue')
  const site = await getResolvedSiteSettings()
  const venues = await fetchApiList<Venue>('venues', API_QUERY.venuesAll, { locale })
  const bangkok =
    venues.find((venue) => venue.city?.toLowerCase() === 'bangkok') ??
    venues.find((venue) => venue.slug?.includes('bangkok')) ??
    null

  const venueName = bangkok
    ? `${site.shortName} Training Center — ${bangkok.city}`
    : `${site.shortName} Training Center — ${site.address.city}`
  const venueLocation = bangkok
    ? [bangkok.city, bangkok.country].filter(Boolean).join(', ')
    : `${site.address.city}, ${site.address.country}`

  const contactItems = [
    {
      icon: MapPin,
      title: t('address'),
      content: formatFullAddress(site.address, '\n') || `${site.address.city}, ${site.address.country}`,
      multiline: true,
    },
    {
      icon: Clock,
      title: t('hours'),
      content: `${site.businessHours.weekdays}\n${site.businessHours.hours}`,
      multiline: true,
    },
    {
      icon: Phone,
      title: t('phone'),
      content: site.phone,
      href: `tel:${site.phone.replace(/\s/g, '')}`,
    },
    {
      icon: Mail,
      title: t('email'),
      content: site.email,
      href: `mailto:${site.email}`,
    },
  ]

  const venueHighlights = (Object.keys(highlightIcons) as Array<keyof typeof highlightIcons>).map(
    (key) => ({
      icon: highlightIcons[key],
      label: t(`highlights.${key}.label`),
      value: t(`highlights.${key}.value`),
    }),
  )

  const facilityAmenities = (Object.keys(facilityIcons) as Array<keyof typeof facilityIcons>).map(
    (key) => ({
      icon: facilityIcons[key],
      title: t(`facilities.items.${key}.title`),
      description: t(`facilities.items.${key}.description`),
    }),
  )

  const whyBangkok = t.raw('why.points') as string[]

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description', { name: site.shortName })}
      >
        <div className="mt-8 flex flex-wrap gap-4">
          <Link href="/contact?subject=proposal">
            <Button size="lg" variant="outlineLight" className="h-12 px-8 font-semibold">
              {t('enquire')} <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </Link>
          <Link href="/information/travel-information">
            <Button size="lg" variant="outlineLight" className="h-12 px-8 font-semibold">
              {t('travel')}
            </Button>
          </Link>
        </div>
      </PageHero>

      <section className="border-b border-border/60 bg-muted/40">
        <div className="container-wide py-10">
          <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
            {[
              { value: '500+', label: t('stats.clients') },
              { value: '35+', label: t('stats.countries') },
              { value: '500+', label: t('stats.capacity') },
              { value: '2017', label: t('stats.established') },
            ].map(({ value, label }) => (
              <div key={label} className="text-center">
                <p className="text-3xl font-bold text-primary sm:text-4xl">{value}</p>
                <p className="mt-1 text-sm text-muted-foreground">{label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-padding bg-background">
        <div className="container-wide">
          <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
            <div className="relative overflow-hidden rounded-[1.75rem] border border-border/60 shadow-[0_24px_60px_rgba(15,23,42,0.1)]">
              <div className="relative aspect-[4/3] w-full bg-muted">
                <VenueImage
                  imageUrl={bangkok?.imageUrl}
                  alt={t('hq.imageAlt')}
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  priority
                />
                <div className="absolute inset-0 bg-gradient-to-t from-primary/80 via-primary/20 to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
                  <Badge className="mb-3 border-0 bg-white/15 text-white backdrop-blur-sm">
                    {t('flagship')}
                  </Badge>
                  <h2 className="text-2xl font-bold text-white sm:text-3xl">{venueName}</h2>
                  <p className="mt-2 text-sm text-white/85 sm:text-base">{venueLocation}</p>
                </div>
              </div>
            </div>

            <div className="space-y-8">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
                  {t('hq.eyebrow')}
                </p>
                <h2 className="mt-3 text-3xl font-bold leading-tight text-foreground sm:text-4xl">
                  {t('hq.title')}
                </h2>
                <p className="mt-4 text-base leading-7 text-muted-foreground">{t('hq.description')}</p>
              </div>

              <div className="grid grid-cols-2 gap-4">
                {venueHighlights.map(({ icon: Icon, label, value }) => (
                  <div
                    key={label}
                    className="rounded-2xl border border-primary/20 bg-card p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-md sm:p-5"
                  >
                    <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-primary/8 text-primary">
                      <Icon className="h-5 w-5" />
                    </div>
                    <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                      {label}
                    </p>
                    <p className="mt-1 text-sm font-bold leading-snug text-foreground sm:text-base">
                      {value}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-padding bg-muted/40">
        <div className="container-wide">
          <div className="mx-auto mb-12 max-w-3xl text-center">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
              {t('facilities.eyebrow')}
            </p>
            <h2 className="mt-3 text-3xl font-bold text-foreground sm:text-4xl">
              {t('facilities.title')}
            </h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground">
              {t('facilities.description')}
            </p>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {facilityAmenities.map(({ icon: Icon, title, description }) => (
              <div
                key={title}
                className="rounded-[1.75rem] border border-primary/20 bg-card p-6 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md"
              >
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/8 text-primary">
                  <Icon className="h-6 w-6" />
                </div>
                <h3 className="text-base font-bold text-foreground">{title}</h3>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">{description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

      <section className="section-padding bg-muted/40">
        <div className="container-wide">
          <div className="grid items-center gap-12 lg:grid-cols-2">
            <div className="space-y-5">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
                {t('why.eyebrow')}
              </p>
              <h2 className="text-3xl font-bold text-foreground sm:text-4xl">{t('why.title')}</h2>
              <p className="text-base leading-7 text-muted-foreground">{t('why.description')}</p>
              <ul className="space-y-3">
                {whyBangkok.map((item) => (
                  <li key={item} className="flex items-start gap-3 text-sm text-foreground">
                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                    {item}
                  </li>
                ))}
              </ul>
              <div className="pt-2">
                <Link href="/information/travel-information">
                  <Button variant="outline" className="font-semibold">
                    {t('why.travelCta')} <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
              </div>
            </div>

            <div className="relative overflow-hidden rounded-[1.75rem] border border-border/60 shadow-[0_24px_60px_rgba(15,23,42,0.1)]">
              <div className="relative aspect-[4/3] w-full bg-muted">
                <VenueImage
                  imageUrl={bangkok?.imageUrl}
                  alt={t('why.imageAlt')}
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  quality={70}
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-primary/70 via-primary/10 to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
                  <div className="flex items-center gap-2">
                    <Plane className="h-4 w-4 text-white/80" />
                    <p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/80">
                      {t('why.badge')}
                    </p>
                  </div>
                  <p className="mt-2 text-xl font-bold text-white">{t('why.city')}</p>
                  <p className="mt-1 text-sm text-white/85">{t('why.airports')}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-padding bg-background">
        <div className="container-wide">
          <div className="mb-10 max-w-2xl">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-accent">
              {t('contactSection.eyebrow')}
            </p>
            <h2 className="mt-3 text-3xl font-bold text-foreground">{t('contactSection.title')}</h2>
            <p className="mt-4 leading-7 text-muted-foreground">{t('contactSection.description')}</p>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {contactItems.map(({ icon: Icon, title, content, href, multiline }) => (
              <div
                key={title}
                className="rounded-[1.5rem] border border-primary/20 bg-card p-6 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-md"
              >
                <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-primary/8 text-primary">
                  <Icon className="h-5 w-5" />
                </div>
                <h3 className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                  {title}
                </h3>
                {href ? (
                  <a
                    href={href}
                    className="mt-2 block text-base font-semibold text-foreground transition-colors hover:text-primary"
                  >
                    {content}
                  </a>
                ) : (
                  <p
                    className={`mt-2 text-base font-semibold leading-7 text-foreground ${multiline ? 'whitespace-pre-line' : ''}`}
                  >
                    {content}
                  </p>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-padding bg-primary text-primary-foreground">
        <div className="container-wide">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/70">
              {t('cta.eyebrow')}
            </p>
            <h2 className="mt-3 text-3xl font-bold sm:text-4xl">{t('cta.title')}</h2>
            <p className="mx-auto mt-4 max-w-xl text-primary-foreground/85">{t('cta.description')}</p>
            <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
              <Link href="/services/upcoming-courses">
                <Button
                  size="lg"
                  className="h-12 bg-accent px-8 font-semibold text-accent-foreground hover:bg-accent/90"
                >
                  {t('cta.browse')} <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
              <Link href="/contact?subject=proposal">
                <Button size="lg" variant="outlineLight" className="h-12 px-8 font-semibold">
                  {t('cta.proposal')}
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}