"use client";

import Image from "next/image";
import Link from "next/link";
import { useRef } from "react";
import { Heart } from "lucide-react";
import { STATIC_REELS, StaticReel } from "@/data/static";
import { useTranslation } from "@/i18n";

// ── Types ──────────────────────────────────────────────────────────────────────

interface StaticReelShelfProps {
  items?: StaticReel[];
  title?: string;
}

// ── Reel Card ──────────────────────────────────────────────────────────────────

function ReelCard({ reel }: { reel: StaticReel }) {
  return (
    <Link href="/shorts">
      <div
        className="shrink-0 cursor-pointer group transition-transform duration-200 hover:-translate-y-0.5"
        style={{ width: 160 }}
      >
        {/* Portrait thumbnail */}
        <div
          className="relative rounded-[10px] overflow-hidden transition-shadow duration-200 group-hover:shadow-2xl"
          style={{ width: 160, height: 284 }}
        >
          <Image
            src={reel.thumbnail}
            alt={reel.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(${reel.hue},70%,60%,0.3) 0%, transparent 50%)`,
            }}
          />
          {/* Bottom gradient for caption */}
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              background: "linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.72) 100%)",
            }}
          />

          {/* Play icon (hover) */}
          <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-200"
            >
              <path d="M8 5v14l11-7z" />
            </svg>
          </div>

          {/* Heart + likes — top right */}
          <div
            className="absolute right-1.5 top-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.55)",
              backdropFilter: "blur(4px)",
            }}
          >
            <Heart size={9} fill="white" strokeWidth={0} />
            {reel.likes}
          </div>

          {/* Caption overlay at bottom */}
          <div className="absolute bottom-0 left-0 right-0 p-2">
            <p
              className="text-[10px] font-medium text-[#ffffff] leading-[1.35] line-clamp-2"
              style={{ textShadow: "0 1px 4px rgba(0,0,0,0.8)" }}
            >
              {reel.caption}
            </p>
          </div>
        </div>
      </div>
    </Link>
  );
}

// ── Main Component ─────────────────────────────────────────────────────────────

export function StaticReelShelf({
  items = STATIC_REELS,
  title,
}: StaticReelShelfProps) {
  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);
  const shelfTitle = title ?? t("home_reels");

  return (
    <div>
      {/* Section header */}
      <div className="flex items-center justify-between mb-3.5">
        <h2
          className="text-sm font-semibold tracking-tight flex items-center gap-2"
          style={{ color: "var(--text-primary)", letterSpacing: "-0.005em" }}
        >
          <span
            className="w-1 h-4 rounded-full inline-block"
            style={{ background: "var(--accent)" }}
          />
          {shelfTitle}
        </h2>
        <Link
          href="/shorts"
          className="text-[11px] font-medium transition-colors duration-150"
          style={{ color: "var(--accent)" }}
        >
          {t("static_see_all")}
        </Link>
      </div>

      {/* Scrollable shelf */}
      <div
        ref={scrollRef}
        className="flex gap-2.5 overflow-x-auto scrollbar-hide pb-1"
      >
        {items.map((reel) => (
          <ReelCard key={reel.id} reel={reel} />
        ))}
      </div>
    </div>
  );
}