rippy/docker/ui/src/components/HeroCinemaBanner.tsx

import { Disc, Sparkles, CheckCircle, Shield, Zap, Tv, HardDrive } from 'lucide-react'
import { RadialProgress } from './ui/RadialProgress'
import { TypeBadge, StatusBadge } from './ui/Badge'
import { Button } from './ui/Button'

interface JobMeta {
  year?: number
  overview?: string
  poster_path?: string
  genres?: string[]
  runtime?: number
  type?: string
  source?: string
}

interface Job {
  id: string
  type: 'cd' | 'dvd' | 'bluray' | 'uhd'
  status: 'pending' | 'processing' | 'transcoding' | 'canceling' | 'completed' | 'failed'
  device: string
  startTime: string
  endTime?: string
  progress: number
  title?: string
  can_retry?: boolean
  meta?: JobMeta | null
}

function posterUrl(meta?: JobMeta | null): string | null {
  const p = meta?.poster_path
  if (!p) return null
  return p.startsWith('http') ? p : `https://image.tmdb.org/t/p/w500${p}`
}

interface HeroCinemaBannerProps {
  aktiverJob?: Job | null
  completedJobs?: Job[]
  onDetailClick?: (jobId: string) => void
  onCancelClick?: (jobId: string) => void
}

export function HeroCinemaBanner({
  aktiverJob,
  completedJobs = [],
  onDetailClick,
  onCancelClick,
}: HeroCinemaBannerProps) {
  // Fall 1: Aktiver Job (Rippt oder Komprimiert live)
  if (aktiverJob) {
    const isTranscoding = aktiverJob.status === 'transcoding'
    const statusText = isTranscoding ? 'HandBrake Kompression' : 'MakeMKV Extraktion'
    const poster = posterUrl(aktiverJob.meta)

    return (
      <div className="relative rounded-3xl overflow-hidden border-2 border-amber-500/50 bg-gradient-to-r from-slate-950 via-slate-900 to-indigo-950 p-6 md:p-8 shadow-[0_0_50px_-10px_rgba(245,158,11,0.35)] text-slate-100 mb-8">
        <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8">
          <div className="flex items-center gap-6">
            <div className="relative flex-shrink-0">
              {poster ? (
                <div className="relative">
                  <img src={poster} alt="" className="w-28 h-40 rounded-2xl object-cover shadow-2xl border-2 border-amber-500/40" />
                  <div className="absolute -bottom-3 -right-3 w-14 h-14 rounded-full disc-texture shadow-xl flex items-center justify-center animate-disc-spin border border-amber-400">
                    <Disc size={20} className="text-amber-400" />
                  </div>
                </div>
              ) : (
                <div className="w-28 h-28 rounded-full disc-texture shadow-2xl flex items-center justify-center p-1.5 animate-disc-spin border-2 border-amber-500/60">
                  <div className="w-full h-full rounded-full border-2 border-dashed border-white/40 flex items-center justify-center bg-slate-950/70">
                    <Disc size={40} className="text-amber-400 drop-shadow-[0_0_15px_rgba(245,158,11,0.8)]" />
                  </div>
                </div>
              )}
            </div>

            <div className="space-y-2 text-center sm:text-left">
              <div className="flex items-center justify-center sm:justify-start gap-2 flex-wrap">
                <span className="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-amber-500 text-slate-950 shadow-md">
                  NOW RIPPING
                </span>
                <TypeBadge type={aktiverJob.type} />
                <StatusBadge status={aktiverJob.status} />
              </div>

              <h2 className="text-2xl md:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-white via-slate-100 to-amber-200 bg-clip-text text-transparent">
                {aktiverJob.title || 'Aktiver Ripping-Prozess'}
              </h2>

              <p className="text-xs text-slate-400 font-mono">
                Laufwerk: <strong className="text-amber-400">{aktiverJob.device}</strong> · {statusText}
              </p>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row items-center gap-6 flex-shrink-0 w-full lg:w-auto justify-end">
            <RadialProgress progress={aktiverJob.progress} size={96} strokeWidth={8} label="PROGRESS" />

            <div className="flex flex-col gap-2 w-full sm:w-auto">
              <Button variant="amber" size="md" onClick={() => onDetailClick && onDetailClick(aktiverJob.id)}>
                <Sparkles size={16} /> Details
              </Button>
              <Button variant="danger" size="md" onClick={() => onCancelClick && onCancelClick(aktiverJob.id)}>
                Abbrechen
              </Button>
            </div>
          </div>
        </div>
      </div>
    )
  }

  // Fall 2: Kein aktiver Job -> 5-Panel Kachel-Galerie VOLLSTÄNDIG ausfüllen (Zero "Löcher"!)
  // Wir füllen freie Slots mit informativen Cinema-Engine-Showcase-Kacheln auf!
  const realMovieTiles = completedJobs.slice(0, 4)

  return (
    <div className="relative rounded-3xl overflow-hidden border border-amber-500/30 bg-[#0e1322] shadow-[0_0_40px_-5px_rgba(245,158,11,0.18)] mb-8 p-3">
      {/* Top Subtle Amber Line */}
      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-amber-500/40 to-transparent pointer-events-none" />

      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 h-44 md:h-52">
        {/* Echte Medien-Kacheln aus der API */}
        {realMovieTiles.map((job) => {
          const poster = posterUrl(job.meta)
          return (
            <div
              key={job.id}
              onClick={() => onDetailClick && onDetailClick(job.id)}
              className="relative rounded-2xl overflow-hidden group cursor-pointer border border-slate-800 hover:border-amber-500/50 transition-all bg-slate-900 flex flex-col justify-end p-3"
            >
              {poster ? (
                <img
                  src={poster}
                  alt={job.title || ''}
                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
              ) : (
                <div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950 flex flex-col items-center justify-center p-3 text-center">
                  <Disc size={32} className="text-amber-400 mb-2" />
                  <span className="text-[10px] font-bold text-slate-400 uppercase">{job.type}</span>
                </div>
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/40 to-transparent" />

              <div className="relative z-10 space-y-1">
                <TypeBadge type={job.type} />
                <h4 className="text-xs font-bold text-slate-100 truncate group-hover:text-amber-400 transition-colors">
                  {job.title || 'Unbekannt'}
                </h4>
              </div>
            </div>
          )
        })}

        {/* Center / Showcase Feature Tile: 3D Spinning Optical Disc */}
        {realMovieTiles.length < 5 && (
          <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-900 via-[#131929] to-slate-950 border-2 border-amber-500/40 flex items-center justify-center p-4 shadow-inner group">
            <div className="w-28 h-28 md:w-32 md:h-32 rounded-full disc-texture shadow-2xl shadow-black flex items-center justify-center p-1.5 animate-disc-spin border-2 border-amber-400/60">
              <div className="w-full h-full rounded-full border-2 border-dashed border-white/40 flex items-center justify-center bg-slate-950/70">
                <Disc size={40} className="text-amber-400 drop-shadow-[0_0_16px_rgba(245,158,11,0.9)]" />
              </div>
            </div>
            <div className="absolute bottom-2.5 px-3 py-0.5 rounded-full text-[10px] font-extrabold uppercase tracking-widest bg-amber-500 text-slate-950 shadow-md">
              DISC ENGINE
            </div>
          </div>
        )}

        {/* Dynamic Engine Tile: Drive Status */}
        {realMovieTiles.length < 4 && (
          <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-900 to-indigo-950/80 border border-slate-800 flex flex-col justify-between p-4 hidden md:flex">
            <div className="flex items-center gap-2 text-emerald-400 text-xs font-bold">
              <CheckCircle size={14} /> DRIVE READY
            </div>
            <div>
              <h4 className="text-sm font-bold text-slate-100">Automatische Erkennung</h4>
              <p className="text-[11px] text-slate-400 mt-0.5">Lege eine Disc ein — Rippy rippt sofort los.</p>
            </div>
            <div className="text-[10px] font-mono text-amber-400 font-bold">
              4K UHD · BLU-RAY · DVD · CD
            </div>
          </div>
        )}

        {/* Dynamic Engine Tile: Media-Server Sync */}
        {realMovieTiles.length < 3 && (
          <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-900 to-slate-950 border border-slate-800 flex flex-col justify-between p-4 hidden md:flex">
            <div className="flex items-center gap-2 text-amber-400 text-xs font-bold">
              <Tv size={14} /> MEDIA SERVER
            </div>
            <div>
              <h4 className="text-sm font-bold text-slate-100">Auto-NFO &amp; Poster</h4>
              <p className="text-[11px] text-slate-400 mt-0.5">Jellyfin, Plex &amp; Kodi kompatibel.</p>
            </div>
            <div className="text-[10px] font-mono text-slate-400">
              Auto-Scan nach Rip
            </div>
          </div>
        )}

        {/* Dynamic Engine Tile: Lossless Assurance */}
        {realMovieTiles.length < 2 && (
          <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-900 to-slate-950 border border-slate-800 flex flex-col justify-between p-4 hidden md:flex">
            <div className="flex items-center gap-2 text-indigo-400 text-xs font-bold">
              <Shield size={14} /> MakeMKV
            </div>
            <div>
              <h4 className="text-sm font-bold text-slate-100">Lossless 1:1</h4>
              <p className="text-[11px] text-slate-400 mt-0.5">Alle Tonspuren &amp; Subtitles erhalten.</p>
            </div>
            <div className="text-[10px] font-mono text-slate-400">
              x265 HandBrake Kompression
            </div>
          </div>
        )}
      </div>
    </div>
  )
}