"use client";

import Image from "next/image";
import Link from "next/link";
import { useRef } from "react";
import { STATIC_MUSIC, StaticMusicTrack } from "@/data/static";
import { useTranslation } from "@/i18n";

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

interface StaticMusicShelfProps {
  title?: string;
  items?: StaticMusicTrack[];
}

// ── Music Track Card ───────────────────────────────────────────────────────────

function MusicTrackCard({ track }: { track: StaticMusicTrack }) {
  return (
    <div
      className="group shrink-0 cursor-pointer transition-transform duration-150 hover:-translate-y-0.5"
      style={{ width: 140 }}
    >
      {/* Album Art */}
      <div
        className="relative rounded-xl overflow-hidden"
        style={{ width: 140, height: 140, background: "var(--deep)" }}
      >
        <Image
          src={track.albumArt}
          alt={track.title}
          fill
          className="object-cover transition-transform duration-[280ms] ease-out group-hover:scale-[1.06]"
          sizes="140px"
          unoptimized
        />
        {/* Overlay gradient */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%)",
          }}
        />
        {/* Play button on hover */}
        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <span
            className="w-10 h-10 rounded-full flex items-center justify-center border"
            style={{
              background: "rgba(var(--accent-rgb),0.9)",
              backdropFilter: "blur(4px)",
              borderColor: "rgba(255,255,255,0.2)",
              boxShadow: "0 4px 16px rgba(var(--accent-rgb),0.5)",
            }}
          >
            <svg viewBox="0 0 24 24" width="14" height="14" fill="#fff">
              <path d="M8 5v14l11-7z" />
            </svg>
          </span>
        </div>
        {/* Duration badge */}
        <span
          className="absolute right-1.5 bottom-1.5 text-[8px] font-semibold font-mono px-1 py-0.5 rounded text-[#ffffff]"
          style={{ background: "rgba(0,0,0,0.75)" }}
        >
          {track.duration}
        </span>
      </div>

      {/* Info */}
      <div className="mt-2 px-0.5">
        <p
          className="text-xs font-medium leading-[1.3] line-clamp-1"
          style={{ color: "var(--text-primary)", letterSpacing: "-0.005em" }}
        >
          {track.title}
        </p>
        <p className="text-[10px] mt-0.5 truncate" style={{ color: "#888" }}>
          {track.artist}
        </p>
        <p className="text-[10px] mt-0.5" style={{ color: "#555" }}>
          {track.plays} plays
        </p>
      </div>
    </div>
  );
}

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

export function StaticMusicShelf({
  title,
  items = STATIC_MUSIC,
}: StaticMusicShelfProps) {
  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);
  const shelfTitle = title ?? t("static_music_shelf_title");

  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="/music"
          className="text-[11px] font-medium transition-colors duration-150"
          style={{ color: "var(--accent)" }}
        >
          {t("static_see_all")}
        </Link>
      </div>

      {/* Scrollable shelf with gradient fades */}
      <div className="relative">
        {/* Left fade */}
        <div
          className="absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10"
          style={{
            background: "linear-gradient(90deg, var(--bg) 0%, transparent 100%)",
          }}
        />
        {/* Right fade */}
        <div
          className="absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10"
          style={{
            background: "linear-gradient(270deg, var(--bg) 0%, transparent 100%)",
          }}
        />

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