import React, { useRef, useEffect } from 'react';
import type { Lesson, ContentBlock, Course, CurrentUser, Exam } from '../types';
import Icon from './Icon';
import ChartRenderer from './ChartRenderer';

declare global {
  interface Window {
    MathJax?: {
      typesetPromise: (args?: any[]) => Promise<void>;
    };
    Plotly: any;
    lightbox: any;
  }
}

interface LessonDisplayProps {
  lesson: Lesson;
  course?: Course;
  onUpdateCourse?: (course: Course) => void;
  currentUser?: CurrentUser | null;
  onDelete?: () => void;
  onTakeExam?: (exam: Exam) => void;
}

function LessonDisplay({ lesson }: LessonDisplayProps): JSX.Element {
  const lessonRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    if (lessonRef.current && window.MathJax) {
        window.MathJax.typesetPromise();
    }
    // Re-initialize Lightbox for dynamically added content
    if (window.lightbox) {
        window.lightbox.init();
    }
  }, [lesson]);

  const renderProcessedText = (text: string) => {
      if (!text) return null;
      // Split by backticks, capturing the content inside.
      const parts = text.split(/`([^`]+)`/);
      return parts.map((part, index) => {
          if (index % 2 === 1) { // This is the content from inside backticks
              return <React.Fragment key={index}>{'\\('}{part}{'\\)'}</React.Fragment>;
          }
          // This is regular text. React will safely escape it.
          return <React.Fragment key={index}>{part}</React.Fragment>;
      });
  };

  return (
    <div ref={lessonRef} className="bg-white dark:bg-gray-800 p-4 sm:p-8 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
        <div className="flex justify-between items-start mb-4 gap-4">
            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white flex-grow">{lesson.title}</h1>
        </div>
        
        {/* Learning Objectives & Criteria */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 p-4 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700">
              <div>
                  <h3 className="font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-2 mb-2">
                      <Icon name="award" className="h-5 w-5 text-primary-500" />
                      Objetivos de Aprendizaje
                  </h3>
                  <ul className="list-disc list-inside space-y-1 text-sm text-gray-600 dark:text-gray-400">
                      {(lesson.learningObjectives || []).map((obj, i) => <li key={i}>{obj}</li>)}
                  </ul>
              </div>
              <div>
                  <h3 className="font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-2 mb-2">
                      <Icon name="user-check" className="h-5 w-5 text-primary-500" />
                      Criterios de Evaluación
                  </h3>
                   <ul className="list-disc list-inside space-y-1 text-sm text-gray-600 dark:text-gray-400">
                      {(lesson.evaluationCriteria || []).map((crit, i) => <li key={i}>{crit}</li>)}
                  </ul>
              </div>
          </div>
        
        <div>
          <div className="space-y-8 lesson-display">
              {lesson.sections.map((section, sectionIndex) => (
              <section key={sectionIndex} className="lesson-section">
                  <h2 className="text-xl sm:text-2xl font-semibold text-primary-700 dark:text-primary-400 border-b-2 border-primary-200 dark:border-primary-800/50 pb-2 mb-4">
                      {section.title}
                  </h2>
                  <div className="prose prose-lg dark:prose-invert max-w-none prose-a:text-primary-600">
                    {section.content.map((block: ContentBlock, blockIndex: number) => {
                        const key = `${sectionIndex}-${blockIndex}`;
                        switch (block.type) {
                            case 'paragraph': {
                                if (!block.text) return null;
                                // Split text by double newlines to render separate paragraphs.
                                const paragraphs = block.text.split(/\n\s*\n/).filter(p => p.trim());
                                return (
                                    <React.Fragment key={key}>
                                        {paragraphs.map((p, i) => (
                                            <p key={`${key}-${i}`}>{renderProcessedText(p)}</p>
                                        ))}
                                    </React.Fragment>
                                );
                            }
                            case 'image_placeholder':
                                if (lesson.images && typeof block.index === 'number' && lesson.images[block.index]) {
                                  const imageUrl = `data:image/jpeg;base64,${lesson.images[block.index]}`;
                                  return (
                                      <div key={key} className="my-6 not-prose">
                                        <a href={imageUrl} data-lightbox={`lesson-image-${lesson.id}`} data-title={`Imagen para ${lesson.title}`}>
                                            <img 
                                                src={imageUrl} 
                                                alt={`Imagen para ${lesson.title}`} 
                                                className="rounded-lg shadow-lg mx-auto max-w-full lg:max-w-xl hover:opacity-90 transition-opacity" 
                                            />
                                        </a>
                                      </div>
                                  );
                                }
                                return null;
                            case 'table':
                                if (!block.markdown) return null;
                                const tableRows = block.markdown.trim().split(/\r?\n|\r/).filter(row => row.trim() && row.includes('|'));
                                if (tableRows.length < 2 || !tableRows[1].includes('---')) return null;
                                
                                const parseRow = (rowStr: string) => {
                                    // Trim the row, remove optional leading/trailing pipes, then split.
                                    const cleanedRow = rowStr.trim().replace(/^\||\|$/g, '').trim();
                                    return cleanedRow.split('|').map(cell => cell.trim());
                                };
  
                                const headers = parseRow(tableRows[0]);
                                const body = tableRows.slice(2).map(row => parseRow(row));
  
                                return (
                                    <div key={key} className="not-prose my-6 overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
                                        <table className="min-w-full text-sm text-left">
                                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                                <tr>{headers.map((h: string, i: number) => <th key={i} scope="col" className="px-4 py-3">{renderProcessedText(h)}</th>)}</tr>
                                            </thead>
                                            <tbody>
                                                {body.map((row: string[], rIndex: number) => (
                                                    <tr key={rIndex} className="bg-white dark:bg-gray-800 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                                        {row.map((cell, cIndex) => cIndex === 0 ? 
                                                            <th key={cIndex} scope="row" className="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">{renderProcessedText(cell)}</th> : 
                                                            <td key={cIndex} className="px-4 py-3 text-gray-700 dark:text-gray-300">{renderProcessedText(cell)}</td>
                                                        )}
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    </div>
                                );
                            case 'chart':
                                if (!block.markdown || !block.chartType || !block.title) return null;
                                const rows = block.markdown.trim().split('\n').filter(row => row.includes('|'));
                                if (rows.length < 3 || !rows[1].includes('---')) return null;
                                const chartHeaders = rows[0].split('|').slice(1, -1).map(h => h.trim());
                                const chartBodyRows = rows.slice(2).map(row => row.split('|').slice(1, -1).map(c => c.trim()));
                                const labels = chartBodyRows.map(r => r[0]);
                                const datasets = chartHeaders.slice(1).map((datasetLabel, index) => ({
                                    label: datasetLabel,
                                    data: chartBodyRows.map(r => parseFloat(r[index + 1]) || 0),
                                }));
                                const yHeaders = chartHeaders.slice(1);
                                const yAxisTitle = yHeaders.length === 1 ? yHeaders[0] : 'Valor';
                                
                                return <ChartRenderer 
                                          key={key} 
                                          type={block.chartType} 
                                          title={block.title} 
                                          data={{ labels, datasets }} 
                                          axisTitles={{ x: chartHeaders[0], y: yAxisTitle }}
                                          chartId={`chart-${lesson.id}-${sectionIndex}-${blockIndex}`} 
                                       />;
                            default:
                                return null;
                        }
                    })}
                  </div>
              </section>
              ))}
          </div>
        </div>
    </div>
  );
}

export default LessonDisplay;