import { GET } from "@/utils/get";
import { getTranslations } from "next-intl/server";
import { Package2 } from "lucide-react";
import { UserPackageCard, UserPackage } from "./_components/user-package-card";

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

export default async function DashboardPackagesPage() {
    const t = await getTranslations();

    // GET /user/packages — requires auth token (context: "dashboard" sends it)
    const data = await GET({ url: "/user/packages", context: "dashboard" });

    // API returns a plain array
    const packages: UserPackage[] = Array.isArray(data) ? data : (data?.packages ?? data?.data ?? []);

    return (
        <main className="p-6 space-y-8 bg-white min-h-dvh">
            {/* Header */}
            <div className="flex items-center gap-3">
                <div className="flex items-center justify-center size-10 rounded-xl bg-purple-100 text-purple-600">
                    <Package2 className="size-5" />
                </div>
                <div>
                    <h1 className="text-2xl font-bold text-gray-900">{t("packages.my_packages")}</h1>
                    <p className="text-gray-500 text-sm">{t("packages.subtitle")}</p>
                </div>
                {packages.length > 0 && (
                    <span className="ms-auto inline-flex items-center gap-1 bg-purple-50 text-purple-700 border border-purple-200 rounded-full px-3 py-1 text-sm font-semibold">
                        {packages.length} {t("packages.found")}
                    </span>
                )}
            </div>

            {/* Grid */}
            <section className={`grid gap-6 ${packages.length > 0 ? "md:grid-cols-2 lg:grid-cols-3" : ""}`}>
                {packages.length > 0 ? (
                    packages.map((pkg) => (
                        <UserPackageCard key={pkg.id} pkg={pkg} />
                    ))
                ) : (
                    <div className="col-span-full grid place-items-center min-h-[50dvh]">
                        <div className="text-center space-y-3">
                            <div className="size-20 rounded-2xl bg-purple-50 flex items-center justify-center mx-auto">
                                <Package2 className="size-10 text-purple-300" />
                            </div>
                            <p className="text-gray-600 font-semibold text-lg">{t("packages.no_packages")}</p>
                            <p className="text-gray-400 text-sm">{t("packages.subtitle")}</p>
                        </div>
                    </div>
                )}
            </section>
        </main>
    );
}