import { Link } from 'react-router-dom'
import { useSettings } from '../context/SettingsContext'
import { mediaUrl } from '../api/client'
import { compact, duration } from '../lib/format'
import { Lock, Eye, Play } from './icons'

/**
 * Highlighted banner for the featured exclusive/live item.
 * Renders NOTHING when the admin hasn't set a featured item.
 */
export default function ExclusiveSection() {
  const { settings } = useSettings()
  const v = settings?.exclusive
  if (!v) return null

  return (
    <section className="animate-fade-up mb-8">
      <Link
        to={`/watch/${v.slug}`}
        className="group relative block overflow-hidden rounded-3xl ring-1 ring-gray-200 shadow-lg shadow-gray-900/5 transition-shadow duration-300 hover:shadow-2xl hover:shadow-[var(--brand)]/20 dark:ring-gray-800"
      >
        <div className="aspect-[16/9] w-full overflow-hidden bg-gray-900 sm:aspect-[21/8]">
          {v.thumbnail && (
            <img
              src={mediaUrl(v.thumbnail)}
              alt={v.title}
              className="h-full w-full object-cover opacity-95 transition duration-700 group-hover:scale-[1.04]"
            />
          )}
        </div>

        {/* Cinematic gradient */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-black/10" />
        <div className="absolute inset-0 bg-gradient-to-r from-black/50 via-transparent to-transparent" />

        <div className="absolute bottom-0 left-0 right-0 p-5 sm:p-8">
          {/* Badges */}
          <div className="mb-3 flex flex-wrap items-center gap-2">
            {v.is_live ? (
              <span className="inline-flex items-center gap-1.5 rounded-md bg-rose-600 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider text-white shadow-lg">
                <span className="animate-pulse-dot h-1.5 w-1.5 rounded-full bg-white" /> Live now
              </span>
            ) : (
              <span className="bg-brand-gradient inline-flex items-center rounded-md px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider text-white shadow-lg">
                ★ Exclusive
              </span>
            )}
            {v.is_locked && (
              <span className="inline-flex items-center gap-1 rounded-md bg-black/60 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider text-amber-300 backdrop-blur-sm">
                <Lock width={12} height={12} /> Locked
              </span>
            )}
            {v.category?.name && (
              <span className="rounded-md bg-white/15 px-2.5 py-1 text-[11px] font-semibold text-white/90 backdrop-blur-sm">
                {v.category.name}
              </span>
            )}
          </div>

          <h2 className="max-w-3xl text-2xl font-black leading-tight tracking-tight text-white drop-shadow-lg sm:text-4xl">
            {v.title}
          </h2>

          <div className="mt-4 flex flex-wrap items-center gap-x-5 gap-y-3">
            <span className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-bold text-gray-900 shadow-xl transition-transform duration-300 group-hover:scale-105">
              <Play width={16} height={16} /> Watch now
            </span>
            <span className="inline-flex items-center gap-1.5 text-sm font-medium text-white/85">
              <Eye width={16} height={16} /> {compact(v.stats?.views)} views
            </span>
            {v.duration > 0 && !v.is_live && (
              <span className="text-sm font-medium text-white/70">{duration(v.duration)}</span>
            )}
          </div>
        </div>
      </Link>
    </section>
  )
}
