"use client";

import React, { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import ProfileBanner from "./ProfileBanner";
import Bio from "./Bio";
import { useGetSingleUser } from "@/src/utils/hooks/useGetSingleUser";
import { useAppDispatch, useAppSelector } from "@/src/redux/hook";
import { setOtherUsersProfile } from "@/src/redux/profileSlice";
import { Card } from "@/src/components/reusables/ui/card";
import AboutMe from "@/src/components/user/profilepage/AboutMe";
import HobbySkeleton from "@/src/components/reusables/ui/HobbySkeleton";
import InterestComponent from "@/src/components/reusables/ui/InterestComponent";
import HobbyComponent from "@/src/components/reusables/ui/HobbyComponent";
import ProfileBannerSkeleton from "./ProfileBannerSkeleton";
import { useGetCompatibility } from "@/src/utils/hooks/useGetCompatibility";

const Page = () => {
  const dispatch = useAppDispatch();
  const params = useParams();
  const idParam = params["id"];
  const targetedId = typeof idParam === "string" ? Number(idParam) : NaN;

  const { data: user, isLoading, error } = useGetSingleUser(targetedId);
  const { data: compatibility } = useGetCompatibility(targetedId);

const [compatibilityData, setCompatibilityData] = useState<any>({});


  useEffect(() => {
    const fetchedData = compatibility?.payload?.matches[0]?.matched_criteria;
    if (fetchedData) {
      setCompatibilityData(fetchedData);
    }
  }, [compatibility]);

  console.log({compatibilityData})
  const otherUsersProfile = useAppSelector(
    (state) => state.profile.otherUsersProfile
  );

  useEffect(() => {
    dispatch(setOtherUsersProfile(user?.payload));
  }, [user]);


  return (
    <div className="min-h-screen mx-auto max-w-[90%] relative lg:-mt-[50px] mt-4 lg:px-24 overflow-x-hidden">
      
      {isLoading ? <ProfileBannerSkeleton /> : <ProfileBanner compatibility={compatibility} />}
      <Bio compatibilityData={compatibilityData}/>

      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 py-6">
        <Card className="p-4 shadow-sm h-full">
          <div className="flex items-start gap-8 flex-col justify-between mb-4">
            <h2 className="font-semibold">My Hobbies</h2>

            <div className="grid  xl:grid-cols-4 grid-cols-3 gap-2">
              {isLoading
                ? Array.from({ length: 6 }).map((_, index) => (
                    <HobbySkeleton key={index} />
                  ))
                : otherUsersProfile?.hobbies?.map((hobbie, index) => (
                    <HobbyComponent key={index} hobbie={hobbie} />
                  ))}
            </div>
          </div>
        </Card>

        <Card className="p-4 shadow-sm h-full">
          <div className="flex items-start gap-8 flex-col justify-between mb-4">
            <h2 className="font-semibold">My Interests</h2>

            <div className="grid xl:grid-cols-4 grid-cols-3 gap-2">
              {isLoading
                ? Array.from({ length: 6 }).map((_, index) => (
                    <HobbySkeleton key={index} />
                  ))
                : otherUsersProfile?.interest?.map((interest, index) => (
                    <InterestComponent key={index} interest={interest} />
                  ))}
            </div>
          </div>
        </Card>

        <Card className="p-4 shadow-sm h-full">
          <h2 className="font-semibold mb-4">About Me</h2>

          <div className="flex flex-col gap-y-3">
            {otherUsersProfile?.about_me && (
              <AboutMe aboutMe={otherUsersProfile?.about_me} />
            )}
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Page;
