import { Link } from 'react-router-dom'
import { compact, duration, timeAgo } from '../lib/format'
import { mediaUrl } from '../api/client'
import { Lock, Eye, Heart, Comment, Share, Play } from './icons'
import SubscribeButton from './SubscribeButton'

/** Video card used everywhere a video is listed. */
export default function VideoCard({ video }) {
  const s = video.stats || {}
  return (
    <div className="group animate-fade-up flex flex-col overflow-hidden rounded-2xl bg-white ring-1 ring-gray-200/70 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-gray-900/10 hover:ring-[var(--brand)]/40 dark:bg-gray-900 dark:ring-gray-800 dark:hover:shadow-black/40">
      <Link
        to={`/watch/${video.slug}`}
        className="relative block aspect-video overflow-hidden bg-gray-200 dark:bg-gray-800"
      >
        {video.thumbnail ? (
          <img
            src={mediaUrl(video.thumbnail)}
            alt={video.title}
            loading="lazy"
            className="h-full w-full object-cover transition duration-500 group-hover:scale-[1.06]"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center text-gray-400">
            No thumbnail
          </div>
        )}

        {/* Hover overlay with play button */}
        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-t from-black/50 via-black/0 to-black/0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
          <span className="flex h-12 w-12 scale-75 items-center justify-center rounded-full bg-white/95 text-gray-900 shadow-lg transition-transform duration-300 group-hover:scale-100">
            <Play width={22} height={22} className="ml-0.5" />
          </span>
        </div>

        {/* Duration badge */}
        {video.duration > 0 && !video.is_live && (
          <span className="absolute bottom-2 right-2 rounded-md bg-black/75 px-1.5 py-0.5 text-[11px] font-semibold tracking-wide text-white backdrop-blur-sm">
            {duration(video.duration)}
          </span>
        )}

        {/* Live badge */}
        {video.is_live && (
          <span className="absolute left-2 top-2 inline-flex items-center gap-1.5 rounded-md bg-rose-600/95 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white shadow-md backdrop-blur-sm">
            <span className="animate-pulse-dot h-1.5 w-1.5 rounded-full bg-white" /> Live
          </span>
        )}

        {/* Lock badge */}
        {video.is_locked && (
          <span className="absolute right-2 top-2 flex items-center gap-1 rounded-full bg-black/75 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-amber-300 backdrop-blur-sm">
            <Lock width={12} height={12} /> Locked
          </span>
        )}
      </Link>

      <div className="flex flex-1 flex-col gap-2 p-3">
        <Link
          to={`/watch/${video.slug}`}
          className="line-clamp-2 text-[13px] font-semibold leading-snug tracking-tight transition-colors hover:text-[var(--brand)] sm:text-sm"
          title={video.title}
        >
          {video.title}
        </Link>

        {/* Stats row */}
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] font-medium text-gray-500 dark:text-gray-400">
          <span className="inline-flex items-center gap-1">
            <Eye width={13} height={13} /> {compact(s.views)}
          </span>
          <span className="inline-flex items-center gap-1">
            <Heart width={13} height={13} /> {compact(s.likes)}
          </span>
          <span className="inline-flex items-center gap-1">
            <Comment width={13} height={13} /> {compact(s.comments)}
          </span>
          <span className="inline-flex items-center gap-1">
            <Share width={13} height={13} /> {compact(s.shares)}
          </span>
        </div>

        {/* Uploader row */}
        <div className="mt-auto flex items-center justify-between gap-2 border-t border-gray-100 pt-2.5 dark:border-gray-800">
          <div className="flex min-w-0 items-center gap-2">
            <img
              src={video.uploader?.avatar || 'https://i.pravatar.cc/40'}
              alt=""
              className="h-6 w-6 shrink-0 rounded-full object-cover ring-2 ring-white dark:ring-gray-800"
            />
            <div className="min-w-0 leading-tight">
              <p className="truncate text-xs font-semibold text-gray-700 dark:text-gray-200">
                {video.uploader?.name}
              </p>
              {video.created_at && (
                <p className="truncate text-[10px] text-gray-400">{timeAgo(video.created_at)}</p>
              )}
            </div>
          </div>
          <SubscribeButton compact />
        </div>
      </div>
    </div>
  )
}
