import Image from "next/image";
import { getLocale, getTranslations } from "next-intl/server";
import { Metadata } from "next";

import { GET } from "@/utils/get";
import { Package, PackageGroup } from "@/types/models";
import { URL_IMAGE } from "@/utils/url";

import { PackageDetailAside } from "./_components/aside";
import { PackageCourseCard } from "./_components/course-card";
import { Link } from "@/i18n/navigation";
import { ArrowRight, CalendarRange, BookOpen, Tag } from "lucide-react";

export async function generateMetadata({
    params,
}: {
    params: Promise<{ id: string }>;
}): Promise<Metadata> {
    const { id } = await params;
    const t = await getTranslations();
    const locale = await getLocale();
    const data = await GET({ url: `/packages/${id}` });
    const pkg: Package = data?.package;

    return {
        title: pkg?.name || t("routes.packages"),
        description: pkg?.description || t("packages.subtitle"),
        openGraph: {
            title: pkg?.name,
            images: pkg?.image ? [{ url: `${URL_IMAGE}/${pkg.image}` }] : [],
        },
    };
}

export default async function PackageDetailPage({
    params,
}: {
    params: Promise<{ id: string }>;
}) {
    const { id } = await params;
    const t = await getTranslations();

    const [data, offersData] = await Promise.all([
        GET({ url: `/packages/${id}` }),
        GET({ url: "/offers/packages" })
    ]);

    if (!data) {
        return (
            <div className="flex flex-col items-center justify-center p-20 text-center w-full">
                <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>
            </div>
        );
    }

    const pkg: Package = data?.package;
    const groups: PackageGroup[] = data?.groups ?? [];

    // Check if this package has an offer
    const offer = offersData?.packages?.data?.find((p: any) => Number(p.id) === Number(id));
    if (offer && pkg) {
        pkg.price = String(offer.price);
        pkg.discount_amount = offer.discount_amount;
        pkg.final_price = offer.final_price;
        pkg.promotion = offer.promotion;
    }

    const monthLabel = pkg?.month_number === 1 ? t("packages.month") : t("packages.months");

    return (
        <main className="relative mb-12">
            {/* Hero banner */}
            <div className="w-full relative overflow-hidden bg-gradient-to-br from-purple-900 via-indigo-900 to-purple-800 py-20 px-4">
                {/* {pkg?.image && (
                    <Image
                        src={`https://tr.ivorytraining.com/${pkg.image}`}
                        alt={pkg.name}
                        fill
                        className="object-cover opacity-20"
                        
                    />
                )} */}
                <div className="relative z-10 max-w-4xl mx-auto text-white space-y-4">
                    {/* Breadcrumb */}
                    <nav className="flex items-center gap-2 text-purple-300 text-sm mb-4">
                        <Link href="/programs/packages" className="hover:text-white transition-colors">
                            {t("packages.title")}
                        </Link>
                        <ArrowRight className="size-4 rtl:rotate-180" />
                        <span className="text-white">{pkg?.name}</span>
                    </nav>

                    {pkg?.category && (
                        <div className="inline-flex items-center gap-1.5 bg-purple-500/30 backdrop-blur-sm text-purple-200 border border-purple-400/30 rounded-full px-3 py-1 text-sm font-medium">
                            <Tag className="size-3.5" />
                            {pkg.category.name}
                        </div>
                    )}

                    <h1 className="text-3xl md:text-4xl font-extrabold leading-tight">
                        {pkg?.name}
                    </h1>

                    <p className="text-purple-200 text-base leading-relaxed max-w-2xl line-clamp-3">
                        {pkg?.description}
                    </p>

                    <div className="flex flex-wrap gap-4 pt-2 text-sm">
                        <span className="flex items-center gap-1.5 text-purple-200">
                            <CalendarRange className="size-4" />
                            {pkg?.month_number} {monthLabel}
                        </span>
                        <span className="flex items-center gap-1.5 text-purple-200">
                            <BookOpen className="size-4" />
                            {groups.length} {t("packages.courses_count")}
                        </span>
                    </div>
                </div>
            </div>

            {/* Main content */}
            <section className="max-w-6xl mx-auto px-4 pt-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
                {/* Courses list */}
                <div className="lg:col-span-2 space-y-6">
                    <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
                        <BookOpen className="size-5 text-purple-600" />
                        {t("packages.included_courses")}
                    </h2>

                    {groups.length > 0 ? (
                        <div className="grid gap-5">
                            {groups.map((group) => (
                                <PackageCourseCard key={group.id} group={group} />
                            ))}
                        </div>
                    ) : (
                        <div className="grid place-items-center min-h-[30dvh]">
                            <p className="text-gray-500 font-semibold">{t("custom.no results")}</p>
                        </div>
                    )}
                </div>

                {/* Aside / CTA */}
                <div className="lg:col-span-1">
                    <PackageDetailAside pkg={pkg} />
                </div>
            </section>
        </main>
    );
}