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

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

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Star, Users, Monitor, Facebook, Twitter, Youtube, MessageCircle } from "lucide-react";
import { ProgramBox } from "../../programs/(all)/_components/program-box";

interface CoachPageProps {
    params: Promise<{ id: string; locale: string }>;
}

export async function generateMetadata({ params }: CoachPageProps): Promise<Metadata> {
    const t = await getTranslations();
    const { id } = await params;

    // We try to get coach info. If there's no specific detail endpoint,
    // we might get it from the groups endpoint if it returns coach info.
    const programsData = await GET({ url: `/recorder-groups?coach=${id}` });
    const coach: Coach | undefined = programsData?.groups?.data?.[0]?.coaches?.find((c: Coach) => c.id === Number(id));

    return {
        title: coach?.my_full_name || coach?.name || t("routes.instructor-details"),
        description: coach?.about || "Instructor details and programs.",
    };
}

export default async function CoachDetailsPage({ params }: CoachPageProps) {
    const t = await getTranslations();
    const { id } = await params;

    // Fetch coach data and their programs
    // Assuming the API returns groups for this coach and we can extract coach info from them
    const programsData = await GET({ url: `/recorder-groups?coach=${id}` });
    const programs: Program[] = programsData?.groups?.data || [];
    
    // Attempt to find coach info from the programs response
    const coach: Coach | undefined = programs?.[0]?.coaches?.find((c: Coach) => c.id === Number(id));

    if (!coach && programs.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center p-20 text-center min-h-[60vh]">
                <h2 className="text-2xl font-bold text-red-600 mb-2">{t("routes.not-found-coach")}</h2>
            </div>
        );
    }

    // Default values for missing stats in provided JSON
    const studentsCount = coach?.students_count || 1; 
    const rating = coach?.reviews_avg || 0;
    const reviewsCount = coach?.reviews_count || 0;
    const categoryName = coach?.category || "";

    return (
        <main className="relative pb-20">
            {/* Header / Breadcrumb Section */}
            <div className="w-full h-80 relative overflow-hidden px-4 py-12 md:py-20 bg-[#0f172a]">
                <Image
                    src={"/images/breadcrumb-bg.png"}
                    alt="breadcrumb-bg"
                    width={1500}
                    height={240}
                    priority
                    className="object-cover object-top absolute top-0 right-0 size-full z-10 opacity-40"
                />
                <div className="relative z-20 flex flex-col items-center justify-center text-center text-white h-full box">
                    <h1 className="text-4xl md:text-5xl font-bold mb-4">
                        {t("programs.instructor_details") || "Learn More About Your Instructor"}
                    </h1>
                    <div className="flex items-center gap-2 text-gray-300 text-lg">
                        <span>{t("routes.home")}</span>
                        <span>/</span>
                        <span className="text-white font-medium">{t("routes.instructor-details")}</span>
                    </div>
                </div>
            </div>

            {/* Profile Section */}
            <section className="box px-4 -mt-16 relative z-30 m-auto">
                <div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div className="flex flex-col lg:flex-row gap-12 items-start">
                        {/* Avatar and Basic Info */}
                        <div className="flex flex-col items-center text-center w-full lg:w-1/3">
                            <div className="relative group">
                                <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
                                <Avatar className="size-64 md:size-64 relative border-4 border-white shadow-lg">
                                    <AvatarFallback className="text-5xl font-bold bg-purple-100 text-purple-700">
                                        {(coach?.my_full_name || coach?.name)?.[0]}
                                    </AvatarFallback>
                                    <AvatarImage
                                        src={coach?.avatar ? (coach.avatar.startsWith('http') ? coach.avatar : `${URL_IMAGE}/${coach.avatar}`) : (coach?.get_avatar || "")}
                                        alt={coach?.my_full_name || coach?.name || "Instructor"}
                                        className="object-cover"
                                    />
                                </Avatar>
                            </div>
                            <h2 className="mt-8 text-3xl font-bold text-gray-900">
                                {coach?.my_full_name || coach?.name}
                            </h2>
                            {/* <p className="text-purple-600 font-medium mt-2 text-lg">
                                {coach?.category || coach?.speciality }
                            </p>
                             */}
                          
                        </div>

                        {/* Stats and About */}
                        <div className="flex-1 w-full">
                            {/* Stats Grid */}
                            {/* <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                                <div className="flex items-center gap-4 p-6 bg-gray-50 rounded-xl border border-gray-100">
                                    <div className="p-3 bg-blue-100 rounded-lg text-blue-600">
                                        <Users className="size-6" />
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">{t("programs.students")}</p>
                                        <p className="text-xl font-bold text-gray-900">{studentsCount} {t("programs.students")}</p>
                                    </div>
                                </div>
                                <div className="flex items-center gap-4 p-6 bg-gray-50 rounded-xl border border-gray-100">
                                    <div className="p-3 bg-purple-100 rounded-lg text-purple-600">
                                        <Monitor className="size-6" />
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">{t("programs.category")}</p>
                                        <p className="text-xl font-bold text-gray-900 uppercase">{categoryName}</p>
                                    </div>
                                </div>
                                <div className="flex items-center gap-4 p-6 bg-gray-50 rounded-xl border border-gray-100">
                                    <div className="p-3 bg-yellow-100 rounded-lg text-yellow-600">
                                        <Star className="size-6" />
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-500">{t("programs.reviews")}</p>
                                        <div className="flex items-center gap-2">
                                            <p className="text-xl font-bold text-gray-900">{rating}/5</p>
                                            <span className="text-sm text-gray-400">({reviewsCount} {t("programs.rating")})</span>
                                        </div>
                                    </div>
                                </div>
                            </div> */}

                            {/* About Text */}
                            <div className="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                <h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                                    <span className="w-1 h-8 bg-purple-600 rounded-full"></span>
                                    {t("programs.overview")}
                                </h3>
                                <p className="whitespace-pre-line pr-4">
                                    {coach?.brief || ""}
                                </p>
                                <p className="whitespace-pre-line pr-4 text-justify">
                                    {coach?.about || ""}
                                </p>
                                 
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Programs Section */}
            <section className="box px-4 mt-20 m-auto">
                <div className="flex items-center justify-between mb-8">
                    <h3 className="text-3xl font-bold text-gray-900">
                        {t("programs.instructor_programs") || "Instructor Programs"}
                    </h3>
                </div>
                
                {programs.length > 0 ? (
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        {programs.map((program) => (
                            <ProgramBox key={program.id} program={program} />
                        ))}
                    </div>
                ) : (
                    <div className="text-center py-20 bg-gray-50 rounded-2xl border-2 border-dashed border-gray-200">
                        <p className="text-gray-500 text-lg">{t("programs.no-programs") || "No programs found for this instructor yet."}</p>
                    </div>
                )}
            </section>
        </main>
    );
}