"use client";

import { Card } from "@/components/ui/card";
import PhotoGallery from "@/src/components/reusables/ui/photoGallery";
import { motion, AnimatePresence } from "framer-motion";
import { FiChevronDown, FiChevronUp } from "react-icons/fi";
import { useAppDispatch, useAppSelector } from "@/src/redux/hook";
import {
  setHobbies,
  setInterests,
  setLanguages,
} from "@/src/redux/profileSlice";
import { useGetHobbiesData } from "@/src/utils/hooks/useGetHobbies";
import Image from "next/image";
import { usePathname } from "next/navigation";
import React, { useEffect, useState } from "react";
import { RiArrowDropDownLine, RiArrowDropRightLine } from "react-icons/ri";

const Bio = (compatibilityData: any) => {
  const [viewMode, setViewMode] = useState(true);

  const dispatch = useAppDispatch();

  const pathname = usePathname();

  const otherUsersProfile = useAppSelector(
    (state) => state.profile.otherUsersProfile
  );
  const hobbies = useAppSelector((state) => state.profile.hobbies);
  const interests = useAppSelector((state) => state.profile.interests);
  const languages = useAppSelector((state) => state.profile.languages);

    const [openKey, setOpenKey] = useState<string | null>(null);

    const toggleSection = (key: string) => {
    setOpenKey(openKey === key ? null : key);
  };

  const {
    data: hobbiesData,
    isLoading: hobbiesLoading,
    error: hobbiesError,
    refetch: refetchHobbiesData,
  } = useGetHobbiesData();

  useEffect(() => {
    if (hobbiesData) {
      dispatch(setHobbies(hobbiesData?.payload?.hobbies));
      dispatch(setInterests(hobbiesData?.payload?.interest));
      dispatch(setLanguages(hobbiesData?.payload?.language_spoken));
    }
  }, [hobbiesData, dispatch]);

  const areaOfCompatibility: string[] = [];

  // Compare hobbies
  if (otherUsersProfile?.hobbies) {
    const matchedHobbies = hobbies.filter((hobby) =>
      otherUsersProfile.hobbies.includes(hobby)
    );
    areaOfCompatibility.push(...matchedHobbies);
  }

  // Compare interests
  if (otherUsersProfile?.interest) {
    const matchedInterests = interests.filter((interest) =>
      otherUsersProfile.interest.includes(interest)
    );
    areaOfCompatibility.push(...matchedInterests);
  }

  // Compare languages
  if (otherUsersProfile?.language_spoken) {
    const matchedLanguages = languages.filter((language) =>
      otherUsersProfile.language_spoken.includes(language)
    );
    areaOfCompatibility.push(...matchedLanguages);
  }

  console.log({compatibilityData})

  return (
    <div
      className={`mt-10 ${viewMode ? "grid md:grid-cols-2 gap-4" : ""} md:min-h-[196px] lg:mb-6`}
    >
      {/* Bio Section and Photo Gallery */}
      <div
        className={`${!viewMode ? "lg:w-[486px] md:w-3/4" : ""} h-full flex flex-col xl:justify-between md:justify-around md:gap-8 gap-y-4`}
      >
        {/* Bio Section */}
        <Card className="p-4 shadow-sm w-full rounded-[8px] min-h-[120px]">
          <div className="flex items-start">
            <p className="text-sm">
              {otherUsersProfile?.short_bio || "No Bio"}
            </p>
          </div>
        </Card>

        {/* Photo Gallery */}
        <Card className="px-2 py-4 shadow-sm rounded-[8px] flex items-center flex-row md:gap-6 gap-4 flex-wrap">
          {otherUsersProfile?.photo && (
            <div className="w-[60px] h-[60px] relative rounded-[8px]">
              <Image
                fill
                src={otherUsersProfile?.photo}
                alt="photo"
                className="rounded-[8px]"
              />
            </div>
          )}
          {otherUsersProfile?.photo_1 && (
            <div className="w-[60px] h-[60px] relative rounded-[8px]">
              <Image
                fill
                src={otherUsersProfile?.photo_1}
                alt="photo"
                className="rounded-[8px]"
              />
            </div>
          )}
          {otherUsersProfile?.photo_2 && (
            <div className="w-[60px] h-[60px] relative rounded-[8px]">
              <Image
                fill
                src={otherUsersProfile?.photo_2}
                alt="photo"
                className="rounded-[8px]"
              />
            </div>
          )}
          {otherUsersProfile?.photo_3 && (
            <div className="w-[60px] h-[60px] relative rounded-[8px]">
              <Image
                fill
                src={otherUsersProfile?.photo_3}
                alt="photo"
                className="rounded-[8px]"
              />
            </div>
          )}
          {otherUsersProfile?.photo_4 && (
            <div className="w-[60px] h-[60px] relative rounded-[8px]">
              <Image
                fill
                src={otherUsersProfile?.photo_4}
                alt="photo"
                className="rounded-[8px]"
              />
            </div>
          )}
        </Card>
      </div>

      {/* Areas Of Compatibility and Contact Details Section - Only in viewMode */}

      <div className="flex flex-col md:flex-row gap-4 h-full bg-white shadow-sm rounded-md">
        <Card className="p-4 flex-1 shadow-none border-none">
      <h2 className="font-semibold mb-4">Areas Of Compatibility</h2>

      <div className="flex items-center gap-4 flex-wrap">
        {Object.entries(compatibilityData?.compatibilityData).map(([key, values]) => (
          <div
            key={key}
            className=""
          >
            <div
              onClick={() => toggleSection(key)}
              className="flex gap-3 items-center cursor-pointer font-medium text-[12px] text-gray-800"
            >
              {openKey === key ? <RiArrowDropDownLine className="text-red-500" size={20} /> : <RiArrowDropRightLine size={20} className="text-red-500"  />}
              <span className="capitalize">{key.replace(/_/g, " ")}</span>
              
            </div>

            <AnimatePresence>
              {openKey === key && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.3 }}
                  className="overflow-hidden mt-2 text-[12px] text-gray-600 capitalize"
                >
                  <ul className="list-disc list-inside pl-2">
                    {Array.isArray(values) && values.map((item, idx) => (
                      <li key={idx}>{item}</li>
                    ))}
                  </ul>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        ))}
      </div>
    </Card>

        {otherUsersProfile?.is_mutual && (
          <Card className="p-4 shadow-none border-none flex-1">
            <h2 className="font-semibold mb-4">Contact Details</h2>
            <div className="flex flex-col gap-y-2 text-[12px]">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-red-500"></div>
                <span>Email: {otherUsersProfile?.contact_details?.email}</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-red-500"></div>
                <span>
                  Mobile number: {otherUsersProfile?.contact_details?.phone}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-red-500"></div>
                <span>
                  Physical address:{" "}
                  {otherUsersProfile?.contact_details?.address?.lga},{" "}
                  {otherUsersProfile?.contact_details?.address?.state}{" "}
                </span>
              </div>
              {otherUsersProfile?.has_address_verified && (
                <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-red-500"></div>
                <span>
                  Verified address:{" "}
                  {
                    otherUsersProfile?.verified_address?.entity?.address_components?.administrative_area_level_1
                  },
                  {
                    otherUsersProfile?.verified_address?.entity?.address_components?.country
                  }
                </span>
              </div>)}
            </div>
          </Card>
        )}
      </div>
    </div>
  );
};

export default Bio;
