import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { KhuCongNghiepDetailClient } from '@/components/khu-cong-nghiep/khu-cong-nghiep-detail-client';
import { fetchIndustrialParkBySlug } from '@/lib/khu-cong-nghiep-server';

interface PageProps {
  params: Promise<{ slug: string; locale: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const park = await fetchIndustrialParkBySlug(slug);
  if (!park) return { title: 'Không tìm thấy khu công nghiệp' };

  const description = park.description?.slice(0, 160) ??
    `${park.name} — KCN tại ${park.province}, diện tích ${park.totalAreaHa} ha, tỷ lệ lấp đầy ${park.occupancyRate}%`;

  return {
    title: `${park.name} — Khu Công Nghiệp ${park.province}`,
    description,
    openGraph: {
      title: park.name,
      description,
      images: park.media
        ?.filter((m) => m.type === 'image')
        .slice(0, 1)
        .map((m) => ({ url: m.url })) ?? [],
    },
  };
}

export default async function KhuCongNghiepDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const park = await fetchIndustrialParkBySlug(slug);

  if (!park) {
    notFound();
  }

  return <KhuCongNghiepDetailClient park={park} />;
}