import { useState } from 'react';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { FileText, Download, BookOpen, ArrowLeft, X, Eye } from 'lucide-react';
import { Link } from 'react-router-dom';

const recursos = [
  {
    id: 1,
    titulo: 'Resumen Clase 1 - Fundamentos de Economía',
    descripcion: 'Definición de economía, agentes económicos, factores de producción y flujo circular',
    archivo: '/pdfs/resumen_clase_1.pdf',
    modulo: 'Módulo 1',
    icono: FileText
  },
  {
    id: 2,
    titulo: 'Resumen Clase 2 - Oferta, Demanda y Equilibrio',
    descripcion: 'Ley de la demanda, ley de la oferta, equilibrio de mercado y controles de precios',
    archivo: '/pdfs/resumen_clase_2.pdf',
    modulo: 'Módulo 2',
    icono: FileText
  },
  {
    id: 3,
    titulo: 'Resumen Clase 3 - Elasticidad',
    descripcion: 'Tipos de elasticidad, cálculos y clasificación de bienes según elasticidad',
    archivo: '/pdfs/resumen_clase_3.pdf',
    modulo: 'Módulo 3',
    icono: FileText
  },
  {
    id: 4,
    titulo: 'Resumen Clase 4 - Teoría del Productor',
    descripcion: 'Costos, producción, competencia perfecta y maximización de beneficios',
    archivo: '/pdfs/resumen_clase_4.pdf',
    modulo: 'Módulo 4',
    icono: FileText
  }
];

export function RecursosPage() {
  const [pdfSeleccionado, setPdfSeleccionado] = useState<string | null>(null);
  const [pdfTitulo, setPdfTitulo] = useState<string>('');

  const abrirPdf = (archivo: string, titulo: string) => {
    setPdfSeleccionado(archivo);
    setPdfTitulo(titulo);
  };

  const cerrarPdf = () => {
    setPdfSeleccionado(null);
    setPdfTitulo('');
  };

  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>
          
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Recursos de Estudio</h1>
          <p className="text-gray-600">
            Material académico en PDF para consultar offline
          </p>
        </div>

        {/* Info Card */}
        <Card className="mb-8 bg-blue-50 border-blue-200">
          <div className="flex items-start gap-4">
            <div className="p-3 bg-blue-100 rounded-lg">
              <BookOpen className="w-6 h-6 text-blue-600" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-blue-900 mb-1">Material de Apoyo</h2>
              <p className="text-blue-800 text-sm">
                Estos documentos PDF contienen el contenido teórico de cada módulo. 
                Úsalos como referencia mientras realizas los ejercicios interactivos.
              </p>
            </div>
          </div>
        </Card>

        {/* Recursos Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {recursos.map((recurso) => (
            <Card key={recurso.id} className="hover:shadow-lg transition-shadow">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-gray-100 rounded-lg">
                  <recurso.icono className="w-8 h-8 text-gray-600" />
                </div>
                
                <div className="flex-1">
                  <div className="mb-2">
                    <span className="inline-block px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded">
                      {recurso.modulo}
                    </span>
                  </div>
                  
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
                    {recurso.titulo}
                  </h3>
                  
                  <p className="text-gray-600 text-sm mb-4">
                    {recurso.descripcion}
                  </p>
                  
                  <div className="flex gap-2">
                    <Button 
                      variant="outline" 
                      className="flex-1"
                      onClick={() => abrirPdf(recurso.archivo, recurso.titulo)}
                    >
                      <Eye size={18} className="mr-2" />
                      Ver
                    </Button>
                    
                    <a 
                      href={recurso.archivo}
                      download
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex-1"
                    >
                      <Button variant="outline" className="w-full">
                        <Download size={18} className="mr-2" />
                        Descargar
                      </Button>
                    </a>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>

        {/* Footer */}
        <div className="mt-12 text-center">
          <p className="text-gray-500 text-sm">
            ¿Tienes dudas sobre el contenido? Revisa los ejercicios interactivos en cada módulo.
          </p>
          <Link to="/modulos">
            <Button className="mt-4">
              Ver Módulos
            </Button>
          </Link>
        </div>
      </div>

      {/* Modal para visualizar PDF */}
      {pdfSeleccionado && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4">
          <div className="bg-white rounded-xl shadow-2xl w-full max-w-6xl h-[90vh] flex flex-col">
            {/* Header del modal */}
            <div className="flex items-center justify-between p-4 border-b border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 truncate pr-4">
                {pdfTitulo}
              </h2>
              <button
                onClick={cerrarPdf}
                className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <X size={24} />
              </button>
            </div>
            
            {/* Contenido del PDF */}
            <div className="flex-1 p-4 bg-gray-100">
              <iframe
                src={pdfSeleccionado}
                className="w-full h-full rounded-lg bg-white"
                title={pdfTitulo}
              />
            </div>
            
            {/* Footer del modal */}
            <div className="flex items-center justify-between p-4 border-t border-gray-200 bg-gray-50">
              <p className="text-sm text-gray-600">
                Usa los controles del visor de PDF para navegar, hacer zoom y descargar.
              </p>
              <div className="flex gap-2">
                <a
                  href={pdfSeleccionado}
                  download
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Button variant="outline" size="sm">
                    <Download size={16} className="mr-2" />
                    Descargar
                  </Button>
                </a>
                <Button onClick={cerrarPdf} size="sm">
                  Cerrar
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default RecursosPage;