"use client";

import Image from "next/image";
import Link from "next/link";
import { useRef } from "react";
import { Star } from "lucide-react";
import { STATIC_RENT_ITEMS, StaticRentItem } from "@/data/static";
import { useTranslation } from "@/i18n";
import { useAppSelector } from "@/store/hooks";

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

interface StaticRentShelfProps {
  items?: StaticRentItem[];
  title?: string;
}

// ── Star Rating ────────────────────────────────────────────────────────────────

function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          size={8}
          fill={star <= Math.round(rating) ? "#f0c040" : "transparent"}
          stroke={star <= Math.round(rating) ? "#f0c040" : "#555"}
          strokeWidth={1.5}
        />
      ))}
      <span className="text-[9px] ml-0.5" style={{ color: "#888" }}>
        {rating.toFixed(1)}
      </span>
    </div>
  );
}

// ── Rent Card ──────────────────────────────────────────────────────────────────

function RentCard({ item }: { item: StaticRentItem }) {
  const { t } = useTranslation();
  const currencyCode = useAppSelector((s) => s.generalSetting.currencyCode);

  return (
    <div
      className="group shrink-0 cursor-pointer transition-transform duration-150 hover:-translate-y-0.5"
      style={{ width: 232 }}
    >
      {/* Landscape thumbnail */}
      <div
        className="relative rounded-xl overflow-hidden"
        style={{ width: 232, height: 130, background: "var(--deep)" }}
      >
        <Image
          src={item.thumbnail}
          alt={item.title}
          fill
          className="object-cover transition-transform duration-[280ms] ease-out group-hover:scale-[1.04]"
          sizes="232px"
          unoptimized
        />
        {/* Gradient overlay */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: "linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.75) 100%)",
          }}
        />
        {/* Price badge */}
        <span
          className="absolute top-2 right-2 text-[10px] font-black px-2 py-0.5 rounded-md text-[#ffffff]"
          style={{ background: "rgba(245,158,11,0.9)" }}
        >
          {currencyCode}{item.price}
        </span>
        {/* Genre badge */}
        <span
          className="absolute top-2 left-2 text-[8px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded-sm text-[#ffffff]"
          style={{ background: "rgba(0,0,0,0.65)" }}
        >
          {item.genre}
        </span>
        {/* Bottom info */}
        <div className="absolute bottom-2 left-2 right-2 flex items-end justify-between">
          <div>
            <p
              className="text-xs font-semibold text-[#ffffff] line-clamp-1"
              style={{ letterSpacing: "-0.005em" }}
            >
              {item.title}
            </p>
            <StarRating rating={item.rating} />
          </div>
          <span className="text-[9px] font-mono" style={{ color: "#aaa" }}>
            {item.duration}
          </span>
        </div>
      </div>

      {/* Rent CTA */}
      <div className="mt-2 px-0.5 flex items-center justify-between">
        <p className="text-[10px]" style={{ color: "#666" }}>
          {item.year}
        </p>
        <button
          className="text-[10px] font-bold px-3 py-1 rounded-lg transition-colors duration-150"
          style={{
            background: "rgba(245,158,11,0.12)",
            color: "#f0c040",
            border: "1px solid rgba(245,158,11,0.3)",
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLButtonElement).style.background = "rgba(245,158,11,0.25)";
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLButtonElement).style.background = "rgba(245,158,11,0.12)";
          }}
        >
          {t("static_rent_cta")}
        </button>
      </div>
    </div>
  );
}

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

export function StaticRentShelf({
  items = STATIC_RENT_ITEMS,
  title,
}: StaticRentShelfProps) {
  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);
  const shelfTitle = title ?? t("nav_rent");

  return (
    <div>
      {/* Section header with gold accent */}
      <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: "#f0c040", letterSpacing: "-0.005em" }}
        >
          <span
            className="w-1 h-4 rounded-full inline-block"
            style={{ background: "#f0c040" }}
          />
          {shelfTitle}
        </h2>
        <Link
          href="/rent"
          className="text-[11px] font-medium transition-colors duration-150"
          style={{ color: "#f0c040" }}
        >
          {t("static_see_all")}
        </Link>
      </div>

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