"use client";
import { Category, Program } from "@/types/models";
import { useTranslations } from "next-intl";
import { useRouter, usePathname } from "@/i18n/navigation";
import { useSearchParams } from "next/navigation";

import { Menu, ChevronLeft, ChevronRight } from "lucide-react";
import { ProgramBox } from "./program-box";
import { ProgramsFilter } from "./filter";

import { Button } from "@/components/ui/button";
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from "@/components/ui/sheet";

interface Props {
    programs: any;
}

export function ProgramsContainer({ programs }: Props) {
    const t = useTranslations();
    const router = useRouter();
    const pathname = usePathname();
    const searchParams = useSearchParams();

    // Handle both paginated (groups.data) and plain array (groups) API responses
    const isPaginated = !!programs?.groups?.data;
    const groups: Program[] = isPaginated
        ? (programs?.groups?.data ?? [])
        : (Array.isArray(programs?.groups) ? programs?.groups : []);

    const categories: Category[] = programs?.categories ?? [];

    // Pagination meta — only meaningful when API returns paginated response
    const currentPage: number = (programs?.groups?.current_page ?? programs?.current_page) ?? 1;
    const lastPage: number = (programs?.groups?.last_page ?? programs?.last_page) ?? 1;
    // `total`: prioritize all possible API count fields before falling back to array length
    const total: number = (
        programs?.groups?.total ?? 
        programs?.total ?? 
        programs?.groups?.count ?? 
        programs?.count ?? 
        groups.length
    );


    const goToPage = (page: number) => {
        const params = new URLSearchParams(searchParams.toString());
        params.set("page", String(page));
        router.push(`${pathname}?${params.toString().replace(/%2C/g, ",")}`, { scroll: true });
    };

    // Generate visible page numbers (show max 5 around current)
    const getPageNumbers = () => {
        const pages: (number | "...")[] = [];
        if (lastPage <= 7) {
            for (let i = 1; i <= lastPage; i++) pages.push(i);
        } else {
            pages.push(1);
            if (currentPage > 3) pages.push("...");
            for (let i = Math.max(2, currentPage - 1); i <= Math.min(lastPage - 1, currentPage + 1); i++) {
                pages.push(i);
            }
            if (currentPage < lastPage - 2) pages.push("...");
            pages.push(lastPage);
        }
        return pages;
    };

    return (
        <section className="md:col-span-2 space-y-6">

            {/* ── Top bar ── */}
            <div className="flex items-center justify-between">
                <h2 className="font-semibold text-gray-700">
                    {total} {t("programs.program found")}
                </h2>
                {/* Mobile filter trigger */}
                <Sheet>
                    <SheetTrigger asChild className="block md:hidden">
                        <Button variant={"secondary"} size={"icon-sm"}>
                            <Menu  className="w-full"/>
                        </Button>
                    </SheetTrigger>
                    <SheetContent className="overflow-y-scroll pb-4">
                        <SheetHeader>
                            <SheetTitle />
                            <SheetDescription />
                        </SheetHeader>
                        <div className="p-2">
                            <ProgramsFilter categories={categories} />
                        </div>
                    </SheetContent>
                </Sheet>
            </div>

            {/* ── Programs Grid ── */}
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                {groups?.length ? (
                    groups.map((group, index) => (
                        <ProgramBox program={group} key={index} />
                    ))
                ) : (
                    <div className="md:col-span-3 grid place-items-center min-h-[30dvh]">
                        <p className="text-black text-lg font-semibold">
                            {t("custom.no results")}
                        </p>
                    </div>
                )}
            </div>

            {/* ── Pagination ── */}
            {lastPage > 1 && (
                <div className="flex items-center justify-center gap-1 pt-4 pb-2">
                    {/* Prev */}
                    <Button
                        variant="outline"
                        size="icon-sm"
                        onClick={() => goToPage(currentPage - 1)}
                        disabled={currentPage === 1}
                        aria-label="Previous page"
                    >
                        <ChevronLeft className="size-4 rtl:rotate-180" />
                    </Button>

                    {/* Page numbers */}
                    {getPageNumbers().map((page, idx) =>
                        page === "..." ? (
                            <span key={`dots-${idx}`} className="px-2 text-gray-400 select-none">
                                ...
                            </span>
                        ) : (
                            <Button
                                key={page}
                                variant={page === currentPage ? "default" : "outline"}
                                size="icon-sm"
                                onClick={() => goToPage(page as number)}
                                className={page === currentPage ? "bg-primary-tw-600 text-white" : ""}
                                aria-label={`Page ${page}`}
                                aria-current={page === currentPage ? "page" : undefined}
                            >
                                {page}
                            </Button>
                        )
                    )}

                    {/* Next */}
                    <Button
                        variant="outline"
                        size="icon-sm"
                        onClick={() => goToPage(currentPage + 1)}
                        disabled={currentPage === lastPage}
                        aria-label="Next page"
                    >
                        <ChevronRight className="size-4 rtl:rotate-180" />
                    </Button>
                </div>
            )}
        </section>
    );
}