"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Badge } from "@/src/components/reusables/ui/badge";
import { HeartIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Profile } from "@/src/utils/types";
import { usePathname, useRouter } from "next/navigation";
import { usersData } from "@/src/utils/dummy-data/profileData";

interface ProfileCardProps {
  profile: Profile;
}

export default function ProfileCard({ profile }: ProfileCardProps) {
  const [liked, setLiked] = useState(false);
  const [currentPath, setCurrentPath] = useState<string>("");

  const pathname = usePathname();
  const router = useRouter();

  const viewUserProfile = () => {
    if (pathname.includes("/user/favourites")) {
      router.push(`/user/favourites/${profile.id}`);
    } else if (pathname.includes("/user/mutuals")) {
      router.push(`/user/mutuals/${profile.id}`);
    } else if (pathname.includes("/user/subscribed")) {
      router.push(`/user/subscribed/${profile.id}`);
    } else {
      router.push(`/user/interested-in-me/${profile.id}`);
    }
  };

  const getUserProfile = () => {
    return usersData?.find((item) => item.id === profile.id);
  };

  const profileData = getUserProfile();

  const formattedData = {
    image: profileData?.coverPhoto || `/images/cover-photo.png?height=160&width=300`,
    name: profileData?.name,
    avatar:
      profileData?.profilePicture || `/images/cover-photo.png?height=160&width=300`,
    age: profileData?.age,
    matchPercentage: profileData?.matchPercentage,
    verified: profileData?.verified,
    bio: profileData?.bio,
    location: profileData?.location,
    "interested-in-me": profileData?.["interested-in-me"],
  };

  useEffect(() => {
    setCurrentPath(pathname);
  }, [pathname]);

  return (
    <section className="rounded-lg overflow-hidden border border-gray-200 flex flex-col justify-between">
      {/* Card Image */}
      <div className="relative h-30 w-full">
        <Image
          src={formattedData.image}
          alt={formattedData.name || ""}
          fill
          className="object-cover"
        />

        {/* Profile Avatar */}
        <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 -z-0">
          <div className="relative h-16 w-16 rounded-full border-4 border-white overflow-hidden">
            <Image
              src={
                formattedData.avatar || `/images/cover-photo.png?height=64&width=64`
              }
              alt={formattedData.name || ""}
              fill
              className="object-cover"
            />
          </div>
        </div>
      </div>

      {/* Card Content */}
      <div className="pt-5 px-2 pb-3 flex flex-col justify-between">
        <div className="flex items-center justify-between mb-1">
          <div className="flex items-center gap-1">
            <h3 className="font-[600] text-black">
              {formattedData.name}, {formattedData.age}
            </h3>
          </div>
          <div className="text-sm text-black font-[600]">
            {formattedData.matchPercentage}% Match
          </div>
        </div>

        <div className="flex items-center justify-between gap-1 mb-2">
          <p className="text-sm text-black font-[600]">
            {formattedData.location}
          </p>
          {formattedData.verified && (
            <Badge
              variant="outline"
              className="flex items-center gap-1 text-xs py-0 h-5 text-ellipsis text-nowrap border-none"
            >
              <Image
                src={"/images/verified.svg"}
                alt="verified"
                width={20}
                height={20}
              />
              <span className="text-black italic font-[200]">Address Verified</span>
            </Badge>
          )}
        </div>

        <p className="text-xs text-[#00000099] mb-3 line-clamp-3 font-medium">
          {formattedData.bio || "No bio available"}
        </p>

        <div className="flex items-center justify-between">
          <Button
            onClick={viewUserProfile}
            variant="default"
            size="sm"
            className={cn(
              "text-xs rounded-full px-4 py-1 h-7 cursor-pointer",
              currentPath.includes("favourites") &&
                formattedData["interested-in-me"]
                ? "bg-[#00A389] hover:bg-[#00A389]/80"
                : currentPath.includes("favourites") ||
                    currentPath.includes("interested-in-me")
                  ? "bg-[#EF2424] hover:bg-[#EF2424]/80"
                  : currentPath.includes("mutuals") ||
                      currentPath.includes("subscribed")
                    ? "bg-[#00A389] hover:bg-[#00A389]/80"
                    : ""
            )}
          >
            {currentPath.includes("/user/favourites")
              ? formattedData["interested-in-me"]
                ? "More-info"
                : "View info"
              : "View info"}
          </Button>
          <Button
            variant="ghost"
            onClick={() => setLiked(!liked)}
            className="rounded-full h-12 w-12 p-0 flex items-center justify-center relative"
          >
            <div className="absolute inset-0 flex items-center justify-center">
              <HeartIcon
                className={cn(
                  "w-12 h-12 transform scale-150",
                  liked ? "fill-red-500 text-red-500" : "text-gray-400"
                )}
              />
            </div>
          </Button>
        </div>
      </div>
    </section>
  );
}
