"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { STATIC_VIDEOS, StaticVideo } from "@/data/static";
import { useTranslation } from "@/i18n";

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

interface StaticVideoGridProps {
  items?: StaticVideo[];
  columns?: 2 | 3 | 4;
  loading?: boolean;
}

// ── Skeleton ───────────────────────────────────────────────────────────────────

export function VideoCardSkeleton() {
  return (
    <div
      className="rounded-xl overflow-hidden animate-pulse"
      style={{ background: "var(--card)" }}
    >
      <div className="aspect-video" style={{ background: "var(--deep)" }} />
      <div className="p-2.5 flex gap-2.5">
        <div
          className="w-7 h-7 rounded-full shrink-0 mt-0.5"
          style={{ background: "var(--deep)" }}
        />
        <div className="flex-1 flex flex-col gap-2 pt-0.5">
          <div
            className="h-3 rounded-full"
            style={{ background: "var(--deep)", width: "92%" }}
          />
          <div
            className="h-2.5 rounded-full"
            style={{ background: "var(--deep)", width: "60%" }}
          />
          <div
            className="h-2 rounded-full"
            style={{ background: "var(--deep)", width: "40%" }}
          />
        </div>
      </div>
    </div>
  );
}

// ── Video Card ─────────────────────────────────────────────────────────────────

function StaticVideoCard({ video }: { video: StaticVideo }) {
  const router = useRouter();

  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 var(--border-soft)",
      }}
      onClick={() => router.push(`/video/${video.id}`)}
    >
      {/* Thumbnail */}
      <div
        className="relative aspect-video overflow-hidden"
        style={{ background: "var(--deep)" }}
      >
        <Image
          src={video.thumbnail}
          alt={video.title}
          fill
          className="object-cover transition-transform duration-[280ms] ease-out group-hover:scale-[1.04]"
          sizes="(max-width: 560px) 100vw, (max-width: 980px) 50vw, (max-width: 1280px) 33vw, 25vw"
          unoptimized
        />
        {/* Gradient overlay */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: "linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 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-11 h-11 rounded-full flex items-center justify-center border"
            style={{
              background: "rgba(var(--accent-rgb),0.85)",
              backdropFilter: "blur(2px)",
              borderColor: "rgba(255,255,255,0.18)",
            }}
          >
            <svg viewBox="0 0 24 24" width="16" height="16" fill="#fff">
              <path d="M8 5v14l11-7z" />
            </svg>
          </span>
        </div>
        {/* Premium badge */}
        {video.isPremium && (
          <span
            className="absolute top-2 left-2 text-[#ffffff] text-[8px] font-bold uppercase px-1.5 py-0.5 rounded-sm tracking-widest"
            style={{ background: "var(--accent)" }}
          >
            4K
          </span>
        )}
        {/* Duration */}
        <span
          className="absolute right-2 bottom-2 text-[#ffffff] text-[9px] font-semibold px-1 py-0.5 rounded-sm font-mono"
          style={{ background: "rgba(0,0,0,0.8)" }}
        >
          {video.duration}
        </span>
      </div>

      {/* Meta */}
      <div className="flex items-start gap-2 p-2.5">
        {/* Channel avatar */}
        <div
          className="w-7 h-7 rounded-full flex items-center justify-center text-[#ffffff] text-xs font-bold shrink-0 mt-0.5 overflow-hidden"
          style={{ background: "#2a2a4e" }}
        >
          <Image
            src={video.channelAvatar}
            alt={video.channelName}
            width={28}
            height={28}
            className="object-cover"
            unoptimized
          />
        </div>
        <div className="flex-1 min-w-0">
          <p
            className="text-xs font-medium line-clamp-2 leading-[1.4] tracking-tight"
            style={{ color: "var(--text-primary)", letterSpacing: "-0.005em" }}
          >
            {video.title}
          </p>
          <p className="text-[10px] mt-1 truncate" style={{ color: "#888" }}>
            {video.channelName}
          </p>
          <p className="text-[10px] mt-0.5" style={{ color: "#666" }}>
            {video.views}
          </p>
        </div>
      </div>
    </div>
  );
}

// ── Grid column class map ──────────────────────────────────────────────────────

const colClass: Record<2 | 3 | 4, string> = {
  2: "grid-cols-1 sm:grid-cols-2",
  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
};

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

export function StaticVideoGrid({
  items = STATIC_VIDEOS,
  columns = 4,
  loading = false,
}: StaticVideoGridProps) {
  const { t } = useTranslation();

  if (loading) {
    return (
      <div className={`grid ${colClass[columns]} gap-4`}>
        {Array.from({ length: columns * 2 }).map((_, i) => (
          <VideoCardSkeleton key={i} />
        ))}
      </div>
    );
  }

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

  return (
    <div className={`grid ${colClass[columns]} gap-4`}>
      {items.map((video) => (
        <StaticVideoCard key={video.id} video={video} />
      ))}
    </div>
  );
}