/**
 * ContinueLearningCard Component
 * Displays continue learning suggestion with course progress
 * OQI-002: Modulo Educativo
 */

import React from 'react';
import { Link } from 'react-router-dom';
import { Play, BookOpen, Clock, TrendingUp, Loader2 } from 'lucide-react';
import { useContinueLearning } from '../hooks';

interface ContinueLearningCardProps {
  className?: string;
}

const ContinueLearningCard: React.FC<ContinueLearningCardProps> = ({ className = '' }) => {
  const { data: continueLearning, isLoading, error } = useContinueLearning();

  // Loading state
  if (isLoading) {
    return (
      <div className={`bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-xl border border-blue-500/30 p-6 ${className}`}>
        <div className="flex items-center justify-center py-4">
          <Loader2 className="w-6 h-6 text-blue-400 animate-spin" />
        </div>
      </div>
    );
  }

  // No continue learning data
  if (!continueLearning || error) {
    return (
      <div className={`bg-gray-800 rounded-xl border border-gray-700 p-6 ${className}`}>
        <div className="text-center">
          <BookOpen className="w-12 h-12 text-gray-600 mx-auto mb-3" />
          <h3 className="font-medium text-white mb-2">Comienza tu viaje de aprendizaje</h3>
          <p className="text-sm text-gray-400 mb-4">
            Inscribete en un curso para empezar
          </p>
          <Link
            to="/education/courses"
            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-colors"
          >
            <BookOpen className="w-4 h-4" />
            Explorar Cursos
          </Link>
        </div>
      </div>
    );
  }

  const formatTime = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    const diffDays = Math.floor(diffHours / 24);

    if (diffHours < 1) return 'Hace unos minutos';
    if (diffHours < 24) return `Hace ${diffHours}h`;
    if (diffDays === 1) return 'Ayer';
    if (diffDays < 7) return `Hace ${diffDays} dias`;
    return date.toLocaleDateString('es-ES', { month: 'short', day: 'numeric' });
  };

  return (
    <div className={`bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-xl border border-blue-500/30 overflow-hidden ${className}`}>
      <div className="flex flex-col md:flex-row">
        {/* Thumbnail */}
        <div className="relative md:w-48 lg:w-56 flex-shrink-0">
          {continueLearning.courseThumbnail ? (
            <img
              src={continueLearning.courseThumbnail}
              alt={continueLearning.courseTitle}
              className="w-full h-32 md:h-full object-cover"
            />
          ) : (
            <div className="w-full h-32 md:h-full bg-gradient-to-br from-blue-600/30 to-purple-600/30 flex items-center justify-center">
              <BookOpen className="w-12 h-12 text-blue-400/50" />
            </div>
          )}
          {/* Progress overlay */}
          <div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-900/50">
            <div
              className="h-full bg-blue-500"
              style={{ width: `${continueLearning.progressPercentage}%` }}
            />
          </div>
        </div>

        {/* Content */}
        <div className="flex-1 p-4 md:p-5">
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1 min-w-0">
              <p className="text-sm text-blue-400 font-medium mb-1">Continua donde lo dejaste</p>
              <h3 className="font-semibold text-white text-lg mb-2 line-clamp-1">
                {continueLearning.courseTitle}
              </h3>
              <p className="text-sm text-gray-400 mb-3 line-clamp-1">
                <span className="text-gray-500">Siguiente:</span>{' '}
                {continueLearning.lastLessonTitle}
              </p>

              {/* Stats */}
              <div className="flex items-center gap-4 text-xs text-gray-400">
                <span className="flex items-center gap-1">
                  <TrendingUp className="w-3.5 h-3.5" />
                  {continueLearning.progressPercentage}% completado
                </span>
                <span className="flex items-center gap-1">
                  <Clock className="w-3.5 h-3.5" />
                  {formatTime(continueLearning.lastAccessedAt)}
                </span>
              </div>
            </div>

            {/* Action Button */}
            <Link
              to={`/education/courses/${continueLearning.courseSlug}/lesson/${continueLearning.lastLessonId}`}
              className="flex-shrink-0 flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-colors"
            >
              <Play className="w-4 h-4" />
              <span className="hidden sm:inline">Continuar</span>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContinueLearningCard;
