"use client";

import Image from "next/image";
import Link from "next/link";
import { VideoItem } from "@/types/home";
import { useSidebar } from "@/lib/SidebarContext";

interface RelatedVideosProps {
  videos: VideoItem[];
  onVideoClick?: () => void;
}

function RelatedCard({ video, onVideoClick }: { video: VideoItem; onVideoClick?: () => void }) {
  const { collapse } = useSidebar();
  return (
    <Link
      href={`/video/${video.id}`}
      onClick={() => { collapse(); onVideoClick?.(); }}
      className="flex gap-2.5 group rounded-lg overflow-hidden p-1.5 transition-colors duration-150"
      style={{ background: "transparent" }}
      onMouseEnter={(e) => {
        (e.currentTarget as HTMLElement).style.background = "var(--card)";
      }}
      onMouseLeave={(e) => {
        (e.currentTarget as HTMLElement).style.background = "transparent";
      }}
    >
      {/* Thumbnail */}
      <div
        className="relative shrink-0 rounded-lg overflow-hidden"
        style={{ width: 128, height: 72, background: "var(--deep)" }}
      >
        {video.thumbnail ? (
          <Image
            src={video.thumbnail}
            alt={video.title}
            fill
            className="object-cover transition-transform duration-200 group-hover:scale-[1.04]"
            sizes="128px"
            unoptimized
          />
        ) : null}
        {/* Duration badge */}
        {video.duration && (
          <span
            className="absolute right-1 bottom-1 text-[#ffffff] text-[9px] font-semibold px-1 py-px rounded-sm font-mono"
            style={{ background: "rgba(0,0,0,0.82)" }}
          >
            {video.duration}
          </span>
        )}
        {video.isPremium && (
          <span
            className="absolute top-1 left-1 text-[#ffffff] text-[8px] font-bold uppercase px-1 py-px rounded-sm"
            style={{ background: "var(--accent)" }}
          >
            4K
          </span>
        )}
      </div>

      {/* Meta */}
      <div className="flex-1 min-w-0 flex flex-col gap-0.5 justify-center">
        <p
          className="text-xs font-medium line-clamp-2 leading-[1.4]"
          style={{ color: "var(--text-primary)", letterSpacing: "-0.004em" }}
        >
          {video.title}
        </p>
        <p className="text-[10px] mt-1 truncate" style={{ color: "#888" }}>
          {video.channelName}
        </p>
        <p className="text-[10px]" style={{ color: "#666" }}>
          {video.views}
        </p>
      </div>
    </Link>
  );
}

function RelatedCardSkeleton() {
  return (
    <div className="flex gap-2.5 p-1.5">
      <div
        className="shrink-0 rounded-lg animate-pulse"
        style={{ width: 128, height: 72, background: "var(--card)" }}
      />
      <div className="flex-1 flex flex-col gap-2 justify-center">
        <div
          className="h-3 rounded-full animate-pulse"
          style={{ background: "var(--card)", width: "90%" }}
        />
        <div
          className="h-3 rounded-full animate-pulse"
          style={{ background: "var(--card)", width: "65%" }}
        />
        <div
          className="h-2.5 rounded-full animate-pulse"
          style={{ background: "var(--card)", width: "45%" }}
        />
        <div
          className="h-2 rounded-full animate-pulse"
          style={{ background: "var(--card)", width: "35%" }}
        />
      </div>
    </div>
  );
}

export function RelatedVideos({ videos, onVideoClick }: RelatedVideosProps) {
  return (
    <div className="flex flex-col gap-1">
      <h3
        className="text-xs font-semibold uppercase tracking-widest mb-2"
        style={{ color: "#666", letterSpacing: "0.1em" }}
      >
        Up Next
      </h3>
      {videos.map((v) => (
        <RelatedCard key={v.id} video={v} onVideoClick={onVideoClick} />
      ))}
    </div>
  );
}

export function RelatedVideosSkeleton() {
  return (
    <div className="flex flex-col gap-1">
      <div
        className="h-3 w-16 rounded-full animate-pulse mb-3"
        style={{ background: "var(--card)" }}
      />
      {Array.from({ length: 8 }).map((_, i) => (
        <RelatedCardSkeleton key={i} />
      ))}
    </div>
  );
}