/**
 * Course Product Card Component
 * Displays course product for marketplace with enrollment options
 */

import React from 'react';
import { Link } from 'react-router-dom';
import {
  Star,
  Users,
  Clock,
  BookOpen,
  CheckCircle,
  Play,
} from 'lucide-react';
import type { MarketplaceProductListItem } from '../../../types/marketplace.types';

interface CourseProductCardProps {
  course: MarketplaceProductListItem;
  onEnroll?: (courseId: string) => void;
}

export const CourseProductCard: React.FC<CourseProductCardProps> = ({ course, onEnroll }) => {
  const difficultyColors: Record<string, string> = {
    beginner: 'bg-green-500/20 text-green-400',
    intermediate: 'bg-yellow-500/20 text-yellow-400',
    advanced: 'bg-red-500/20 text-red-400',
  };

  // Extract difficulty from tags
  const getDifficulty = () => {
    const level = course.tags.find((t) =>
      ['beginner', 'intermediate', 'advanced'].includes(t.toLowerCase())
    );
    return level?.toLowerCase() || 'beginner';
  };

  const difficulty = getDifficulty();

  return (
    <div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden hover:border-gray-600 transition-all duration-200 hover:shadow-lg hover:shadow-green-500/5">
      {/* Thumbnail */}
      <div className="relative h-40 bg-gradient-to-br from-green-600/20 to-teal-600/20">
        {course.thumbnailUrl ? (
          <img
            src={course.thumbnailUrl}
            alt={course.name}
            className="w-full h-full object-cover"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            <BookOpen className="w-16 h-16 text-green-500/50" />
          </div>
        )}

        {/* Play icon overlay */}
        <div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 hover:opacity-100 transition-opacity">
          <div className="w-14 h-14 rounded-full bg-white/90 flex items-center justify-center">
            <Play className="w-6 h-6 text-gray-900 ml-1" />
          </div>
        </div>

        {/* Free badge */}
        {course.priceUsd === 0 && (
          <div className="absolute top-3 left-3 px-2 py-1 bg-green-500 text-white text-xs font-medium rounded-full">
            FREE
          </div>
        )}

        {/* Difficulty badge */}
        <div
          className={`absolute top-3 right-3 px-2 py-1 text-xs font-medium rounded-full ${
            difficultyColors[difficulty]
          }`}
        >
          {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
        </div>
      </div>

      {/* Content */}
      <div className="p-4">
        {/* Instructor info */}
        <div className="flex items-center gap-2 mb-3">
          {course.providerAvatar ? (
            <img
              src={course.providerAvatar}
              alt={course.providerName}
              className="w-7 h-7 rounded-full"
            />
          ) : (
            <div className="w-7 h-7 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-xs">
              {course.providerName.charAt(0)}
            </div>
          )}
          <span className="text-sm text-gray-400 truncate flex items-center gap-1">
            {course.providerName}
            {course.providerVerified && (
              <CheckCircle className="w-3.5 h-3.5 text-blue-400" />
            )}
          </span>
        </div>

        {/* Title */}
        <h3 className="text-lg font-semibold text-white mb-2 line-clamp-2 min-h-[3.5rem]">
          {course.name}
        </h3>

        {/* Meta info */}
        <div className="flex items-center gap-4 text-sm text-gray-400 mb-4">
          <span className="flex items-center gap-1">
            <Clock className="w-4 h-4" />
            {Math.floor(Math.random() * 10) + 2}h
          </span>
          <span className="flex items-center gap-1">
            <BookOpen className="w-4 h-4" />
            {Math.floor(Math.random() * 30) + 5} lessons
          </span>
        </div>

        {/* Rating and Enrollments */}
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-1">
            <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
            <span className="font-semibold text-white">{course.rating.toFixed(1)}</span>
            <span className="text-gray-500 text-sm">({course.totalReviews})</span>
          </div>
          <div className="flex items-center gap-1 text-gray-400 text-sm">
            <Users className="w-4 h-4" />
            {(course.totalSubscribers || 0).toLocaleString()} enrolled
          </div>
        </div>

        {/* Topics/Tags */}
        <div className="flex flex-wrap gap-1 mb-4">
          {course.tags
            .filter((t) => !['beginner', 'intermediate', 'advanced'].includes(t.toLowerCase()))
            .slice(0, 3)
            .map((tag, idx) => (
              <span
                key={idx}
                className="px-2 py-0.5 bg-gray-700 text-gray-300 text-xs rounded"
              >
                {tag}
              </span>
            ))}
        </div>

        {/* Price and CTA */}
        <div className="flex items-center justify-between pt-3 border-t border-gray-700">
          <div>
            {course.priceUsd === 0 ? (
              <span className="text-xl font-bold text-green-400">Free</span>
            ) : (
              <>
                <span className="text-xl font-bold text-white">${course.priceUsd}</span>
              </>
            )}
          </div>
          <div className="flex gap-2">
            <Link
              to={`/marketplace/courses/${course.slug}`}
              className="px-3 py-2 text-gray-400 hover:text-white text-sm font-medium transition-colors"
            >
              Preview
            </Link>
            <button
              onClick={() => onEnroll?.(course.id)}
              className="px-4 py-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium rounded-lg transition-colors"
            >
              {course.priceUsd === 0 ? 'Enroll Free' : 'Buy Course'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CourseProductCard;
