import { MapPin } from 'lucide-react'
import { generateSeoMetadata } from '@/lib/seo'

import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
import TrackOrderClient from '@/components/TrackOrderClient'
import { getCategoriesResult, getCmsPageResult } from '@/lib/cms'
import { splitCmsLayoutSections } from '@/lib/cms-sections'

// lang is extracted from params
export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  return generateSeoMetadata({
    title: 'ติดตามคำสั่งซื้อ | HomAroma',
    description: 'ตรวจสอบสถานะคำสั่งซื้อ HomAroma ด้วยหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์ที่ใช้สั่งซื้อ',
    path: '/track',
    lang,
  });
}

export default async function TrackPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params
  const [categoriesResult, cmsLayoutResult] = await Promise.all([
    getCategoriesResult(lang),
    getCmsPageResult('track-order-layout', lang),
  ])
  const categories = categoriesResult.ok ? categoriesResult.data : []
  const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
  const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)

  if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
    console.error(`[website-cms] track-order-layout unavailable: ${cmsLayoutResult.error}`)
  }

  return (
    <main className="min-h-[70vh] bg-pop-bg">
      {announcementSections.length > 0 && (
        <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
      )}

      {heroSections.length > 0 ? (
        <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
      ) : (
        <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
            <MapPin className="h-8 w-8" />
          </div>
          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Track Order</p>
          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Track Your Status</h1>
          <p className="mx-auto mt-4 max-w-2xl text-gray-600">
            กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้
          </p>
        </section>
      )}

      <section className="mx-auto max-w-5xl px-6 py-14 md:py-20">
        <TrackOrderClient />
      </section>

      {bottomSections.length > 0 && (
        <DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
      )}
    </main>
  )
}