import React from 'react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import {
  Users,
  Clock,
  Star,
  ArrowRight,
  ShoppingCart
} from 'lucide-react';
import { motion } from 'motion/react';
import { navigateTo } from './Router';
import { ImageWithFallback } from './figma/ImageWithFallback';
import type { CartItem } from './CartPopup';

// Course type interface
export interface Course {
  id: string;
  title: string;
  thumbnail: string;
  duration: string;
  level: string;
  format: string;
  rating: number;
  reviews: string;
  category: string;
  description: string;
  price: string;
  originalPrice?: string; // For showing discounted prices
}

interface CourseCardProps {
  course: Course;
  onClick?: () => void;
  className?: string;
  onAddToCart?: (item: CartItem) => void;
}

export function CourseCard({ course, onClick, className, onAddToCart }: CourseCardProps) {
  const handleClick = () => {
    if (onClick) {
      onClick();
    } else {
      navigateTo(`/course/${course.id}`);
    }
  };

  const handleAddToCart = (e: React.MouseEvent) => {
    e.stopPropagation(); // Prevent card click when clicking Add to Cart

    if (onAddToCart) {
      const cartItem: CartItem = {
        id: course.id,
        title: course.title,
        thumbnail: course.thumbnail,
        price: course.price,
        originalPrice: course.originalPrice,
        category: course.category,
        level: course.level
      };
      onAddToCart(cartItem);
    }
  };

  return (
    <motion.div
      className={`flex-shrink-0 w-96 h-[560px] bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer group flex flex-col ${className || ''}`}
      onClick={handleClick}
    >
      {/* Course Image with Category Badge */}
      <div className="relative aspect-[16/9] overflow-hidden flex-shrink-0">
        <ImageWithFallback
          src={course.thumbnail}
          alt={course.title}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        />
        <div className="absolute top-4 left-4">
          <Badge
            variant="secondary"
            className="px-3 py-1 font-medium"
            style={{
              backgroundColor: 'rgba(248, 195, 1, 0.95)',
              color: 'var(--color-black)',
              fontSize: 'var(--font-small)',
              fontFamily: 'var(--font-family-base)',
              backdropFilter: 'blur(4px)'
            }}
          >
            {course.category}
          </Badge>
        </div>
      </div>

      {/* Card Content - Reduced horizontal padding */}
      <div className="p-5 flex flex-col flex-1">
        {/* Course Title */}
        <h3
          className="mb-3 group-hover:text-blue-600 transition-colors leading-snug"
          style={{
            fontSize: 'var(--font-h4)',
            fontWeight: 'var(--font-weight-h4)',
            lineHeight: '1.3',
            color: 'var(--color-black)',
            fontFamily: 'var(--font-family-base)'
          }}
        >
          {course.title}
        </h3>

        {/* Course Description - Limited to 2 lines with ellipsis */}
        <p
          className="mb-5 line-clamp-2 leading-relaxed"
          style={{
            fontSize: 'var(--font-body)',
            lineHeight: '1.5',
            color: 'var(--color-gray-muted)',
            fontFamily: 'var(--font-family-base)',
            display: '-webkit-box',
            WebkitLineClamp: 2,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            textOverflow: 'ellipsis'
          }}
        >
          {course.description}
        </p>

        {/* Course Meta Information - Reduced bottom margin */}
        <div className="flex items-center justify-between mb-5 pt-3 border-t border-gray-100">
          <div className="flex items-center gap-5">
            <div className="flex items-center gap-2">
              <Clock className="w-4 h-4 text-gray-400" />
              <span style={{
                fontSize: 'var(--font-small)',
                fontFamily: 'var(--font-family-base)',
                color: 'var(--color-gray-muted)',
                fontWeight: '500'
              }}>
                {course.duration}
              </span>
            </div>
            <div className="flex items-center gap-2">
              <Users className="w-4 h-4 text-gray-400" />
              <span style={{
                fontSize: 'var(--font-small)',
                fontFamily: 'var(--font-family-base)',
                color: 'var(--color-gray-muted)',
                fontWeight: '500'
              }}>
                {course.reviews}
              </span>
            </div>
          </div>

          <div className="flex items-center gap-1">
            <Star className="w-4 h-4 fill-current text-yellow-400" />
            <span
              className="font-semibold"
              style={{
                fontSize: 'var(--font-small)',
                fontFamily: 'var(--font-family-base)',
                color: 'var(--color-black)'
              }}
            >
              {course.rating}
            </span>
          </div>
        </div>

        {/* Pricing Section - Reduced bottom margin */}
        <div className="mb-5">
          <div className="flex items-center justify-between">
            <div className="flex items-baseline gap-3">
              <span
                className="font-bold"
                style={{
                  fontSize: '1.75rem',
                  fontFamily: 'var(--font-family-base)',
                  color: '#04045B'
                }}
              >
                {course.price}
              </span>
              {course.originalPrice && (
                <span
                  className="line-through"
                  style={{
                    fontSize: 'var(--font-body)',
                    fontFamily: 'var(--font-family-base)',
                    color: 'var(--color-gray-muted)'
                  }}
                >
                  {course.originalPrice}
                </span>
              )}
            </div>
            {/* {course.originalPrice && (
              <div className="text-right">
                <span 
                  className="text-green-600 font-semibold text-sm"
                  style={{
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Save {Math.round(((parseFloat(course.originalPrice.replace('$', '')) - parseFloat(course.price.replace('$', ''))) / parseFloat(course.originalPrice.replace('$', ''))) * 100)}%
                </span>
              </div>
            )} */}
          </div>
        </div>

        {/* Action Buttons - Horizontal Layout with reduced gap */}
        <div className="flex flex-row gap-2 mt-auto">
          {/* Add to Cart */}
          <Button
            variant="outline"
            onClick={handleAddToCart}
            className="flex-1 flex items-center justify-center gap-1.5 h-9 rounded-md transition-all duration-200 font-medium px-2"
            style={{
              borderColor: '#04045B',
              color: '#04045B',
              backgroundColor: 'transparent',
              fontSize: '12px', // ⬅️ reduced
              fontFamily: 'var(--font-family-base)',
              fontWeight: '500',
              borderWidth: '1px',
              padding: '8px'
            }}
            onMouseEnter={(e: any) => {
              e.currentTarget.style.backgroundColor = '#04045B';
              e.currentTarget.style.color = 'white';
            }}
            onMouseLeave={(e: any) => {
              e.currentTarget.style.backgroundColor = 'transparent';
              e.currentTarget.style.color = '#04045B';
            }}
          >
            <ShoppingCart className="w-3.5 h-3.5" /> {/* ⬅️ smaller icon */}
            Add to Cart
          </Button>

          {/* Learn More */}
          <Button
            className="flex-1 flex items-center justify-center gap-1.5 h-9 rounded-md transition-all duration-200 font-medium px-2"
            style={{
              backgroundColor: '#04045B',
              color: 'white',
              fontSize: '12px', // ⬅️ reduced
              fontFamily: 'var(--font-family-base)',
              fontWeight: '500',
              border: 'none',
              padding: '8px'
            }}
            onMouseEnter={(e: any) => {
              e.currentTarget.style.backgroundColor = '#030359';
            }}
            onMouseLeave={(e: any) => {
              e.currentTarget.style.backgroundColor = '#04045B';
            }}
          >
            Learn More
            <ArrowRight className="w-3.5 h-3.5" /> {/* ⬅️ smaller icon */}
          </Button>
        </div>
      </div>
    </motion.div>
  );
}
