"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import axiosInstance from "@/lib/axios";
import { cn } from "@/lib/utils";
import { HeartIcon } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";

interface ProfileCardProps {
  match: any;
}

const MatchCard = ({ match }: ProfileCardProps) => {
  const [liked, setLiked] = useState(match?.user.is_favorited_by_me);

  const handleLiked = async ({ targetUserId }: any) => {
    try {
      if (typeof window === "undefined") return;

      const userId = localStorage.getItem("userId");

      if (!userId) {
        return;
      }

      const response = await axiosInstance.post(
        `/users/${userId}/dashboard/favorite/${targetUserId}`,
        {}
      );

      setLiked(!liked);
    } catch (error) {}
  };

  return (
    <section className="rounded-xl min-h-[260px] overflow-hidden border border-gray-200 flex flex-col justify-between">
      {/* Card Image */}
      <div className="relative h-30 w-full">
        <Image
          src={match?.user.cover_photo || `/images/cover-photo.png`}
          alt={match?.user.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={match?.user?.photo || ``}
              alt={match?.user.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 text-[0.8rem]">
              {match?.user.name}, {match?.user.age}
            </h3>
          </div>
          <div className="text-[0.8rem] text-black font-[600]">
            {match.match_score}% Match
          </div>
        </div>

        <div className="flex items-center justify-between gap-1 mb-2">
          <p className="text-sm text-black font-[600]">{match?.user.state}</p>
          {match?.user?.has_address_verified !== false && (
            <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 mt-2 line-clamp-3 font-medium">
          {match?.user.short_bio || "No bio available"}
        </p>

        <div className="flex items-center justify-between">
          {match?.user?.has_blocked_me === false && (
            <Link href={`/user/profile/${match?.user?.id}`}>
            <Button
              variant="default"
              size="sm"
              className={`text-xs rounded-full px-4 py-1 h-7 cursor-pointer ${match?.user?.is_subscribed_by_me ? "bg-[#00A389] hover:bg-[#00A389]/80" : "bg-[#EF2424] hover:bg-[#EF2424]/80"}`}
            >
              {`${match?.user?.is_subscribed_by_me ? "More Info" : "View Info"}`}
            </Button>
          </Link>
          )}
          {match?.user?.has_blocked_me === true && (
            <Button
              variant="default"
              size="sm"
              className={`text-xs rounded-full px-4 py-1 h-7 bg-[#B9BBBD] text-white hover:bg-[#B9BBBD] cursor-not-allowed`}
            >
              {`${match?.user?.is_subscribed_by_me ? "More Info" : "View Info"}`}
            </Button>
          )}

          <Button
            variant="ghost"
            onClick={() => handleLiked({ targetUserId: match?.user?.id })}
            className="rounded-full h-12 w-12 p-0 flex items-center justify-center relative cursor-pointer"
          >
            <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>
  );
};

export default MatchCard;
