"use client";
import Image from "next/image";
import { memo } from "react";
import { Heart } from "lucide-react";
import { useAppDispatch } from "@/store/hooks";
import { stopAll } from "@/store/slices/playerSlice";
import Link from "next/link";

interface ReelCardProps {
  id: string;
  caption: string;
  likes: string;
  image: string;
  hue: number;
}

export const ReelCard = memo(function ReelCard({
  id,
  caption,
  likes,
  image,
  hue,
}: ReelCardProps) {
  const dispatch = useAppDispatch();

  return (
    <Link href={`/reel/${id}`}>
      <div
        className="shrink-0 cursor-pointer group transition-transform duration-200 hover:-translate-y-0.5"
        style={{ width: "190px" }}
        onClick={() => dispatch(stopAll())}
      >
        {/* Portrait thumbnail */}
        <div
          className="relative rounded-[10px] overflow-hidden transition-shadow duration-200 group-hover:shadow-2xl"
          style={{ width: "190px", height: "284px" }}
        >
          <Image
            src={image}
            alt={caption}
            fill
            className="object-cover transition-transform duration-[280ms] ease-out group-hover:scale-[1.04]"
            sizes="160px"
            unoptimized
          />
          {/* color glow overlay */}
          <div
            className="absolute inset-0 pointer-events-none mix-blend-soft-light opacity-30"
            style={{
              background: `linear-gradient(180deg, hsla(${hue},70%,60%,0.3) 0%, transparent 50%)`,
            }}
          />
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              background:
                "linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.7) 100%)",
            }}
          />

          {/* Play icon */}
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <svg
              viewBox="0 0 24 24"
              width="28"
              height="28"
              fill="rgba(255,255,255,0.7)"
              className="drop-shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-180"
            >
              <path d="M8 5v14l11-7z" />
            </svg>
          </div>

          {/* Likes */}
          <div
            className="absolute right-1.5 bottom-1.5 flex items-center gap-1 text-[#ffffff] text-[9px] font-semibold px-1.5 py-0.5 rounded-full"
            style={{
              background: "rgba(0,0,0,0.6)",
              backdropFilter: "blur(4px)",
            }}
          >
            <Heart size={9} fill="white" strokeWidth={0} />
            {likes}
          </div>
        </div>

        <p
          className="mt-2 text-xs leading-[1.4] line-clamp-2"
          style={{ color: "var(--text-muted)" }}
        >
          {caption}
        </p>
      </div>
    </Link>
  );
});