"use client";

import React, { useState } from "react";
import Image from "next/image";
import { Check } from "lucide-react";

export interface HeroFramePlayerProps {
  poster?: string;
  title?: string;
  autoQueuedText?: string;
  episodeBadgeText?: string;
  durationBadgeText?: string;
}

/**
 * Vertical 9:16 hero frame. Shows the slide poster with the floating badges and
 * title overlay. The previously decoded poster is held on screen until the next
 * one has loaded, so switching slides never leaves an empty card.
 */
const HeroFramePlayer: React.FC<HeroFramePlayerProps> = ({
  poster,
  title,
  autoQueuedText = "Next episode auto-queued",
  episodeBadgeText,
  durationBadgeText,
}) => {
  const [erroredPoster, setErroredPoster] = useState<string | null>(null);
  const [paintedPoster, setPaintedPoster] = useState<string | null>(null);

  const FALLBACK_POSTER = "/hero_episode_poster.png";
  const displayPoster =
    !poster || erroredPoster === poster ? FALLBACK_POSTER : poster;
  const displayTitle = title || "Featured Content";
  const displayEpisodeBadge = episodeBadgeText || "NOW PLAYING";
  const displayDurationBadge = durationBadgeText || "episode complete";

  return (
    <div className="relative h-full w-full overflow-hidden bg-neutral-950 select-none">
      {/* Previous poster, held underneath until the new one has decoded. */}
      {paintedPoster && paintedPoster !== displayPoster && (
        <Image
          src={paintedPoster}
          alt=""
          aria-hidden
          fill
          sizes="280px"
          className="object-cover object-center"
        />
      )}

      {/* Background Poster Image */}
      <Image
        key={displayPoster}
        src={displayPoster}
        alt={title || "Featured Episode"}
        fill
        sizes="280px"
        className={`object-cover object-center transition-opacity duration-300 ${
          paintedPoster === displayPoster ? "opacity-100" : "opacity-0"
        }`}
        priority
        onLoad={() => setPaintedPoster(displayPoster)}
        onError={() => {
          if (displayPoster !== FALLBACK_POSTER) setErroredPoster(poster ?? null);
        }}
      />

      {/* Top-Left Floating Badge (Next episode auto-queued) */}
      <div className="absolute left-3 top-3 z-20 flex items-center gap-1.5 rounded-full border border-white/15 bg-black/60 px-2.5 py-1 text-[11px] font-medium text-white shadow-lg backdrop-blur-md">
        <div className="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border border-rose-500 bg-rose-500/10 text-rose-500">
          <Check className="h-2 w-2 stroke-[3]" />
        </div>
        <span className="truncate text-white/90">{autoQueuedText}</span>
      </div>

      {/* Bottom Dark Gradient Overlay */}
      <div className="absolute inset-x-0 bottom-0 z-10 h-3/5 bg-gradient-to-t from-black/95 via-black/55 to-transparent pointer-events-none" />

      {/* Bottom Content Overlay */}
      <div className="absolute inset-x-0 bottom-0 z-20 flex flex-col items-start gap-2 p-3.5 text-left">
        {/* Badges Row */}
        <div className="flex flex-wrap items-center gap-1.5">
          {/* Left Red/Pink Badge */}
          <span className="rounded-full bg-[#FF2E55] px-2.5 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-white shadow-md">
            {displayEpisodeBadge}
          </span>

          {/* Right Dark Translucent Glass Badge */}
          <span className="rounded-full border border-white/15 bg-black/65 px-2.5 py-0.5 text-[10px] font-medium text-white/90 shadow-sm backdrop-blur-md">
            {displayDurationBadge}
          </span>
        </div>

        {/* Title */}
        <h2 className="text-left font-bold text-white text-sm sm:text-base leading-tight tracking-tight drop-shadow-md line-clamp-2">
          {displayTitle}
        </h2>
      </div>
    </div>
  );
};

export default HeroFramePlayer;