import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import Link from 'next/link'
import { ArrowRight } from 'lucide-react'
import { ImagePlaceholder } from '@/components/shared/ImagePlaceholder'
import { getSiteConsulting } from '@/lib/server-site'

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params
  const site = await getSiteConsulting()
  const dir = site?.directions.find((d) => d.slug === slug)
  if (!dir) return {}
  return { title: `${dir.title} · 规划咨询` }
}

function MediaBlock({ src, label }: { src?: string; label: string }) {
  if (src) {
    return <div className="h-[380px] w-full rounded-[4px] bg-cover bg-center" style={{ backgroundImage: `url(${src})` }} />
  }
  return <ImagePlaceholder label={label} className="h-[380px] w-full rounded-[4px]" />
}

export default async function ConsultingDirectionPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const site = await getSiteConsulting()
  const dir = site?.directions.find((d) => d.slug === slug)
  if (!dir) notFound()

  return (
    <>
      <section className="min-h-[calc(100vh-70px)] bg-white py-10 md:min-h-[calc(100vh-106px)] md:py-12">
        <div className="mx-auto max-w-[1280px] px-6">
          <div className="mb-8 flex items-center gap-2 text-sm font-bold text-soft">
            <Link href="/consulting" className="text-muted hover:text-brand">规划咨询</Link>
            <span>/</span>
            <span>{dir.title}</span>
          </div>

          <div className="grid gap-12 lg:grid-cols-[0.92fr_1.08fr] lg:items-center">
            <div>
              <h1 className="text-[34px] font-extrabold leading-tight text-ink md:text-[46px]">{dir.title}</h1>
              <p className="mt-7 text-sm leading-8 text-text-body">{dir.description}</p>
              {dir.scenarios.length > 0 && (
                <div className="mt-6 flex flex-wrap gap-2">
                  {dir.scenarios.map((item) => (
                    <span key={item} className="rounded-[4px] bg-brand-light px-3 py-1.5 text-xs font-extrabold text-brand">{item}</span>
                  ))}
                </div>
              )}
              <Link
                href={`/consulting/apply?direction=${dir.slug}`}
                className="mt-8 inline-flex h-11 items-center justify-center gap-2 rounded-[4px] bg-brand px-6 text-sm font-extrabold text-white transition-colors hover:bg-brand-dark"
              >
                提交咨询意向
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>

            <MediaBlock src={dir.imageUrl} label={`${dir.title}服务场景：调研、诊断、方案设计与交付汇报`} />
          </div>
        </div>
      </section>
    </>
  )
}
