'use client';

import React from 'react';
import Link from 'next/link';
import { 
  ClockIcon, 
  UserIcon, 
  PlayIcon,
  CheckCircleIcon
} from '@heroicons/react/24/outline';
import { cn } from '@/utils/cn';
import { Course } from '@/types';

interface CourseCardProps {
  course: {
    id: string;
    title: string;
    instructor: string;
    progress: number;
    status: 'Wajib' | 'Berlangsung' | 'Baru' | 'Selesai';
    thumbnail?: string;
    duration?: string;
    color?: 'pink' | 'blue' | 'orange' | 'green' | 'purple';
  };
  className?: string;
}

const statusConfig = {
  'Wajib': {
    bg: 'bg-red-100',
    text: 'text-red-700',
    badge: 'bg-red-500'
  },
  'Berlangsung': {
    bg: 'bg-blue-100',
    text: 'text-blue-700',
    badge: 'bg-blue-500'
  },
  'Baru': {
    bg: 'bg-green-100',
    text: 'text-green-700',
    badge: 'bg-green-500'
  },
  'Selesai': {
    bg: 'bg-gray-100',
    text: 'text-gray-700',
    badge: 'bg-gray-500'
  }
};

const colorGradients = {
  pink: 'from-rose-400 to-rose-600',
  blue: 'from-blue-400 to-blue-600',
  orange: 'from-amber-400 to-amber-600',
  green: 'from-green-400 to-green-600',
  purple: 'from-emerald-400 to-emerald-600'
};

const courseIcons = {
  pink: '🛡️',
  blue: '💙',
  orange: '🏢',
  green: '✅',
  purple: '🎓'
};

export function CourseCard({ course, className }: CourseCardProps) {
  const statusStyle = statusConfig[course.status];
  const gradientClass = colorGradients[course.color || 'blue'];
  const icon = courseIcons[course.color || 'blue'];

  return (
    <Link href={`/course/${course.id}`}>
      <div className={cn(
        'group relative overflow-hidden rounded-xl bg-white shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300 cursor-pointer',
        className
      )}>
        {/* Header with gradient background */}
        <div className={cn(
          'relative h-32 bg-gradient-to-br p-4 flex items-center justify-center',
          gradientClass
        )}>
          {/* Background decoration */}
          <div className="absolute inset-0 bg-black/10" />
          <div className="absolute -top-4 -right-4 w-16 h-16 rounded-full bg-white/20" />
          <div className="absolute -bottom-2 -left-2 w-12 h-12 rounded-full bg-white/10" />
          
          {/* Course icon */}
          <div className="relative z-10 text-4xl">
            {icon}
          </div>
          
          {/* Status badge */}
          <div className="absolute top-3 right-3">
            <span className={cn(
              'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-white',
              statusStyle.badge
            )}>
              {course.status}
            </span>
          </div>
        </div>
        
        {/* Content */}
        <div className="p-4">
          <h3 className="font-semibold text-gray-900 text-sm leading-tight mb-2 group-hover:text-primary-600 transition-colors">
            {course.title}
          </h3>
          
          <div className="flex items-center text-xs text-gray-500 mb-3">
            <UserIcon className="w-3 h-3 mr-1" />
            <span className="truncate">{course.instructor}</span>
          </div>
          
          {/* Progress bar */}
          <div className="mb-3">
            <div className="flex items-center justify-between text-xs text-gray-600 mb-1">
              <span>Progress: {course.progress}%</span>
              <span>{course.duration || '120 Menit'}</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className={cn(
                  'h-2 rounded-full bg-gradient-to-r transition-all duration-300',
                  gradientClass
                )}
                style={{ width: `${course.progress}%` }}
              />
            </div>
          </div>
          
          {/* Action button */}
          <button className={cn(
            'w-full flex items-center justify-center px-3 py-2 rounded-lg text-xs font-medium transition-colors duration-200',
            course.progress === 100 
              ? 'bg-green-50 text-green-700 hover:bg-green-100'
              : 'bg-green-50 text-green-700 hover:bg-green-100'
          )}>
            {course.progress === 100 ? (
              <>
                <CheckCircleIcon className="w-4 h-4 mr-1" />
                Selesai
              </>
            ) : (
              <>
                <PlayIcon className="w-4 h-4 mr-1" />
                {course.progress === 0 ? 'Mulai Belajar' : 'Lanjutkan'}
              </>
            )}
          </button>
        </div>
      </div>
    </Link>
  );
}

export default CourseCard;