components/BlogSection.tsx

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { BlogSection as BlogSectionType, ReadingPreferences } from '../types';
import MermaidDiagram from './MermaidDiagram';
import InteractiveChartPlayable from './InteractiveChartPlayable';
import EquationBlock from './EquationBlock';
import Collapsible from './Collapsible';
import Tooltip from './Tooltip';
import ProgressiveContent from './ProgressiveContent';
import TextToSpeech from './TextToSpeech';
import BionicText from './BionicText';
import { Info, Lightbulb, AlertTriangle, BookOpen, CheckCircle, XCircle, Shield, ChevronDown, Wrench, Volume2, Zap, Layers } from 'lucide-react';

interface Props {
  section: BlogSectionType;
  theme: 'light' | 'dark';
  index: number;
  readingPreferences?: ReadingPreferences;
}

// Validation Badge Component
const ValidationBadge: React.FC<{ section: BlogSectionType }> = ({ section }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const validation = section.validationStatus;
  
  if (!validation?.isValidated) return null;

  const getScoreColor = (score: number) => {
    if (score >= 80) return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
    if (score >= 60) return 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800';
    return 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
  };

  const getScoreIcon = (score: number) => {
    if (score >= 80) return <CheckCircle size={12} />;
    if (score >= 60) return <AlertTriangle size={12} />;
    return <XCircle size={12} />;
  };

  return (
    <div className="mt-6">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className={`
          inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all
          ${getScoreColor(validation.overallScore)}
          hover:opacity-80
        `}
      >
        <Shield size={12} />
        <span>Quality Score: {validation.overallScore}/100</span>
        {validation.wasRepaired && (
          <span className="flex items-center gap-1 ml-1 px-1.5 py-0.5 bg-white/50 dark:bg-black/20 rounded">
            <Wrench size={10} />
            Repaired
          </span>
        )}
        <ChevronDown size={12} className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
      </button>

      {isExpanded && (
        <div className="mt-3 p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 animate-in fade-in slide-in-from-top-2 duration-200">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Content Relevance */}
            <div className={`p-3 rounded-lg border ${getScoreColor(validation.contentRelevance.score)}`}>
              <div className="flex items-center gap-2 mb-2">
                {getScoreIcon(validation.contentRelevance.score)}
                <span className="font-semibold">Content Relevance</span>
                <span className="ml-auto">{validation.contentRelevance.score}/100</span>
              </div>
              {validation.contentRelevance.issues.length > 0 && (
                <ul className="text-xs space-y-1 opacity-80">
                  {validation.contentRelevance.issues.slice(0, 3).map((issue, i) => (
                    <li key={i} className="flex items-start gap-1">
                      <span className="mt-1">•</span>
                      <span>{issue}</span>
                    </li>
                  ))}
                </ul>
              )}
              {validation.contentRelevance.passed && validation.contentRelevance.issues.length === 0 && (
                <p className="text-xs opacity-80">✓ Content verified against source paper</p>
              )}
            </div>

            {/* Visualization Validity */}
            <div className={`p-3 rounded-lg border ${getScoreColor(validation.visualizationValidity.score)}`}>
              <div className="flex items-center gap-2 mb-2">
                {getScoreIcon(validation.visualizationValidity.score)}
                <span className="font-semibold">Visualization</span>
                <span className="ml-auto">{validation.visualizationValidity.score}/100</span>
              </div>
              {validation.visualizationValidity.issues.length > 0 && (
                <ul className="text-xs space-y-1 opacity-80">
                  {validation.visualizationValidity.issues.slice(0, 3).map((issue, i) => (
                    <li key={i} className="flex items-start gap-1">
                      <span className="mt-1">•</span>
                      <span>{issue}</span>
                    </li>
                  ))}
                </ul>
              )}
              {validation.visualizationValidity.passed && validation.visualizationValidity.issues.length === 0 && (
                <p className="text-xs opacity-80">✓ Visualization syntax valid</p>
              )}
            </div>
          </div>

          {validation.wasRepaired && (
            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
              <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                <Wrench size={12} />
                This section was automatically repaired ({validation.repairAttempts} attempt{validation.repairAttempts !== 1 ? 's' : ''})
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

const BlogSectionComponent: React.FC<Props> = ({ section, theme, index, readingPreferences }) => {
  const [ttsWordIndex, setTtsWordIndex] = useState<number | undefined>(undefined);
  const [isTtsPlaying, setIsTtsPlaying] = useState(false);
  
  const getMarginNoteIcon = (icon?: 'info' | 'warning' | 'tip' | 'note') => {
    switch (icon) {
      case 'warning':
        return <AlertTriangle size={14} className="text-amber-500" />;
      case 'tip':
        return <Lightbulb size={14} className="text-green-500" />;
      case 'info':
        return <Info size={14} className="text-blue-500" />;
      default:
        return <BookOpen size={14} className="text-gray-400" />;
    }
  };

  // Apply tooltips to content
  const renderContent = () => {
    // Get the content to display based on ELI5 mode
    const displayContent = readingPreferences?.eli5Mode && section.layers?.eli5Content 
      ? section.layers.eli5Content 
      : section.content;

    // Apply bionic reading if enabled
    const processText = (text: string) => {
      if (!readingPreferences?.bionicReading) return text;
      
      // Apply bionic reading: bold first portion of each word
      return text.replace(/\b(\w{2,})\b/g, (match) => {
        const boldCount = match.length <= 3 ? 1 : match.length <= 6 ? 2 : Math.ceil(match.length * 0.4);
        return `**${match.slice(0, boldCount)}**${match.slice(boldCount)}`;
      });
    };

    const processedContent = processText(displayContent);

    // If we have progressive disclosure layers, show them first
    if (section.layers) {
      return (
        <div className="space-y-8">
          <ProgressiveContent 
            layers={section.layers}
            eli5Mode={readingPreferences?.eli5Mode}
            showConfidenceBadges={true}
          />
          
          {/* Technical Terms Legend */}
          {section.technicalTerms && section.technicalTerms.length > 0 && readingPreferences?.highlightKeyTerms && (
            <div className="mt-8 p-6 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800/50 dark:to-gray-900/30 rounded-2xl border border-gray-200 dark:border-gray-700">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-1 h-4 bg-brand-500 rounded-full"></div>
                <h5 className="text-sm font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">
                  Key Terms
                </h5>
              </div>
              <div className="flex flex-wrap gap-2">
                {section.technicalTerms.map((term, idx) => (
                  <Tooltip key={idx} term={term.term} definition={term.definition}>
                    <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium cursor-help transition-colors ${
                      term.highlightColor || 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
                    }`}>
                      {term.term}
                    </span>
                  </Tooltip>
                ))}
              </div>
            </div>
          )}
        </div>
      );
    }

    // Fallback to regular markdown rendering
    if (!section.technicalTerms || section.technicalTerms.length === 0) {
      return <ReactMarkdown>{processedContent}</ReactMarkdown>;
    }

    // For complex tooltip integration, we'll render ReactMarkdown
    // and let users hover on specially marked terms
    return (
      <div className="relative">
        <ReactMarkdown>{processedContent}</ReactMarkdown>
        
        {/* Technical Terms Legend */}
        {section.technicalTerms.length > 0 && readingPreferences?.highlightKeyTerms && (
          <div className="mt-8 p-6 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800/50 dark:to-gray-900/30 rounded-2xl border border-gray-200 dark:border-gray-700">
            <div className="flex items-center gap-2 mb-4">
              <div className="w-1 h-4 bg-brand-500 rounded-full"></div>
              <h5 className="text-sm font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">
                Key Terms
              </h5>
            </div>
            <div className="flex flex-wrap gap-2">
              {section.technicalTerms.map((term, idx) => (
                <Tooltip key={idx} term={term.term} definition={term.definition}>
                  <span className="inline-flex items-center px-2.5 py-1 rounded-lg bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300 text-sm font-medium cursor-help">
                    {term.term}
                  </span>
                </Tooltip>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <section 
      id={`section-${section.id}`}
      className="relative scroll-mt-32 animate-in fade-in slide-in-from-bottom-4 duration-700"
      style={{ animationDelay: `${index * 100}ms` }}
    >
      <div className="flex gap-8">
        {/* Main Content */}
        <article className="flex-1 min-w-0">
          {/* Section Header */}
          <header className="mb-12">
            <div className="flex items-start gap-6 mb-6">
              <span className="flex-shrink-0 w-12 h-12 rounded-2xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-brand-500/20 mt-1">
                {index + 1}
              </span>
              <div className="flex-1">
                <h2 className="text-3xl md:text-4xl font-display font-bold text-gray-900 dark:text-gray-50 leading-tight mb-4 tracking-tight">
                  {section.title}
                </h2>
                <div className="h-1 w-24 bg-gradient-to-r from-brand-500 to-purple-500 rounded-full opacity-80" />
                
                {/* Quick info badges */}
                <div className="flex flex-wrap items-center gap-2 mt-4">
                  {section.layers && (
                    <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-xs font-medium">
                      <Layers size={12} />
                      3-Layer View
                    </span>
                  )}
                  {section.visualizationType && section.visualizationType !== 'none' && (
                    <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs font-medium">
                      <Zap size={12} />
                      Interactive
                    </span>
                  )}
                </div>
              </div>
            </div>
            
            {/* Text-to-Speech Controls */}
            {readingPreferences?.ttsEnabled && (
              <div className="mt-6 pl-0 md:pl-[4.5rem]">
                <TextToSpeech 
                  text={section.content}
                  sectionId={section.id}
                  onWordChange={setTtsWordIndex}
                  onPlayingChange={setIsTtsPlaying}
                />
              </div>
            )}
          </header>

          {/* Content */}
          <div className="prose prose-lg dark:prose-invert max-w-none 
            prose-headings:font-display prose-headings:font-bold prose-headings:tracking-tight
            prose-h3:text-2xl prose-h3:mt-10 prose-h3:mb-4 prose-h3:text-gray-900 prose-h3:dark:text-gray-100
            prose-h4:text-xl prose-h4:mt-8 prose-h4:mb-3 prose-h4:text-gray-800 prose-h4:dark:text-gray-200
            prose-p:font-serif prose-p:text-[1.125rem] prose-p:text-gray-700 prose-p:dark:text-gray-300 prose-p:leading-[1.85] prose-p:mb-6
            prose-strong:font-semibold prose-strong:text-gray-900 prose-strong:dark:text-white
            prose-em:text-gray-700 prose-em:dark:text-gray-300
            prose-a:text-brand-600 prose-a:dark:text-brand-400 prose-a:no-underline prose-a:border-b prose-a:border-brand-300 prose-a:dark:border-brand-700 hover:prose-a:border-brand-500 hover:prose-a:dark:border-brand-400 prose-a:transition-colors
            prose-blockquote:border-l-4 prose-blockquote:border-brand-500 prose-blockquote:bg-gradient-to-r prose-blockquote:from-brand-50 prose-blockquote:to-transparent prose-blockquote:dark:from-brand-900/20 prose-blockquote:dark:to-transparent prose-blockquote:py-4 prose-blockquote:px-6 prose-blockquote:my-8 prose-blockquote:rounded-r-xl prose-blockquote:font-serif prose-blockquote:italic prose-blockquote:text-xl prose-blockquote:leading-relaxed prose-blockquote:text-gray-700 prose-blockquote:dark:text-gray-300
            prose-code:font-mono prose-code:bg-gray-100 prose-code:dark:bg-gray-800 prose-code:px-2 prose-code:py-1 prose-code:rounded-md prose-code:text-sm prose-code:text-brand-600 prose-code:dark:text-brand-400 prose-code:before:content-none prose-code:after:content-none prose-code:font-medium
            prose-pre:bg-gray-900 prose-pre:dark:bg-black prose-pre:border prose-pre:border-gray-800 prose-pre:rounded-xl prose-pre:shadow-lg prose-pre:my-8
            prose-li:font-serif prose-li:text-[1.1rem] prose-li:text-gray-700 prose-li:dark:text-gray-300 prose-li:leading-relaxed prose-li:my-2
            prose-ul:my-6 prose-ul:pl-0
            prose-ol:my-6 prose-ol:pl-0
            prose-li:marker:text-brand-500 prose-li:marker:dark:text-brand-400
            prose-img:rounded-2xl prose-img:shadow-xl prose-img:border prose-img:border-gray-200 prose-img:dark:border-gray-800 prose-img:my-10
            prose-hr:my-12 prose-hr:border-gray-200 prose-hr:dark:border-gray-800
          ">
            {renderContent()}
          </div>

          {/* Visualization */}
          {section.visualizationType && section.visualizationType !== 'none' && (
            <div className="my-12">
              <div className="p-8 rounded-2xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-900/50 border border-gray-200 dark:border-gray-700 shadow-lg shadow-gray-200/50 dark:shadow-none overflow-hidden">
                {/* Visualization Header */}
                <div className="flex items-center gap-2 mb-6 pb-4 border-b border-gray-100 dark:border-gray-800">
                  <div className="w-2 h-2 rounded-full bg-brand-500"></div>
                  <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                    {section.visualizationType === 'mermaid' ? 'Diagram' : 
                     section.visualizationType === 'chart' ? 'Data Visualization' : 
                     section.visualizationType === 'equation' ? 'Mathematical Formulation' : 'Visual'}
                  </span>
                </div>
                
                {section.visualizationType === 'mermaid' && section.visualizationData && (
                  <div className="min-h-[200px] flex items-center justify-center">
                    <MermaidDiagram chart={section.visualizationData} theme={theme} />
                  </div>
                )}
                
                {section.visualizationType === 'chart' && section.chartData && (
                  <InteractiveChartPlayable data={section.chartData} theme={theme} />
                )}
                
                {section.visualizationType === 'equation' && section.visualizationData && (
                  <div className="py-4">
                    <EquationBlock equation={section.visualizationData} label={`${index + 1}`} />
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Collapsible Deep Dives */}
          {section.collapsibleSections && section.collapsibleSections.length > 0 && (
            <div className="mt-8 space-y-4">
              {section.collapsibleSections.map((collapsible, idx) => (
                <Collapsible 
                  key={collapsible.id} 
                  title={collapsible.title}
                  variant={idx === 0 ? 'deep-dive' : 'default'}
                >
                  <ReactMarkdown>{collapsible.content}</ReactMarkdown>
                </Collapsible>
              ))}
            </div>
          )}

          {/* Validation Badge */}
          <ValidationBadge section={section} />
        </article>

        {/* Margin Notes */}
        {section.marginNotes && section.marginNotes.length > 0 && (
          <aside className="hidden xl:block w-64 flex-shrink-0">
            <div className="sticky top-32 space-y-4">
              {section.marginNotes.map((note, idx) => (
                <div 
                  key={note.id}
                  className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 animate-in fade-in slide-in-from-right-4 duration-500"
                  style={{ animationDelay: `${(index * 100) + (idx * 50)}ms` }}
                >
                  <div className="flex items-start gap-3">
                    <div className="flex-shrink-0 mt-0.5">
                      {getMarginNoteIcon(note.icon)}
                    </div>
                    <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                      {note.text}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </aside>
        )}
      </div>

      {/* Section Divider */}
      <div className="my-16 flex items-center gap-4">
        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
        <div className="flex gap-1">
          <div className="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700" />
          <div className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-600" />
          <div className="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700" />
        </div>
        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
      </div>
    </section>
  );
};

export default BlogSectionComponent;