import { Category } from "@/types/models";
import { GET } from "@/utils/get";

import { getTranslations } from "next-intl/server";
import { ProgramsFilter } from "./_components/filter";
import { ProgramsContainer } from "./_components/container";

export const generateMetadata = async () => {
    const t = await getTranslations();
    return {
        title: t('routes.programs') || "programs"
    }
};

export default async function TrainingPrograms({ searchParams }: { searchParams: Promise<Record<any, any>> }) {
    const t = await getTranslations();
    const params = await searchParams;
    const fetchParams = { ...params };
    // Force page=1 if no page is specified to ensure the API returns full pagination metadata (total, last_page, etc.)
    if (!fetchParams.page) fetchParams.page = "1";

    const programs = await GET({ url: "/recorder-groups", searchParams: fetchParams, revalidate: 0 });

    // Show empty state instead of hard error — allow filter sidebar to still render
    const categories: Category[] = programs?.categories ?? [];

    return (
        <main className="grid md:grid-cols-3 gap-8 min-h-dvh">
            <div className="hidden md:block">
                <ProgramsFilter categories={categories} params={params} />
            </div>
            {
                !programs ? (
                    <div className="flex flex-col items-center justify-center p-20 text-center w-full md:col-span-2">
                        <h2 className="text-2xl font-bold text-red-600 mb-2">{t('custom.failed')}</h2>
                        <p className="text-gray-600">{t('custom.try-again')}</p>
                        {/* <p className="text-xs text-gray-400 mt-2">
                            endpoint: /recorder-groups
                        </p> */}
                    </div>
                ) : (
                    <ProgramsContainer programs={programs} />
                )
            }
        </main>
    )
}