"use client";

import Image from "next/image";
import { STATIC_RADIO, StaticRadioStation } from "@/data/static";
import { useTranslation } from "@/i18n";

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

interface StaticRadioGridProps {
  items?: StaticRadioStation[];
}

// ── Radio Station Card ─────────────────────────────────────────────────────────

function RadioCard({ station }: { station: StaticRadioStation }) {
  const { t } = useTranslation();

  return (
    <div
      className="group flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-150 hover:-translate-y-0.5 hover:shadow-lg"
      style={{
        background: "var(--card)",
        border: `1px solid ${station.borderColor}`,
      }}
    >
      {/* Station Logo — circular with gradient fallback */}
      <div
        className="relative shrink-0 rounded-full overflow-hidden"
        style={{
          width: 52,
          height: 52,
          background: `linear-gradient(135deg, ${station.gradientFrom}, ${station.gradientTo})`,
          boxShadow: `0 4px 14px ${station.borderColor}`,
        }}
      >
        <Image
          src={station.logo}
          alt={station.name}
          fill
          className="object-cover transition-transform duration-[280ms] group-hover:scale-[1.08]"
          sizes="52px"
          unoptimized
        />
      </div>

      {/* Info */}
      <div className="flex-1 min-w-0">
        <p
          className="text-xs font-semibold truncate"
          style={{ color: "var(--text-primary)", letterSpacing: "-0.005em" }}
        >
          {station.name}
        </p>
        <div className="flex items-center gap-2 mt-1">
          {/* Genre badge */}
          <span
            className="text-[8px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded-sm"
            style={{
              background: `${station.gradientFrom}22`,
              color: station.gradientFrom,
              border: `1px solid ${station.gradientFrom}44`,
            }}
          >
            {station.genre}
          </span>
          {/* Listener count */}
          <span className="text-[9px]" style={{ color: "#666" }}>
            {station.listeners} {t("static_listeners")}
          </span>
        </div>
      </div>

      {/* Live indicator */}
      {station.isLive && (
        <div className="flex flex-col items-center gap-1 shrink-0">
          <div
            className="w-2 h-2 rounded-full animate-pulse"
            style={{
              background: "#22c55e",
              boxShadow: "0 0 6px rgba(34,197,94,0.7)",
            }}
          />
          <span
            className="text-[7px] font-black uppercase tracking-widest"
            style={{ color: "#22c55e" }}
          >
            {t("static_live")}
          </span>
        </div>
      )}
    </div>
  );
}

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

export function StaticRadioGrid({ items = STATIC_RADIO }: StaticRadioGridProps) {
  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-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
      {items.map((station) => (
        <RadioCard key={station.id} station={station} />
      ))}
    </div>
  );
}