'use client'
import Image from "next/image";
import Link from "next/link";
import ProfileImage from "@/assets/images/profile-logo.webp";
import { FacebookSVG, GoogleSVG, InstagramSVG, TiktokSVG } from "../Common/SVGs/CommonSVG";
import { useSelector } from "react-redux";
import { AppStore } from "@/lib/store";
import ImageWithFallback from "../Common/ImageWithFallback";
import moment from "moment";
import InfluencerDetail from "../Common/InfluencerDetail";
import { formatNumber } from "@/Utils/Other/FormateNumbers";
import { useTranslation } from "@/Utils/Hooks/useTranslate";

const ProfileComponent = () => {
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const { translations } = useTranslation();

    return (
        <>
            {userDetails?.role == "influencer" ?
                <InfluencerDetail slug={userDetails?.slug} /> :
                <div className="border-lightGray 2xl:pb-7 pb-4">
                    <div className="box border border-lightGray rounded-2xl p-3 md:p-6 bg-gradient-to-br from-primary to-secondary">
                        <div className="flex justify-between flex-col md:flex-row gap-y-2 md:items-center">
                            <div className="md:mr-3 flex flex-col md:flex-row justify-start gap-3">
                                <ImageWithFallback src={userDetails?.image} alt='Logo' className="rounded-full min-w-16 w-16 h-16 bg-cover" width={64} height={64} />
                                <div className="text-left">
                                    <div className="text-lg md:text-2xl font-semibold text-white mb-1">{userDetails?.first_name} {userDetails?.last_name}</div>
                                    <div className="flex text-white gap-1 md:gap-3 justify-start md:justify-start items-center">
                                        <span className="text-sm">{userDetails?.country}</span>
                                        <span className="bg-white w-1.5 h-1.5 rounded-full"></span>
                                        <span className="text-sm">{userDetails?.business_type}</span>
                                        <span className="bg-white w-1.5 h-1.5 rounded-full"></span>
                                        <span className="text-sm">{userDetails?.working_people} {translations?.peopleWork}</span>
                                    </div>
                                </div>
                            </div>

                            <Link href={`/${userDetails?.role}/profile/profile-settings`} className="flex items-center border border-transparent rounded-xl py-3.5 px-8 text-sm font-medium focus-visible:outline-none text-white bg-black text-center justify-center">{translations?.updateProfile}</Link>
                        </div>
                    </div>
                    <div className="grid grid-cols-12 mt-9 gap-5">
                        <div className="mt-6 md:mt-0 2xl:col-span-10 md:col-span-8 lg:col-span-9 col-span-12 max-md:order-1">
                            <div className="md:mr-9">
                                <h2 className="text-lg leading-6 font-bold">{translations?.brandDescription}</h2>
                                <div className="mt-2">
                                    <p className="text-sm">{userDetails?.about_me}</p>
                                </div>
                            </div>
                            <div className="border-b border-lightGray mt-12">
                                <p className="text-[#B1B1B1] text-xs mb-4">{translations?.joinOn} {moment(userDetails?.created_at).format('MMM DD')}</p>
                            </div>
                        </div>
                        <div className="w-full 2xl:col-span-2 md:col-span-4 lg:col-span-3 col-span-12 box border border-lightGray rounded-2xl relative ">
                            <div className="p-6">
                                <div className="mb-5">
                                    <h3 className="text-base font-semibold leading-5">{userDetails?.campaignCount?.[0]?.count}</h3>
                                    <p className="text-sm font-normal leading-5">{translations?.campaignCompleted}</p>
                                </div>
                                <div className="">
                                    <h3 className="text-base font-semibold leading-5">${formatNumber(userDetails?.campaignCount?.[0]?.total_budget)}</h3>
                                    <p className="text-sm font-normal leading-5">{translations?.totalAmountSpent}</p>
                                </div>
                            </div>
                            <div className="border-t border-lightGray p-6">
                                <button type="button" className="border border-transparent rounded-lg py-1.5 px-3 text-xs font-medium focus-visible:outline-none bg-gradient-to-br from-secondary to-primary text-white capitalize">{userDetails?.subscription?.[0]?.plan?.plan_type} {translations?.planActive}</button>
                                <div className="2xl:text-3xl text-2xl text-black leading-tight font-bold my-2">${userDetails?.subscription?.[0]?.plan?.interval == 'year' ? userDetails?.subscription?.[0]?.plan?.year_amount : userDetails?.subscription?.[0]?.plan?.month_amount}<span className="text-gray text-lg text-opacity-40 capitalize">/{userDetails?.subscription?.[0]?.plan?.interval}</span></div>
                                <p className="text-xs text-gray font-medium leading-normal">{translations?.endAt} {moment(userDetails?.subscription?.[0]?.end_date).format('MMM DD, YYYY')}</p>
                            </div>
                        </div>
                    </div>

                </div>

            }
        </>
    );
}

export default ProfileComponent;