import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router';
import type { Course } from '../types/course';
import { 
  FiStar, 
  FiClock, 
  FiBook, 
  FiGlobe, 
  FiCheck, 
  FiShoppingCart, 
  FiPlay, 
  FiChevronDown, 
  FiChevronUp,
  FiAward,
  FiShield,
  FiArrowLeft
} from 'react-icons/fi';

interface CourseDetailViewProps {
  courses: Course[];
  cartCourseIds: string[];
  onAddToCart: (course: Course) => void;
  onBuyNow: (course: Course) => void;
}

export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
  courses,
  cartCourseIds,
  onAddToCart,
  onBuyNow,
}) => {
  const { courseId } = useParams<{ courseId: string }>();
  const navigate = useNavigate();

  const course = courses.find((c) => c.id === courseId) || courses[0];
  const isInCart = cartCourseIds.includes(course.id);

  const [activeTab, setActiveTab] = useState<'overview' | 'curriculum' | 'instructor' | 'reviews'>('overview');
  const [expandedModules, setExpandedModules] = useState<string[]>([course.modules[0]?.id || 'm-1']);

  const toggleModule = (id: string) => {
    if (expandedModules.includes(id)) {
      setExpandedModules(expandedModules.filter((mId) => mId !== id));
    } else {
      setExpandedModules([...expandedModules, id]);
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 pb-20">
      
      {/* Top Breadcrumb & Back Navigation */}
      <div className="bg-slate-900/60 border-b border-slate-800 py-3">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <button
            onClick={() => navigate('/courses')}
            className="inline-flex items-center gap-2 text-xs font-semibold text-slate-400 hover:text-cyan-400 transition"
          >
            <FiArrowLeft /> Regresar al Catálogo
          </button>
        </div>
      </div>

      {/* Main Course Hero & Details */}
      <div className="bg-gradient-to-b from-slate-900 via-slate-950 to-slate-950 border-b border-slate-800 py-10 lg:py-14">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
            
            {/* Left Info Column */}
            <div className="lg:col-span-8 space-y-6">
              
              <div className="flex flex-wrap items-center gap-2 text-xs">
                <span className="px-3 py-1 rounded-full font-bold bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">
                  {course.category}
                </span>
                <span className="px-2.5 py-1 rounded bg-slate-800 text-slate-300 font-medium">
                  Nivel: {course.level}
                </span>
                {course.badge && (
                  <span className="px-2.5 py-1 rounded bg-amber-500 text-slate-950 font-black">
                    🔥 {course.badge}
                  </span>
                )}
              </div>

              <h1 className="text-3xl sm:text-4xl font-extrabold text-white leading-tight">
                {course.title}
              </h1>

              <p className="text-slate-300 text-base sm:text-lg leading-relaxed">
                {course.subtitle}
              </p>

              {/* Rating & Instructor summary */}
              <div className="flex flex-wrap items-center gap-4 text-xs text-slate-300 pt-1">
                <div className="flex items-center gap-1.5 font-bold text-amber-400">
                  <span>{course.rating.toFixed(1)}</span>
                  <div className="flex">
                    {[...Array(5)].map((_, i) => (
                      <FiStar key={i} className="fill-amber-400 text-amber-400 text-sm" />
                    ))}
                  </div>
                  <span className="text-slate-400 font-normal">({course.reviewsCount} reseñas)</span>
                </div>

                <span className="text-slate-600">•</span>
                <span className="text-slate-300">{course.studentsCount.toLocaleString()} alumnos inscritos</span>
              </div>

              <div className="flex flex-wrap items-center gap-6 text-xs text-slate-400 pt-2 border-t border-slate-800/80">
                <div className="flex items-center gap-2">
                  <img
                    src={course.instructor.avatar}
                    alt={course.instructor.name}
                    className="w-8 h-8 rounded-full object-cover ring-1 ring-cyan-400"
                  />
                  <span>Creado por <strong className="text-white font-medium">{course.instructor.name}</strong></span>
                </div>

                <div className="flex items-center gap-1.5">
                  <FiGlobe className="text-cyan-400" />
                  <span>{course.language}</span>
                </div>

                <div className="flex items-center gap-1.5">
                  <FiClock className="text-cyan-400" />
                  <span>Última actualización: {course.updatedAt}</span>
                </div>
              </div>

            </div>

            {/* Right Sticky Purchase Card */}
            <div className="lg:col-span-4">
              <div className="bg-slate-900 border border-slate-700/80 rounded-3xl p-6 shadow-2xl space-y-6 sticky top-24">
                
                {/* Thumbnail Preview */}
                <div className="relative rounded-2xl overflow-hidden aspect-video bg-slate-800 group">
                  <img
                    src={course.thumbnail}
                    alt={course.title}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-slate-950/40 flex items-center justify-center">
                    <div className="w-14 h-14 rounded-full bg-cyan-500 text-slate-950 flex items-center justify-center text-xl shadow-xl shadow-cyan-500/40 group-hover:scale-110 transition">
                      <FiPlay className="ml-1" />
                    </div>
                  </div>
                </div>

                {/* Price section */}
                <div className="space-y-1">
                  <div className="flex items-baseline gap-3">
                    <span className="text-3xl font-black text-white font-mono">
                      ${course.price.toFixed(2)}
                    </span>
                    <span className="text-sm text-slate-500 line-through font-mono">
                      ${course.originalPrice.toFixed(2)}
                    </span>
                  </div>
                  <p className="text-xs text-emerald-400 font-semibold">
                    ¡Ahorra un {Math.round(((course.originalPrice - course.price) / course.originalPrice) * 100)}%!
                  </p>
                </div>

                {/* Buttons */}
                <div className="space-y-3">
                  <button
                    onClick={() => onBuyNow(course)}
                    className="w-full py-3.5 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white font-bold rounded-xl text-sm shadow-xl shadow-cyan-500/25 transition-all text-center"
                  >
                    Comprar Ahora
                  </button>

                  <button
                    onClick={() => onAddToCart(course)}
                    className={`w-full py-3.5 border rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-2 ${
                      isInCart
                        ? 'bg-emerald-500/20 border-emerald-500/40 text-emerald-300'
                        : 'bg-slate-800 hover:bg-slate-700 border-slate-700 text-white'
                    }`}
                  >
                    {isInCart ? <FiCheck /> : <FiShoppingCart />}
                    <span>{isInCart ? 'En el Carrito' : 'Añadir al Carrito'}</span>
                  </button>
                </div>

                {/* Benefits checklist */}
                <div className="space-y-2.5 pt-4 border-t border-slate-800 text-xs text-slate-300">
                  <h4 className="font-bold text-white uppercase tracking-wider text-[11px]">Este curso incluye:</h4>
                  <div className="flex items-center gap-2">
                    <FiClock className="text-cyan-400 shrink-0" />
                    <span>{course.duration} de video bajo demanda</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <FiBook className="text-cyan-400 shrink-0" />
                    <span>{course.lessonsCount} lecciones descargables</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <FiAward className="text-cyan-400 shrink-0" />
                    <span>Certificado de finalización</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <FiShield className="text-emerald-400 shrink-0" />
                    <span>Garantía de reembolso de 30 días</span>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>
      </div>

      {/* Main Content Tabs & Curriculum */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="lg:w-8/12 space-y-10">
          
          {/* Navigation Tabs */}
          <div className="flex border-b border-slate-800 space-x-6 text-sm font-semibold">
            <button
              onClick={() => setActiveTab('overview')}
              className={`pb-3 transition-colors ${
                activeTab === 'overview'
                  ? 'text-cyan-400 border-b-2 border-cyan-400'
                  : 'text-slate-400 hover:text-white'
              }`}
            >
              Descripción
            </button>
            <button
              onClick={() => setActiveTab('curriculum')}
              className={`pb-3 transition-colors ${
                activeTab === 'curriculum'
                  ? 'text-cyan-400 border-b-2 border-cyan-400'
                  : 'text-slate-400 hover:text-white'
              }`}
            >
              Temario del Curso ({course.modules.length} módulos)
            </button>
            <button
              onClick={() => setActiveTab('instructor')}
              className={`pb-3 transition-colors ${
                activeTab === 'instructor'
                  ? 'text-cyan-400 border-b-2 border-cyan-400'
                  : 'text-slate-400 hover:text-white'
              }`}
            >
              Instructor
            </button>
          </div>

          {/* Tab 1: What you will learn */}
          {activeTab === 'overview' && (
            <div className="space-y-8">
              <div className="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 space-y-4">
                <h3 className="text-lg font-bold text-white">Lo que aprenderás</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-slate-300">
                  {course.whatYouWillLearn.map((item, idx) => (
                    <div key={idx} className="flex items-start gap-2">
                      <FiCheck className="text-cyan-400 shrink-0 mt-0.5" />
                      <span>{item}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="space-y-3">
                <h3 className="text-lg font-bold text-white">Requisitos previas</h3>
                <ul className="list-disc list-inside space-y-1.5 text-xs text-slate-300">
                  {course.requirements.map((req, idx) => (
                    <li key={idx}>{req}</li>
                  ))}
                </ul>
              </div>
            </div>
          )}

          {/* Tab 2: Curriculum Accordion */}
          {activeTab === 'curriculum' && (
            <div className="space-y-4">
              <h3 className="text-lg font-bold text-white">Contenido del Programa</h3>
              <div className="divide-y divide-slate-800 border border-slate-800 rounded-2xl bg-slate-900/60 overflow-hidden">
                {course.modules.map((mod) => (
                  <div key={mod.id} className="bg-slate-900/90">
                    <button
                      onClick={() => toggleModule(mod.id)}
                      className="w-full px-5 py-4 flex items-center justify-between text-left hover:bg-slate-800/60 transition"
                    >
                      <div className="flex items-center gap-3">
                        {expandedModules.includes(mod.id) ? (
                          <FiChevronUp className="text-cyan-400 text-lg" />
                        ) : (
                          <FiChevronDown className="text-slate-500 text-lg" />
                        )}
                        <span className="text-sm font-bold text-white">{mod.title}</span>
                      </div>
                      <span className="text-xs text-slate-400 font-mono">{mod.lessons.length} lecciones</span>
                    </button>

                    {expandedModules.includes(mod.id) && (
                      <div className="px-5 pb-4 space-y-2 bg-slate-950/40 divide-y divide-slate-800/40">
                        {mod.lessons.map((les) => (
                          <div key={les.id} className="pt-2 flex items-center justify-between text-xs text-slate-300">
                            <div className="flex items-center gap-2">
                              <FiPlay className="text-cyan-400 text-xs" />
                              <span>{les.title}</span>
                            </div>
                            <span className="text-slate-500 font-mono text-[11px]">{les.duration}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Tab 3: Instructor */}
          {activeTab === 'instructor' && (
            <div className="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 space-y-4">
              <div className="flex items-center gap-4">
                <img
                  src={course.instructor.avatar}
                  alt={course.instructor.name}
                  className="w-16 h-16 rounded-full object-cover ring-2 ring-cyan-400"
                />
                <div>
                  <h3 className="text-lg font-bold text-white">{course.instructor.name}</h3>
                  <p className="text-xs text-cyan-400 font-medium">{course.instructor.role}</p>
                </div>
              </div>
              <p className="text-xs text-slate-300 leading-relaxed">
                {course.instructor.bio}
              </p>
            </div>
          )}

        </div>
      </div>

    </div>
  );
};