import { DEFAULT_COMPANY_SLUG, siteFetchOrDefault } from '@/lib/api'
import { getPublicSiteLanguage } from '@/lib/i18n.server'
import { getPublicSiteDictionary } from '@/lib/i18n'
import type { PublicSitePageSections } from '@rentaldrivego/types'
import { resolvePageSectionsConfig } from '@/lib/pageSections'

interface BrandResponse {
  company: { slug: string; name: string }
  brand: {
    displayName: string
    tagline: string | null
    heroImageUrl: string | null
    publicPhone: string | null
    publicEmail: string | null
    publicCity: string | null
    publicCountry: string | null
    publicAddress: string | null
    whatsappNumber: string | null
    menuConfig?: {
      pageSections?: Partial<PublicSitePageSections> | null
    } | null
  } | null
}

export default async function AboutPage() {
  const language = getPublicSiteLanguage()
  const dict = getPublicSiteDictionary(language)
  const brand = await siteFetchOrDefault<BrandResponse | null>(`/site/${DEFAULT_COMPANY_SLUG}/brand`, null)
  const companyName = brand?.brand?.displayName ?? brand?.company.name ?? dict.rentalCompanyFallback
  const location = [brand?.brand?.publicCity, brand?.brand?.publicCountry].filter(Boolean).join(', ')
  const pageSections = resolvePageSectionsConfig(brand?.brand?.menuConfig)

  return (
    <main className="min-h-screen bg-slate-50 py-16">
      <div className="shell space-y-10">
        {pageSections.about.hero ? <section className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">{dict.about.eyebrow}</p>
            <h1 className="mt-4 text-5xl font-black tracking-tight text-slate-900">{companyName}</h1>
            <p className="mt-5 text-lg leading-8 text-slate-600">
              {brand?.brand?.tagline ?? dict.about.defaultTagline}
            </p>
            <div className="mt-8 grid gap-4 sm:grid-cols-2">
              <InfoCard label={dict.about.location} value={location || dict.about.locationMissing} />
              <InfoCard label={dict.about.phone} value={brand?.brand?.publicPhone || dict.about.phoneMissing} />
              <InfoCard label={dict.about.email} value={brand?.brand?.publicEmail || dict.about.emailMissing} />
              <InfoCard label={dict.about.whatsapp} value={brand?.brand?.whatsappNumber || dict.about.whatsappMissing} />
            </div>
          </div>

          <div className="card overflow-hidden bg-slate-100 min-h-80">
            {brand?.brand?.heroImageUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={brand.brand.heroImageUrl} alt={companyName} className="h-full w-full object-cover" />
            ) : (
              <div className="flex h-full items-center justify-center p-8 text-center text-slate-500">
                {dict.about.heroImageMissing}
              </div>
            )}
          </div>
        </section> : null}

        {pageSections.about.highlights ? <section className="grid gap-6 md:grid-cols-3">
          <article className="card p-6">
            <h2 className="text-xl font-black text-slate-900">{dict.about.directBookingTitle}</h2>
            <p className="mt-3 text-sm leading-7 text-slate-600">{dict.about.directBookingBody}</p>
          </article>
          <article className="card p-6">
            <h2 className="text-xl font-black text-slate-900">{dict.about.publishedFleetTitle}</h2>
            <p className="mt-3 text-sm leading-7 text-slate-600">{dict.about.publishedFleetBody}</p>
          </article>
          <article className="card p-6">
            <h2 className="text-xl font-black text-slate-900">{dict.about.marketplaceReadyTitle}</h2>
            <p className="mt-3 text-sm leading-7 text-slate-600">{dict.about.marketplaceReadyBody}</p>
          </article>
        </section> : null}

        {pageSections.about.details ? <section className="card p-8">
          <h2 className="text-2xl font-black text-slate-900">{dict.about.companyDetails}</h2>
          <p className="mt-3 text-sm leading-7 text-slate-600">
            {brand?.brand?.publicAddress ?? dict.about.companyAddressMissing}
          </p>
        </section> : null}
      </div>
    </main>
  )
}

function InfoCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="card p-5">
      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">{label}</p>
      <p className="mt-2 text-sm font-medium text-slate-900">{value}</p>
    </div>
  )
}
