import { getTranslations } from "next-intl/server";
import { FileText } from 'lucide-react';
import { notFound } from "next/navigation";

import { GET } from "@/utils/get";
import { AppBreadcrumb } from "@/components/widgets/breadcrumb";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params;
    const data = await GET({ url: `/pages/${slug}` }) as { data: any };
    const pageData = data?.data;

    if (!pageData) {
        return { title: 'Page Not Found' };
    }

    return {
        title: pageData.title,
        description: pageData.subtitle || pageData.title,
    };
}

export default async function DynamicPage({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params;
    
    // Using slug as ID for endpoint as per user request
    const data = await GET({ url: `/pages/${slug}` }) as { data: any };
    const pageData = data?.data;

    if (!pageData) {
        notFound();
    }

    return (
        <section>
            <AppBreadcrumb
                path={pageData.title}
                description={pageData.subtitle || ""}
            />
            <section className="mb-16 container mx-auto p-4 box">
                <div className="flex items-center gap-3 mb-6 pt-4">
                    <FileText className="size-7" />
                    <h2 className="text-2xl font-bold text-gray-800">{pageData.title}</h2>
                </div>

                {pageData.subtitle && (
                    <p className="text-gray-500 mb-8 max-w-3xl">
                        {pageData.subtitle}
                    </p>
                )}

                <div className="p-6 rounded-lg border mb-8 bg-white">
                    <div
                        className="
                            prose max-w-none text-gray-700 leading-relaxed
                            
                            [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:text-gray-800 [&_h1]:mb-6
                            
                            [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:text-gray-800 [&_h2]:mb-4 [&_h2]:pb-2 [&_h2]:border-b-2 [&_h2]:border-primary-tw-200 [&_h2]:mt-10
                            
                            [&_ul]:bg-white [&_ul]:p-6 [&_ul]:rounded-lg [&_ul]:shadow-sm [&_ul]:border [&_ul]:border-gray-200 [&_ul]:space-y-3 [&_ul]:list-none [&_ul]:my-6
                            
                            [&_li]:flex [&_li]:items-start [&_li]:gap-3
                            [&_li]:before:content-[''] [&_li]:before:size-2 [&_li]:before:mt-2.5 [&_li]:before:rounded-full [&_li]:before:bg-primary-tw-500 [&_li]:before:flex-shrink-0
                            
                            [&_a]:text-primary-tw-600 [&_a]:font-medium [&_a]:underline
                            [&_strong]:text-gray-900 [&_strong]:font-semibold
                        "
                        dangerouslySetInnerHTML={{ __html: pageData.content }}
                    />
                </div>
            </section>
        </section>
    );
}