microtecflix/src/components/CourseCard.tsx

import React from 'react';
import { Play, BookOpen, CheckCircle2, Lock } from 'lucide-react';
import { Course } from '../types';

interface CourseCardProps {
  key?: string;
  course: Course & { progress?: number; totalLessons?: number; completedLessons?: number; isUnlocked?: boolean };
  onSelect: (courseId: string) => void;
  onUnlockRequest?: (course: any) => void;
  subscriptionStatus: string;
  isSelected?: boolean;
}

export default function CourseCard({ course, onSelect, onUnlockRequest, subscriptionStatus, isSelected = false }: CourseCardProps) {
  const isBlocked = subscriptionStatus === 'OVERDUE' || subscriptionStatus === 'CANCELED';
  const isUnlocked = course.isUnlocked !== false; // defaults to true if undefined

  const cardClasses = isSelected
    ? "absolute top-0 left-0 flex flex-row w-[380px] max-w-[90vw] h-[220px] bg-zinc-900 border-2 border-[#E50914] rounded-xl overflow-hidden cursor-pointer shadow-2xl z-20 transition-all duration-300"
    : "absolute top-0 left-0 w-full h-full flex flex-col bg-zinc-950/40 border border-white/10 rounded-xl overflow-hidden cursor-pointer transition-all duration-300 z-10 md:group-hover:z-30 md:group-hover:flex-row md:group-hover:scale-105 md:group-hover:w-[380px] md:group-hover:h-[220px] md:group-hover:shadow-2xl shadow-lg";

  const imgContainerClasses = isSelected
    ? "relative w-[150px] h-full flex-shrink-0 overflow-hidden"
    : "relative w-full h-[180px] md:group-hover:w-[150px] md:group-hover:h-full flex-shrink-0 overflow-hidden transition-all duration-300";

  const infoContainerClasses = isSelected
    ? "p-4 flex-grow flex flex-col justify-between min-w-0 h-full bg-zinc-900"
    : "p-3 flex-grow flex flex-col justify-between min-w-0 h-full bg-zinc-900/60 md:group-hover:bg-zinc-900 md:group-hover:p-4 transition-all duration-300";

  return (
    <div 
      id={`course-card-${course.id}`}
      onClick={() => {
        if (!isUnlocked) {
          if (onUnlockRequest) onUnlockRequest(course);
        } else {
          onSelect(course.id);
        }
      }}
      className={`relative h-[320px] w-full group ${!isUnlocked ? 'filter grayscale brightness-75 hover:brightness-100 hover:grayscale-0' : ''}`}
    >
      <div className={cardClasses}>
        {/* Thumbnail */}
        <div className={imgContainerClasses}>
          <img 
            src={course.thumbnail} 
            alt={course.title}
            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
            referrerPolicy="no-referrer"
          />

          {/* Lock Overlay */}
          {!isUnlocked && (
            <div className="absolute inset-0 bg-black/60 flex flex-col items-center justify-center space-y-1.5 z-10 transition-opacity">
              <div className="bg-[#E50914] text-white p-2 rounded-full shadow-[0_0_15px_rgba(229,9,20,0.4)] border border-white/10 animate-pulse">
                <Lock className="w-4 h-4" />
              </div>
              <span className="text-[9px] uppercase tracking-widest font-extrabold text-white bg-black/50 px-2 py-0.5 rounded-full border border-white/5">
                Bloqueado
              </span>
            </div>
          )}

          {/* Play Overlay */}
          {isUnlocked && (
            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <div className="bg-[#E50914] text-white p-2.5 rounded-full transform scale-75 group-hover:scale-100 transition-all duration-300 shadow-lg">
                <Play className="w-5 h-5 fill-white" />
              </div>
            </div>
          )}

          {/* Progress bar at the bottom of the thumbnail */}
          {course.progress !== undefined && course.progress > 0 && (
            <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/10 backdrop-blur-sm">
              <div 
                className="bg-[#E50914] h-full transition-all duration-300 shadow-[0_0_10px_rgba(229,9,20,0.5)]"
                style={{ width: `${course.progress}%` }}
              />
            </div>
          )}
        </div>

        {/* Course Info */}
        <div className={infoContainerClasses}>
          <div className="space-y-1.5">
            {/* Category */}
            <span className="text-[9px] font-bold text-[#E50914] tracking-wider uppercase flex items-center justify-between">
              <span>{course.category}</span>
              {!isUnlocked && course.price !== undefined && (
                <span className="text-white bg-zinc-800 px-1.5 py-0.5 rounded text-[8px] font-mono border border-white/5">
                  R$ {course.price.toFixed(2)}
                </span>
              )}
            </span>
            {/* Title */}
            <h3 className="font-display font-bold text-sm md:text-base text-white tracking-tight leading-snug group-hover:text-[#E50914] transition-colors line-clamp-1">
              {course.title}
            </h3>
            {/* Description */}
            <p className="text-[11px] text-zinc-400 font-normal line-clamp-2 md:group-hover:line-clamp-3 leading-relaxed">
              {course.description}
            </p>
          </div>

          {/* Footer Metrics */}
          <div className="flex items-center justify-between pt-1.5 border-t border-white/5 text-[10px] text-zinc-500">
            <div className="flex items-center space-x-1 font-medium">
              <BookOpen className="w-3 h-3 text-zinc-400" />
              <span>{course.totalLessons || 0} Aulas</span>
            </div>

            {course.progress !== undefined && course.progress > 0 ? (
              <div className="flex items-center space-x-1 text-[#E50914] font-semibold">
                {course.progress === 100 ? (
                  <div className="flex items-center space-x-1 text-emerald-500">
                    <CheckCircle2 className="w-3.5 h-3.5" />
                    <span>Concluído</span>
                  </div>
                ) : (
                  <span>{course.progress}%</span>
                )}
              </div>
            ) : (
              <span className="text-zinc-500 text-[9px] uppercase font-bold flex items-center gap-1">
                {!isUnlocked && <Lock className="w-2 text-[#E50914]" />}
                {!isUnlocked ? 'Bloqueado' : 'Não iniciado'}
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}