import type { Metadata } from 'next'
import { Suspense } from 'react'
import {
  ArrowRight,
  CalendarClock,
  CheckCircle2,
  Globe,
  Headphones,
  Mail,
  MapPin,
  MessageCircle,
  Phone,
  Send,
} from 'lucide-react'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { PageHero } from '@/components/page-hero'
import { ContactForm } from '@/components/enquiry-form'
import { locales, type Locale } from '@/i18n/config'
import {
  contactOffices,
  phoneToTel,
  phoneToWhatsApp,
  siteConfig,
} from '@/lib/site-config'
import { JsonLd } from '@/components/seo/json-ld'
import { buildShareMetadata } from '@/lib/metadata'
import { getStaticSiteSettings } from '@/lib/site-settings'
import { buildContactPageJsonLd } from '@/lib/structured-data'

const stepIcons = {
  submit: Send,
  notified: Headphones,
  followUp: CalendarClock,
} as const

const whatsappNumbers = [siteConfig.whatsapp, siteConfig.phoneAfghanistan]

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

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }))
}

export async function generateMetadata({ params }: ContactPageProps): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'contact.page' })
  const site = getStaticSiteSettings()

  return buildShareMetadata({
    title: t('meta.title'),
    description: t('meta.description'),
    path: '/contact',
    locale,
    site,
  })
}

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

  const t = await getTranslations('contact.page')
  const site = getStaticSiteSettings()
  const stepKeys = ['submit', 'notified', 'followUp'] as const
  const ctaSteps = stepKeys.map((key) => ({
    key,
    icon: stepIcons[key],
    title: t(`steps.items.${key}.title`),
    description: t(`steps.items.${key}.description`),
  }))

  return (
    <main>
      <JsonLd data={buildContactPageJsonLd(locale as Locale, site)} />
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title', { name: site.shortName })}
        description={t('hero.description')}
      />

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="mb-10 max-w-3xl">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
              {t('offices.eyebrow')}
            </p>
            <span className="mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
            <h2 className="mt-4 font-heading text-3xl text-foreground sm:text-4xl">
              {t('offices.title')}
            </h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground">
              {t('offices.emailLabel')}{' '}
              <a href={`mailto:${site.email}`} className="font-semibold text-primary hover:underline">
                {site.email}
              </a>
              {' · '}
              {t('offices.websiteLabel')}{' '}
              <a
                href={site.website}
                className="font-semibold text-primary hover:underline"
                target="_blank"
                rel="noopener noreferrer"
              >
                {siteConfig.websiteDisplay}
              </a>
            </p>
          </div>

          <div className="grid gap-4 lg:grid-cols-3">
            {contactOffices.map((office, index) => (
              <article
                key={office.id}
                className="flex h-full flex-col border border-border/80 bg-[oklch(0.985_0.008_343)] p-6 sm:p-7"
              >
                <p className="font-mono text-xs text-accent">{String(index + 1).padStart(2, '0')}</p>
                <h3 className="mt-2 text-lg font-bold text-foreground">{office.regionLabel}</h3>
                <ul className="mt-4 space-y-2 text-sm leading-6 text-muted-foreground">
                  {office.addressLines.map((line) => (
                    <li key={line} className="flex gap-2">
                      <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-primary" aria-hidden />
                      <span>{line}</span>
                    </li>
                  ))}
                </ul>
                {office.phone ? (
                  <a
                    href={phoneToTel(office.phone)}
                    className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary transition hover:text-primary/80"
                  >
                    <Phone className="h-4 w-4" />
                    {office.phoneLabel ?? t('offices.phone')}: {office.phone}
                  </a>
                ) : null}
              </article>
            ))}
          </div>

          <div className="mt-6 grid gap-4 border border-border/80 bg-white p-6 sm:grid-cols-2 lg:grid-cols-4 lg:p-7">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">
                {t('channels.email')}
              </p>
              <a
                href={`mailto:${site.email}`}
                className="mt-2 flex items-center gap-2 text-sm font-semibold text-foreground hover:text-primary"
              >
                <Mail className="h-4 w-4 text-accent" />
                {site.email}
              </a>
            </div>
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">
                {t('channels.website')}
              </p>
              <a
                href={site.website}
                className="mt-2 flex items-center gap-2 text-sm font-semibold text-foreground hover:text-primary"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Globe className="h-4 w-4 text-accent" />
                {siteConfig.websiteDisplay}
              </a>
            </div>
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">
                {t('channels.whatsapp')}
              </p>
              <ul className="mt-2 space-y-1.5">
                {whatsappNumbers.map((number) => (
                  <li key={number}>
                    <a
                      href={phoneToWhatsApp(number)}
                      className="flex items-center gap-2 text-sm font-semibold text-foreground hover:text-primary"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <MessageCircle className="h-4 w-4 shrink-0 text-accent" />
                      {number}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">
                {t('channels.skype')}
              </p>
              <a
                href={`skype:${siteConfig.skype}?chat`}
                className="mt-2 flex items-center gap-2 text-sm font-semibold text-foreground hover:text-primary"
              >
                <MessageCircle className="h-4 w-4 text-accent" />
                {siteConfig.skype}
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="border-b border-border/70 bg-[oklch(0.975_0.01_343)] py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="grid gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:gap-14">
            <div className="space-y-5 lg:sticky lg:top-24 lg:self-start">
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                {t('form.eyebrow')}
              </p>
              <span className="block h-0.5 w-10 bg-accent" aria-hidden />
              <h2 className="font-heading text-3xl text-foreground sm:text-4xl">
                {t('form.title')}
              </h2>
              <p className="text-base leading-7 text-muted-foreground">
                {t('form.description')}
              </p>
              <ul className="space-y-3 text-sm text-foreground">
                {ctaSteps.map((step) => (
                  <li key={step.key} className="flex gap-3">
                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                    <span>
                      <span className="font-semibold">{step.title}</span>
                      {' — '}
                      <span className="text-muted-foreground">{step.description}</span>
                    </span>
                  </li>
                ))}
              </ul>
              <p className="text-xs text-muted-foreground">{t('form.note')}</p>
            </div>

            <div>
              <Suspense fallback={<div className="border border-border/80 bg-white p-8">Loading form…</div>}>
                <ContactForm />
              </Suspense>
            </div>
          </div>
        </div>
      </section>

      <section className="border-b border-border/70 bg-white py-16 sm:py-20">
        <div className="container-wide">
          <div className="mx-auto mb-10 max-w-2xl text-center">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
              {t('steps.eyebrow')}
            </p>
            <span className="mx-auto mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
            <h2 className="mt-4 font-heading text-3xl text-foreground sm:text-4xl">
              {t('steps.title')}
            </h2>
          </div>

          <ol className="grid gap-4 md:grid-cols-3">
            {ctaSteps.map(({ icon: Icon, key, title, description }, index) => (
              <li
                key={key}
                className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6 sm:p-7"
              >
                <span className="flex h-11 w-11 items-center justify-center bg-primary font-mono text-sm font-bold text-primary-foreground">
                  {String(index + 1).padStart(2, '0')}
                </span>
                <div className="mt-4 flex items-center gap-2">
                  <Icon className="h-4 w-4 text-accent" />
                  <h3 className="text-base font-bold text-foreground">{title}</h3>
                </div>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">{description}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="relative overflow-hidden bg-[oklch(0.22_0.07_343)] py-16 text-white sm:py-20">
        <div className="container-wide relative text-center">
          <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-accent">
            {t('call.eyebrow')}
          </p>
          <span className="mx-auto mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
          <h2 className="mt-4 font-heading text-3xl sm:text-4xl">{t('call.title')}</h2>
          <p className="mx-auto mt-4 max-w-xl text-white/75">
            {t('call.hours', {
              weekdays: site.businessHours.weekdays,
              hours: site.businessHours.hours,
            })}
          </p>
          <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
            <a
              href={phoneToTel(site.phone)}
              className="inline-flex h-12 items-center justify-center gap-2 bg-accent px-8 text-sm font-semibold text-accent-foreground transition hover:bg-accent/90"
            >
              {t('call.uae', { phone: site.phone })}
            </a>
            <a
              href={phoneToTel(siteConfig.phoneAfghanistan)}
              className="inline-flex h-12 items-center justify-center gap-2 border border-white/25 px-8 text-sm font-semibold transition hover:border-accent hover:text-accent"
            >
              {t('call.afghanistan', { phone: siteConfig.phoneAfghanistan })}
            </a>
          </div>
          <a
            href={`mailto:${site.trainingEmail}`}
            className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-accent transition hover:text-white"
          >
            {t('call.registration', { email: site.trainingEmail })}
            <ArrowRight className="h-4 w-4" />
          </a>
        </div>
      </section>
    </main>
  )
}