import React from 'react';
import { Play, Info, AlertTriangle } from 'lucide-react';
import { Course } from '../types';

interface HeroBannerProps {
  course: (Course & { progress?: number; totalLessons?: number }) | null;
  onPlay: (courseId: string) => void;
  subscriptionStatus: string;
  setView: (view: string) => void;
}

export default function HeroBanner({ course, onPlay, subscriptionStatus, setView }: HeroBannerProps) {
  if (!course) {
    return (
      <div className="h-[30vh] md:h-[45vh] w-full bg-zinc-900 flex items-center justify-center text-zinc-500 rounded-lg border border-zinc-800">
        Nenhum curso em destaque disponível.
      </div>
    );
  }

  const isBlocked = subscriptionStatus === 'OVERDUE' || subscriptionStatus === 'CANCELED';

  return (
    <div className="relative w-full h-[55vh] md:h-[65vh] flex items-end overflow-hidden rounded-2xl border border-white/10 shadow-[0_12px_40px_rgba(0,0,0,0.5)]">
      {/* Background Image / Gradient */}
      <div className="absolute inset-0 z-0">
        <img 
          src={course.thumbnail} 
          alt={course.title}
          className="w-full h-full object-cover brightness-[0.40] scale-105 transition-all duration-700"
          referrerPolicy="no-referrer"
        />
        {/* Gradients */}
        <div className="absolute inset-0 bg-gradient-to-t from-[#141414] via-transparent to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#141414]/90 via-[#141414]/30 to-transparent" />
      </div>

      {/* Content Container */}
      <div className="relative z-10 p-6 md:p-12 max-w-2xl space-y-4">
        {/* Category Tag */}
        <span className="glass-badge bg-[#E50914]/85 text-white px-3 py-1 rounded-md text-xs font-bold uppercase tracking-wider">
          {course.category}
        </span>

        {/* Title */}
        <h1 className="text-3xl md:text-5xl font-display font-black tracking-tight text-white leading-tight">
          {course.title}
        </h1>

        {/* Description */}
        <p className="text-sm md:text-base text-zinc-300 font-normal leading-relaxed line-clamp-3">
          {course.description}
        </p>

        {/* Progress Bar (If started) */}
        {course.progress !== undefined && course.progress > 0 && (
          <div className="space-y-1">
            <div className="flex justify-between items-center text-xs text-zinc-400 font-semibold">
              <span>Seu Progresso</span>
              <span>{course.progress}% concluído</span>
            </div>
            <div className="w-full bg-white/10 backdrop-blur-sm h-2 rounded-full overflow-hidden">
              <div 
                className="bg-[#E50914] h-full rounded-full transition-all duration-500 shadow-[0_0_10px_rgba(229,9,20,0.5)]" 
                style={{ width: `${course.progress}%` }}
              />
            </div>
          </div>
        )}

        {/* Buttons */}
        <div className="flex flex-wrap items-center gap-3 pt-2">
          {isBlocked ? (
            <button 
              onClick={() => setView('subscription')}
              className="glass-btn-secondary border border-red-500/30 hover:bg-red-950/20 text-red-400 font-bold px-6 py-2.5 rounded-lg flex items-center space-x-2 transition-all cursor-pointer"
            >
              <AlertTriangle className="w-5 h-5 fill-red-500/10 text-red-500" />
              <span>Assinatura Suspensa - Regularizar</span>
            </button>
          ) : (
            <button 
              onClick={() => onPlay(course.id)}
              className="bg-white hover:bg-zinc-200 text-black font-bold px-6 py-2.5 rounded-lg flex items-center space-x-2 transition-all shadow-lg hover:scale-[1.02] cursor-pointer"
            >
              <Play className="w-5 h-5 fill-black text-black" />
              <span>
                {course.progress && course.progress > 0 ? 'Continuar Assistindo' : 'Iniciar Treinamento'}
              </span>
            </button>
          )}

          <button 
            onClick={() => onPlay(course.id)}
            className="glass-btn-secondary text-white font-medium px-5 py-2.5 rounded-lg flex items-center space-x-2 cursor-pointer"
          >
            <Info className="w-5 h-5 text-zinc-300" />
            <span>Ver Detalhes</span>
          </button>
        </div>
      </div>
    </div>
  );
}