/**
 * CourseCard Component
 * Displays course information in a card format for listings
 */

import React from 'react';
import { Link } from 'react-router-dom';
import { Clock, Users, Star, BookOpen, Zap } from 'lucide-react';
import type { CourseListItem } from '../../types/education.types';

interface CourseCardProps {
  course: CourseListItem;
  showProgress?: boolean;
  progressPercentage?: number;
}

const difficultyColors = {
  beginner: 'bg-green-500/20 text-green-400 border-green-500/30',
  intermediate: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
  advanced: 'bg-red-500/20 text-red-400 border-red-500/30',
};

const difficultyLabels = {
  beginner: 'Principiante',
  intermediate: 'Intermedio',
  advanced: 'Avanzado',
};

export const CourseCard: React.FC<CourseCardProps> = ({
  course,
  showProgress = false,
  progressPercentage = 0,
}) => {
  const formatDuration = (minutes: number) => {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours === 0) return `${mins}m`;
    if (mins === 0) return `${hours}h`;
    return `${hours}h ${mins}m`;
  };

  return (
    <Link
      to={`/education/courses/${course.slug}`}
      className="group block bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-blue-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10"
    >
      {/* Thumbnail */}
      <div className="relative aspect-video bg-gray-900 overflow-hidden">
        {course.thumbnailUrl ? (
          <img
            src={course.thumbnailUrl}
            alt={course.title}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-600/20 to-purple-600/20">
            <BookOpen className="w-12 h-12 text-gray-600" />
          </div>
        )}

        {/* Free Badge */}
        {course.isFree && (
          <span className="absolute top-3 left-3 px-2 py-1 bg-green-500 text-white text-xs font-semibold rounded">
            GRATIS
          </span>
        )}

        {/* XP Badge */}
        <span className="absolute top-3 right-3 px-2 py-1 bg-purple-500/90 text-white text-xs font-semibold rounded flex items-center gap-1">
          <Zap className="w-3 h-3" />
          {course.xpReward} XP
        </span>

        {/* Progress Bar */}
        {showProgress && progressPercentage > 0 && (
          <div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-700">
            <div
              className="h-full bg-blue-500 transition-all"
              style={{ width: `${progressPercentage}%` }}
            />
          </div>
        )}
      </div>

      {/* Content */}
      <div className="p-4">
        {/* Category & Difficulty */}
        <div className="flex items-center gap-2 mb-2">
          {course.category && (
            <span className="text-xs text-gray-400">{course.category.name}</span>
          )}
          <span className="text-gray-600">•</span>
          <span
            className={`text-xs px-2 py-0.5 rounded-full border ${difficultyColors[course.difficultyLevel]}`}
          >
            {difficultyLabels[course.difficultyLevel]}
          </span>
        </div>

        {/* Title */}
        <h3 className="font-semibold text-white group-hover:text-blue-400 transition-colors line-clamp-2 mb-2">
          {course.title}
        </h3>

        {/* Description */}
        {course.shortDescription && (
          <p className="text-sm text-gray-400 line-clamp-2 mb-3">
            {course.shortDescription}
          </p>
        )}

        {/* Instructor */}
        {course.instructorName && (
          <div className="flex items-center gap-2 mb-3">
            {course.instructorAvatar ? (
              <img
                src={course.instructorAvatar}
                alt={course.instructorName}
                className="w-6 h-6 rounded-full"
              />
            ) : (
              <div className="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center">
                <span className="text-xs text-gray-400">
                  {course.instructorName.charAt(0)}
                </span>
              </div>
            )}
            <span className="text-sm text-gray-400">{course.instructorName}</span>
          </div>
        )}

        {/* Stats */}
        <div className="flex items-center gap-4 text-xs text-gray-500">
          <span className="flex items-center gap-1">
            <BookOpen className="w-3.5 h-3.5" />
            {course.totalLessons} lecciones
          </span>
          <span className="flex items-center gap-1">
            <Clock className="w-3.5 h-3.5" />
            {formatDuration(course.totalDuration)}
          </span>
          <span className="flex items-center gap-1">
            <Users className="w-3.5 h-3.5" />
            {course.totalEnrollments.toLocaleString()}
          </span>
        </div>

        {/* Rating & Price */}
        <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-700">
          <div className="flex items-center gap-1">
            <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
            <span className="text-sm font-medium text-white">
              {course.avgRating.toFixed(1)}
            </span>
            <span className="text-xs text-gray-500">({course.totalReviews})</span>
          </div>

          {!course.isFree && course.priceUsd && (
            <span className="text-lg font-bold text-white">
              ${course.priceUsd.toFixed(2)}
            </span>
          )}
        </div>
      </div>
    </Link>
  );
};

export default CourseCard;
