'use client'

import React from 'react'

import { useCarplacePreferences } from '@/components/CarplaceShell'
import { type FooterPageSlug, getFooterPageContent } from '@/lib/footerContent'
import { type CarplaceLanguage } from '@/lib/i18n'

const pageMeta = {
  en: {
    kicker: 'Footer information',
    cta: 'Need more details?',
    support: 'Contact the RentalDriveGo team through our official channels for business, support, or partnership requests.',
  },
  fr: {
    kicker: 'Informations du pied de page',
    cta: 'Besoin de plus de détails ?',
    support: "Contactez l'équipe RentalDriveGo via nos canaux officiels pour toute demande commerciale, support ou partenariat.",
  },
  ar: {
    kicker: 'معلومات التذييل',
    cta: 'هل تحتاج إلى مزيد من التفاصيل؟',
    support: 'تواصل مع فريق RentalDriveGo عبر القنوات الرسمية للاستفسارات التجارية أو الدعم أو الشراكات.',
  },
} as const

const urlPattern = /(https?:\/\/[^\s]+)/g

function renderParagraphText(paragraph: string) {
  const parts = paragraph.split(urlPattern)
  return parts.map((part, index) => {
    if (urlPattern.test(part)) {
      urlPattern.lastIndex = 0
      const match = part.match(/^(https?:\/\/[^\s]+?)([.,!?;:]*)$/)
      const href = match?.[1] ?? part
      const trailing = match?.[2] ?? ''

      return (
        <span key={`${part}-${index}`}>
          <a
            href={href}
            className="text-orange-700 underline decoration-orange-300 underline-offset-4 transition hover:text-blue-900 dark:text-orange-300 dark:hover:text-stone-100"
          >
            {href}
          </a>
          {trailing}
        </span>
      )
    }

    urlPattern.lastIndex = 0
    return <span key={`${part}-${index}`}>{part}</span>
  })
}

export default function FooterContentPage({ slug, forcedLanguage }: { slug: FooterPageSlug; forcedLanguage?: CarplaceLanguage }) {
  const { language } = useCarplacePreferences()
  const activeLanguage = forcedLanguage ?? language
  const content = getFooterPageContent(activeLanguage, slug)
  const meta = pageMeta[activeLanguage]
  const isArabic = activeLanguage === 'ar'

  return (
    <main className="site-page">
      <div className="site-section mx-auto max-w-4xl">
        <section className="site-panel overflow-hidden p-0">
          <div className="site-panel-muted rounded-none border-0 border-b border-stone-100/80 px-6 py-10 sm:px-10 sm:py-14 dark:border-blue-900">
            <p className="site-kicker">
              {meta.kicker}
            </p>
            <h1 className="site-title">
              {content.title}
            </h1>
          </div>

          <div className={`space-y-6 px-6 py-10 sm:px-10 sm:py-12 ${isArabic ? 'text-right' : 'text-left'}`}>
            {content.paragraphs.map((paragraph) => (
              <p key={paragraph} className="text-lg leading-8 text-stone-700 dark:text-stone-300">
                {renderParagraphText(paragraph)}
              </p>
            ))}

            {content.sections?.map((section) => (
              <section key={section.heading} className="space-y-4">
                <h2 className="text-xl font-semibold text-stone-900 dark:text-stone-100">
                  {section.heading}
                </h2>
                {section.paragraphs.map((paragraph) => (
                  <p key={`${section.heading}-${paragraph}`} className="text-lg leading-8 text-stone-700 dark:text-stone-300">
                    {renderParagraphText(paragraph)}
                  </p>
                ))}
              </section>
            ))}

            <div className="rounded-3xl border border-orange-200 bg-orange-50 px-6 py-5 dark:border-orange-800 dark:bg-orange-950/30">
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-orange-800 dark:text-orange-400">
                {meta.cta}
              </p>
              <p className="mt-2 text-base leading-7 text-stone-700 dark:text-stone-300">{meta.support}</p>
            </div>
          </div>
        </section>
      </div>
    </main>
  )
}