"use client";

import Image from "next/image";
import { Mic } from "lucide-react";
import { STATIC_PODCASTS, StaticPodcast } from "@/data/static";
import { useTranslation } from "@/i18n";

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

interface StaticPodcastGridProps {
  items?: StaticPodcast[];
}

// ── Podcast Card ───────────────────────────────────────────────────────────────

function PodcastCard({ podcast, index }: { podcast: StaticPodcast; index: number }) {
  const { t } = useTranslation();
  const showNew = index < 3;

  return (
    <div
      className="group flex flex-col rounded-xl overflow-hidden cursor-pointer transition-transform duration-150 hover:-translate-y-0.5"
      style={{
        background: "var(--card)",
        border: "1px solid rgba(255,255,255,0.06)",
      }}
    >
      {/* Artwork */}
      <div
        className="relative overflow-hidden"
        style={{ aspectRatio: "1 / 1", background: "var(--deep)" }}
      >
        <Image
          src={podcast.artwork}
          alt={podcast.title}
          fill
          className="object-cover transition-transform duration-[280ms] ease-out group-hover:scale-[1.04]"
          sizes="(max-width: 560px) 50vw, (max-width: 980px) 33vw, 25vw"
          unoptimized
        />
        {/* Overlay */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%)",
          }}
        />
        {/* New badge */}
        {showNew && (
          <span
            className="absolute top-2 left-2 text-[8px] font-black uppercase tracking-widest px-1.5 py-0.5 rounded-sm text-[#ffffff]"
            style={{ background: "var(--accent)" }}
          >
            {t("static_new")}
          </span>
        )}
        {/* Episode + duration bottom */}
        <div className="absolute bottom-2 left-2 right-2 flex items-center justify-between">
          <span
            className="text-[8px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded text-[#ffffff]"
            style={{ background: "rgba(0,0,0,0.7)" }}
          >
            {t("static_ep")} {podcast.episodeNumber}
          </span>
          <span
            className="text-[8px] font-semibold font-mono px-1.5 py-0.5 rounded text-[#ffffff]"
            style={{ background: "rgba(0,0,0,0.7)" }}
          >
            {podcast.duration}
          </span>
        </div>
      </div>

      {/* Info */}
      <div className="p-2.5 flex flex-col gap-1">
        {/* Mic badge */}
        <div className="flex items-center gap-1.5">
          <span
            className="inline-flex items-center justify-center w-4 h-4 rounded-full"
            style={{ background: "rgba(var(--accent-rgb),0.15)" }}
          >
            <Mic size={8} style={{ color: "var(--accent)" }} />
          </span>
          <p className="text-[10px] truncate" style={{ color: "#888" }}>
            {podcast.channel}
          </p>
        </div>
        <p
          className="text-xs font-medium line-clamp-2 leading-[1.35]"
          style={{ color: "var(--text-primary)", letterSpacing: "-0.005em" }}
        >
          {podcast.title}
        </p>
        <p className="text-[10px] truncate" style={{ color: "#666" }}>
          {podcast.host}
        </p>
      </div>
    </div>
  );
}

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

export function StaticPodcastGrid({ items = STATIC_PODCASTS }: StaticPodcastGridProps) {
  const { t } = useTranslation();

  if (!items.length) {
    return (
      <div className="py-16 text-center" style={{ color: "#666" }}>
        <p className="text-sm">{t("state_empty")}</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-4">
      {items.map((podcast, index) => (
        <PodcastCard key={podcast.id} podcast={podcast} index={index} />
      ))}
    </div>
  );
}