import { getTranslations, setRequestLocale } from 'next-intl/server'
import { mockDb } from '@/lib/mockDb'
import { Link } from '@/i18n/routing'
import { notFound } from 'next/navigation'
import { renderMarkdownToHtml } from '@/lib/markdown'
import ListingCard from '@/components/ListingCard'
import { ArrowLeft, Sparkles } from 'lucide-react'
import type { Metadata } from 'next'
import { basicMetadata } from '@/lib/seo'

interface Props {
  params: Promise<{ locale: string; id: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale, id } = await params
  const itinerary = await mockDb.getItineraryById(id)
  if (!itinerary) return {}

  const t = await getTranslations({ locale, namespace: 'planner' })
  const p = itinerary.params as { days?: number }
  const title = `${p.days ?? ''}${locale === 'tr' ? ' günlük' : locale === 'ru' ? '-дневный' : '-day'} ${t('title')} — Marmaris Local`
  const description = itinerary.content.replace(/[#*_>[\]()]/g, '').slice(0, 150)

  return basicMetadata(title, description, locale)
}

export default async function PlanResultPage({ params }: Props) {
  const { locale, id } = await params
  setRequestLocale(locale)

  const itinerary = await mockDb.getItineraryById(id)
  if (!itinerary) {
    notFound()
  }

  const t = await getTranslations('planner')
  const htmlContent = renderMarkdownToHtml(itinerary.content)

  const relatedListings: any[] = []
  for (const listingId of itinerary.listingIds.slice(0, 6)) {
    const listing = await mockDb.getListingById(listingId)
    if (listing) relatedListings.push(listing)
  }

  return (
    <div className="bg-stone min-h-screen py-10 px-4 sm:px-6 lg:px-8 font-sans">
      <div className="max-w-3xl mx-auto space-y-8">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <Link
            href="/plan-olustur"
            className="inline-flex items-center gap-1.5 px-4 py-2 border border-pine/10 rounded-xl text-xs font-mono font-bold text-pine hover:bg-paper transition"
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            {t('generate')}
          </Link>
        </div>

        <article className="bg-paper border border-pine/8 rounded-3xl overflow-hidden shadow-sm p-6 sm:p-10 space-y-6">
          <div className="flex items-center gap-2 text-xs font-mono uppercase tracking-wider text-turquoise">
            <Sparkles className="w-4 h-4" />
            {t('title')}
          </div>

          <div
            className="markdown-content space-y-4"
            dangerouslySetInnerHTML={{ __html: htmlContent }}
          />
        </article>

        {relatedListings.length > 0 && (
          <div className="space-y-6 pt-6">
            <h3 className="text-xl font-heading font-extrabold text-pine lowercase border-b border-dashed border-pine/8 pb-3">
              {t('placesInPlan')}
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {relatedListings.map((listing) => (
                <ListingCard key={listing.id} listing={listing} />
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}