'use client'

import { CheckCircle2, Clock3, Search } from 'lucide-react'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { useCarplacePreferences } from '@/components/CarplaceShell'
import { getCarplaceMessages } from '@/lib/carplace/messages'
import { carplaceHref } from '@/lib/carplace/routes'
import type { ReservationResult } from '@/lib/carplace/types'

export default function RequestSuccessClient({ reference }: { reference: string }) {
  const { language } = useCarplacePreferences()
  const copy = getCarplaceMessages(language)
  const [result, setResult] = useState<ReservationResult | null>(null)

  useEffect(() => {
    try {
      const raw = sessionStorage.getItem(`carplace-request:${reference}`)
      if (raw) setResult(JSON.parse(raw) as ReservationResult)
    } catch {}
  }, [reference])

  return (
    <main className="site-page">
      <div className="shell py-16 sm:py-24">
        <section className="mx-auto max-w-2xl rounded-[2rem] border border-emerald-200 bg-white p-8 text-center shadow-[0_30px_80px_rgba(15,23,42,0.10)] dark:border-emerald-900 dark:bg-blue-950 sm:p-12">
          <CheckCircle2 className="mx-auto h-14 w-14 text-emerald-600 dark:text-emerald-400" />
          <p className="mt-6 text-xs font-bold uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-300">Carplace</p>
          <h1 className="mt-3 text-3xl font-black tracking-[-0.03em] text-blue-950 dark:text-white">{copy.booking.successTitle}</h1>
          <p className="mt-4 leading-7 text-stone-600 dark:text-slate-300">{copy.booking.successBody}</p>
          <dl className="mt-8 grid gap-3 rounded-2xl bg-stone-50 p-5 text-start dark:bg-blue-900/30">
            <div className="flex items-center justify-between gap-4"><dt className="text-sm font-semibold text-stone-500 dark:text-slate-400">{copy.booking.reference}</dt><dd className="font-black text-blue-950 dark:text-white">{result?.bookingReference || reference}</dd></div>
            <div className="flex items-center justify-between gap-4"><dt className="text-sm font-semibold text-stone-500 dark:text-slate-400">{copy.booking.status}</dt><dd className="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-bold text-amber-900 dark:bg-amber-950 dark:text-amber-100"><Clock3 className="h-3.5 w-3.5" />{copy.booking.pending}</dd></div>
          </dl>
          <Link href={carplaceHref('/search')} className="carplace-primary-button mt-8 justify-center"><Search className="h-4 w-4" />{copy.actions.search}</Link>
        </section>
      </div>
    </main>
  )
}
