import { useState } from 'react';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { 
  Headphones, 
  Download, 
  Play, 
  Clock, 
  BookOpen,
  Calendar,
  ArrowLeft
} from 'lucide-react';
import { Link } from 'react-router-dom';

interface Clase {
  id: number;
  titulo: string;
  modulo: string;
  duracion: string;
  fecha: string;
  descripcion: string;
  archivo: string;
}

const CLASES: Clase[] = [
  {
    id: 1,
    titulo: 'Clase 1: Fundamentos de Economía',
    modulo: 'Módulo 1',
    duracion: '63 minutos',
    fecha: '27 de Enero, 2025',
    descripcion: 'Introducción a la economía, el problema económico fundamental, sistemas económicos, frontera de posibilidades de producción, agentes económicos y factores de producción.',
    archivo: '/audios/clase1_completa.m4a'
  },
  {
    id: 2,
    titulo: 'Clase 2: Oferta, Demanda y Equilibrio',
    modulo: 'Módulo 2',
    duracion: '103 minutos',
    fecha: '30 de Enero, 2025',
    descripcion: 'Ley de la demanda, ley de la oferta, equilibrio de mercado, elasticidad de la demanda y controles de precio. Análisis completo del funcionamiento de los mercados.',
    archivo: '/audios/clase2_completa.m4a'
  },
  {
    id: 3,
    titulo: 'Clase 3: Elasticidad y Teoría del Consumidor',
    modulo: 'Módulo 3',
    duracion: '52 minutos',
    fecha: '3 de Febrero, 2025',
    descripcion: 'Elasticidad precio, ingreso y cruzada. Utilidad total y marginal, restricción presupuestaria y maximización de la satisfacción del consumidor.',
    archivo: '/audios/clase3_completa.m4a'
  },
  {
    id: 4,
    titulo: 'Clase 4: Teoría del Productor',
    modulo: 'Módulo 4',
    duracion: '46 minutos',
    fecha: '6 de Febrero, 2025',
    descripcion: 'Función de producción, ley de rendimientos decrecientes, costos a corto y largo plazo, ingresos y maximización de beneficios en competencia perfecta.',
    archivo: '/audios/clase4_completa.m4a'
  }
];

export function ClasesGrabadasPage() {
  const [claseReproduciendo, setClaseReproduciendo] = useState<number | null>(null);

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-6xl mx-auto px-4">
        {/* Header */}
        <div className="mb-8">
          <Link 
            to="/"
            className="inline-flex items-center text-gray-600 hover:text-blue-600 mb-4"
          >
            <ArrowLeft size={20} className="mr-2" />
            Volver al Dashboard
          </Link>
          
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
              <Headphones className="w-7 h-7 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-gray-900">Clases Grabadas</h1>
              <p className="text-gray-600">
                Escucha las clases completas en audio o descárgalas
              </p>
            </div>
          </div>
        </div>

        {/* Info Banner */}
        <Card className="mb-8 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
          <div className="flex items-start gap-4">
            <div className="p-3 bg-blue-100 rounded-xl">
              <BookOpen className="w-6 h-6 text-blue-600" />
            </div>
            <div className="flex-1">
              <h2 className="text-lg font-semibold text-blue-900 mb-2">
                ¿Cómo usar las clases grabadas?
              </h2>
              <ul className="space-y-2 text-blue-800 text-sm">
                <li className="flex items-start gap-2">
                  <span className="text-blue-500 mt-0.5">•</span>
                  <span>Cada clase corresponde a un módulo del curso</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-500 mt-0.5">•</span>
                  <span>Puedes escuchar directamente en la web o descargar para escuchar offline</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-500 mt-0.5">•</span>
                  <span>Te recomendamos escuchar la clase antes de hacer los ejercicios del módulo</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-500 mt-0.5">•</span>
                  <span>Total: {CLASES.length} clases · Duración total aproximada: 4.5 horas</span>
                </li>
              </ul>
            </div>
          </div>
        </Card>

        {/* Lista de Clases */}
        <div className="space-y-6">
          {CLASES.map((clase) => (
            <Card key={clase.id} className="hover:shadow-lg transition-shadow">
              <div className="flex flex-col lg:flex-row gap-6">
                {/* Icono/Info */}
                <div className="flex items-start gap-4 lg:w-1/3">
                  <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-2xl flex items-center justify-center flex-shrink-0">
                    <span className="text-2xl font-bold text-indigo-600">{clase.id}</span>
                  </div>
                  
                  <div className="flex-1">
                    <span className="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full mb-2">
                      {clase.modulo}
                    </span>
                    
                    <h3 className="text-lg font-bold text-gray-900 mb-1">
                      {clase.titulo}
                    </h3>
                    
                    <div className="flex items-center gap-4 text-sm text-gray-500">
                      <span className="flex items-center gap-1">
                        <Clock size={14} />
                        {clase.duracion}
                      </span>
                      <span className="flex items-center gap-1">
                        <Calendar size={14} />
                        {clase.fecha}
                      </span>
                    </div>
                  </div>
                </div>

                {/* Descripción */}
                <div className="lg:w-1/3">
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {clase.descripcion}
                  </p>
                </div>

                {/* Acciones */}
                <div className="flex flex-col sm:flex-row gap-3 lg:w-1/3 lg:justify-end">
                  <Button
                    onClick={() => setClaseReproduciendo(claseReproduciendo === clase.id ? null : clase.id)}
                    className="flex-1 sm:flex-none"
                  >
                    <Play size={18} className="mr-2" />
                    {claseReproduciendo === clase.id ? 'Ocultar' : 'Escuchar'}
                  </Button>
                  
                  <a 
                    href={clase.archivo}
                    download
                    className="flex-1 sm:flex-none"
                  >
                    <Button variant="outline" className="w-full">
                      <Download size={18} className="mr-2" />
                      Descargar
                    </Button>
                  </a>
                </div>
              </div>

              {/* Reproductor de Audio */}
              {claseReproduciendo === clase.id && (
                <div className="mt-6 pt-6 border-t border-gray-100">
                  <audio 
                    controls 
                    className="w-full"
                    autoPlay
                  >
                    <source src={clase.archivo} type="audio/mp4" />
                    Tu navegador no soporta el elemento de audio.
                  </audio>
                  <p className="text-sm text-gray-500 mt-3 text-center">
                    💡 Tip: Puedes descargar el audio para escucharlo sin conexión
                  </p>
                </div>
              )}
            </Card>
          ))}
        </div>

        {/* Footer */}
        <div className="mt-12 text-center">
          <p className="text-gray-500 text-sm mb-4">
            ¿Ya escuchaste las clases? Pasa a los ejercicios interactivos para practicar.
          </p>
          <Link to="/modulos">
            <Button>
              Ir a los Ejercicios
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}

export default ClasesGrabadasPage;