import Image from "next/image";
import { User, UserBadge } from "@/types/models";
import { GET } from "@/utils/get";
import { getTranslations } from "next-intl/server";

import {
    BookmarkCheck,
    Facebook,
    Instagram,
    Linkedin,
    NotepadText,
    PlusIcon,
    Star,
    TvMinimalPlay,
    Twitter
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

import { StudentDetailsTabs } from "./_tabs";

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

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

    const [user, cDT, pDT, bDT] = await Promise.all([
        GET({ url: "/user", context: "dashboard" }),
        GET({ url: "/user/certifications/get/all", context: "dashboard" }),
        GET({ url: "/user/groups/records", context: "dashboard" }),
        GET({ url: "/user/badges", context: "dashboard" }),
    ]) as [User, { data: any[] }, any[], { badges: UserBadge[], badges_count: number }]

    if (!user) {
        return (
            <div className="flex flex-col items-center justify-center p-20 text-center">
                <h2 className="text-2xl text-red-600 mb-2">{t('profile.failed_to_load')}</h2>
                <p className="text-gray-600">{t('profile.check_connection')}</p>
            </div>
        )
    }

    const certificates = cDT?.data || [];
    const programs = pDT || [];
    const badges = bDT?.badges || [];

    const details = [
        {
            icon: Star,
            title: t("programs.reviews"),
            data: "0"
        },
        {
            icon: TvMinimalPlay,
            title: t("routes.programs"),
            data: programs?.length || "0"
        },
        {
            icon: NotepadText,
            title: t("profile.blogs"),
            data: user?.blogs?.length || "0"
        },
        {
            icon: BookmarkCheck,
            title: t("routes.certificates"),
            data: certificates?.length || "0"
        },
    ];

    const socialLinks = [
        {
            icon: Facebook,
            data: ""
        },
        {
            icon: Twitter,
            data: ""
        },
        {
            icon: Linkedin,
            data: ""
        },
        {
            icon: Instagram,
            data: ""
        },
        {
            icon: PlusIcon,
            data: ""
        },
    ];

    return (
        <main className="relative">
            <section>
                <Image
                    className="w-full max-h-96"
                    src={'/images/profile-cover.jpg'}
                    alt={user?.username}
                    width={1500}
                    height={600}
                    priority
                />
                <section className="grid place-items-center relative w-full">
                    <div className="w-11/12 md:w-9/12 bg-white h-fit absolute -top-32 rounded-md grid md:grid-cols-10 p-6 gap-6">

                        {/* user details */}
                        <div className="md:col-span-6 flex gap-4 max-md:flex-col md:items-center">
                            {/* image - follwing -followers */}
                            <div className="space-y-6 grid place-items-center">
                                <Avatar className="size-40 !rounded-md">
                                    <AvatarFallback className="uppercase !rounded bg-primary-tw-600 text-white">
                                        {user?.first_name?.[0]}{user?.fourth_name?.[0]}
                                    </AvatarFallback>
                                    <AvatarImage
                                        src={user?.avatar}
                                        alt={user?.my_full_name}
                                    />
                                </Avatar>
                                {/* <p className="text-sm text-gray-700">
                                    0 {t("profile.follower")} | 0 {t("profile.following")}
                                </p> */}
                            </div>

                            {/* name - socail link */}
                            <div className="space-y-4">

                                {/* name */}
                                <p className="text-lg">
                                    {user?.my_full_name}
                                </p>

                                {/* social links */}
                                {/* <div className="flex items-center gap-2 bg-blue-100 flex-wrap rounded-3xl py-2 px-4">
                                    {
                                        socialLinks?.map((social, i) => (
                                            <Button key={i} className="bg-white size-10 grid place-items-center rounded-full">
                                                <social.icon className="size-5 text-blue-600" />
                                            </Button>
                                        ))
                                    }
                                </div> */}

                            </div>
                        </div>

                        {/* details */}
                        <div className="md:col-span-4 space-y-4 p-4 rounded-md bg-gradient-to-br from-blue-400 to-primary-tw-700">
                            {
                                details.map((item, i) => (
                                    <div key={i} className="flex items-center gap-8 text-white">
                                        <span>
                                            <item.icon className="size-5" />
                                        </span>
                                        <p>
                                            {item?.data} {item?.title}
                                        </p>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                </section>
            </section>

            <section className="mt-[28rem] md:mt-40 grid place-items-center relative w-full">
                <section className="w-11/12 md:w-9/12">
                    <StudentDetailsTabs user={user} programs={programs} badges={badges} />
                </section>
            </section>
        </main>
    )
}