import React, { useState, useEffect, useRef } from 'react';
import { Search, BookOpen, FileText, Users, Settings, Save, Download, Upload, BookmarkPlus, CheckSquare, BarChart2, Clock, AlertCircle, Database, PieChart, BarChart, LineChart, Table, Brain, Edit3, Sliders, ChevronDown, ChevronRight, Maximize2, Minimize2, HelpCircle, FileText as FileIcon, Clipboard, ArrowRight, Check, X, RefreshCw } from 'lucide-react';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend } from 'chart.js';
import { Line, Bar, Pie } from 'react-chartjs-2';

// Register ChartJS components
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend);

// Main application component
export default function AcademicPaperAssistant() {
  // Core state
  const [activeTab, setActiveTab] = useState('editor');
  const [paperTitle, setPaperTitle] = useState('Untitled Research Paper');
  const [paperContent, setPaperContent] = useState('');
  const [wordCount, setWordCount] = useState(0);
  const [references, setReferences] = useState([]);
  const [citationStyle, setCitationStyle] = useState('APA');
  const [savedAt, setSavedAt] = useState(null);
  const [showReferenceModal, setShowReferenceModal] = useState(false);
  const [newReference, setNewReference] = useState({ 
    title: '', 
    authors: '', 
    journal: '', 
    year: '', 
    doi: '',
    url: ''
  });
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
  const [templates, setTemplates] = useState([
    { id: 1, name: 'IEEE', description: 'For engineering and computer science' },
    { id: 2, name: 'Nature', description: 'For natural sciences' },
    { id: 3, name: 'JAMA', description: 'For medical research' },
    { id: 4, name: 'APA', description: 'For social sciences' }
  ]);
  const [selectedTemplate, setSelectedTemplate] = useState(null);
  const [aiSuggestions, setAiSuggestions] = useState([]);
  const [showAiSuggestions, setShowAiSuggestions] = useState(false);
  const [paperSections, setPaperSections] = useState([
    { id: 'abstract', name: 'Abstract', content: '', completed: false },
    { id: 'introduction', name: 'Introduction', content: '', completed: false },
    { id: 'literature', name: 'Literature Review', content: '', completed: false },
    { id: 'methods', name: 'Methods', content: '', completed: false },
    { id: 'results', name: 'Results', content: '', completed: false },
    { id: 'discussion', name: 'Discussion', content: '', completed: false },
    { id: 'conclusion', name: 'Conclusion', content: '', completed: false },
    { id: 'references', name: 'References', content: '', completed: false }
  ]);
  const [activeSection, setActiveSection] = useState('abstract');
  const [collaborators, setCollaborators] = useState([
    { id: 1, name: 'You', email: 'you@example.com', role: 'Owner' }
  ]);

  // New state for AI paper generation
  const [showAiGenerationModal, setShowAiGenerationModal] = useState(false);
  const [aiGenerationParams, setAiGenerationParams] = useState({
    topic: '',
    field: 'Computer Science',
    keywords: '',
    length: 'medium',
    model: 'claude-3.7-sonnet',
    includeVisualizations: true,
    includeStatistics: true,
    tone: 'academic'
  });
  const [isGeneratingPaper, setIsGeneratingPaper] = useState(false);
  const [generationProgress, setGenerationProgress] = useState(0);
  const [generationStep, setGenerationStep] = useState('');

  // New state for data visualization
  const [showVisualizationModal, setShowVisualizationModal] = useState(false);
  const [visualizationType, setVisualizationType] = useState('bar');
  const [visualizationData, setVisualizationData] = useState({
    labels: ['Dataset 1', 'Dataset 2', 'Dataset 3', 'Dataset 4', 'Dataset 5'],
    datasets: [
      {
        label: 'Sample Data',
        data: [65, 59, 80, 81, 56],
        backgroundColor: [
          'rgba(44, 122, 123, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
        ],
        borderColor: [
          'rgba(44, 122, 123, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
        ],
        borderWidth: 1,
      },
    ],
  });
  const [visualizationOptions, setVisualizationOptions] = useState({
    title: 'Sample Chart',
    xAxisLabel: 'Categories',
    yAxisLabel: 'Values',
    showLegend: true,
  });
  const [visualizations, setVisualizations] = useState([]);
  const [activeVisualization, setActiveVisualization] = useState(null);
  
  // New state for statistical analysis
  const [showStatisticsModal, setShowStatisticsModal] = useState(false);
  const [statisticalTests, setStatisticalTests] = useState([
    { id: 't-test', name: 'T-Test', description: 'Compare means of two groups' },
    { id: 'anova', name: 'ANOVA', description: 'Compare means across multiple groups' },
    { id: 'correlation', name: 'Correlation Analysis', description: 'Measure relationship between variables' },
    { id: 'regression', name: 'Regression Analysis', description: 'Model relationship between dependent and independent variables' },
    { id: 'chi-square', name: 'Chi-Square Test', description: 'Test relationship between categorical variables' }
  ]);
  const [selectedStatisticalTest, setSelectedStatisticalTest] = useState('t-test');
  const [statisticalData, setStatisticalData] = useState({
    group1: [65, 72, 83, 54, 91],
    group2: [43, 58, 76, 81, 47]
  });
  const [statisticalResults, setStatisticalResults] = useState(null);
  const [statisticalAnalyses, setStatisticalAnalyses] = useState([]);

  // Calculate word count whenever paper content changes
  useEffect(() => {
    const words = paperContent.trim().split(/\s+/);
    setWordCount(paperContent ? words.length : 0);
  }, [paperContent]);

  // Auto-save functionality
  useEffect(() => {
    const saveTimer = setTimeout(() => {
      if (paperContent) {
        // In a real app, this would save to a database or localStorage
        console.log('Auto-saving paper...');
        setSavedAt(new Date());
      }
    }, 5000);

    return () => clearTimeout(saveTimer);
  }, [paperContent]);

  // Simulate AI suggestions based on content
  useEffect(() => {
    if (paperContent.length > 100) {
      // In a real app, this would call an AI service
      const mockSuggestions = [
        "Consider adding more detail to your methodology section.",
        "Your introduction could benefit from a clearer research question.",
        "The literature review seems incomplete. Consider adding more recent sources."
      ];
      setAiSuggestions(mockSuggestions);
    }
  }, [paperContent]);

  // Handle search functionality
  const handleSearch = (e) => {
    e.preventDefault();
    if (!searchQuery.trim()) return;
    
    setIsSearching(true);
    
    // Simulate API call to academic search engine
    setTimeout(() => {
      const mockResults = [
        { id: 1, title: "Advances in Machine Learning for Natural Language Processing", authors: "Smith, J., Johnson, A.", journal: "Journal of AI Research", year: 2022, doi: "10.1234/jair.2022.123" },
        { id: 2, title: "A Comprehensive Review of Deep Learning Architectures", authors: "Chen, L., Wang, H.", journal: "IEEE Transactions on Neural Networks", year: 2021, doi: "10.1109/tnn.2021.456" },
        { id: 3, title: "The Impact of Artificial Intelligence on Academic Research", authors: "Garcia, M., Lee, S.", journal: "Science and Education", year: 2023, doi: "10.5678/sci.edu.2023.789" }
      ];
      setSearchResults(mockResults);
      setIsSearching(false);
    }, 1000);
  };

  // Add a reference from search results
  const addReferenceFromSearch = (reference) => {
    setReferences([...references, reference]);
    // Show confirmation toast in a real app
  };

  // Add a new reference manually
  const addNewReference = () => {
    if (newReference.title && newReference.authors) {
      setReferences([...references, { ...newReference, id: Date.now() }]);
      setNewReference({ title: '', authors: '', journal: '', year: '', doi: '', url: '' });
      setShowReferenceModal(false);
    }
  };

  // Update section content
  const updateSectionContent = (sectionId, content) => {
    setPaperSections(paperSections.map(section => 
      section.id === sectionId ? { ...section, content } : section
    ));
    
    // Update overall paper content
    const updatedContent = paperSections
      .map(section => section.id === sectionId ? content : section.content)
      .join('\n\n');
    setPaperContent(updatedContent);
  };

  // Mark section as completed
  const toggleSectionCompletion = (sectionId) => {
    setPaperSections(paperSections.map(section => 
      section.id === sectionId ? { ...section, completed: !section.completed } : section
    ));
  };

  // Apply template
  const applyTemplate = (template) => {
    setSelectedTemplate(template);
    // In a real app, this would load template-specific formatting and guidelines
  };

  // Export paper
  const exportPaper = (format) => {
    // In a real app, this would generate and download the paper in the specified format
    console.log(`Exporting paper in ${format} format...`);
    alert(`Your paper would now be downloaded in ${format} format.`);
  };

  // Calculate completion percentage
  const calculateCompletion = () => {
    const completedSections = paperSections.filter(section => section.completed).length;
    return Math.round((completedSections / paperSections.length) * 100);
  };

  // Generate paper with AI
  const generatePaperWithAI = () => {
    setIsGeneratingPaper(true);
    setGenerationProgress(0);
    setGenerationStep('Initializing AI model...');
    
    // Simulate paper generation process
    const steps = [
      'Initializing AI model...',
      'Researching topic...',
      'Gathering relevant literature...',
      'Drafting abstract...',
      'Writing introduction...',
      'Developing literature review...',
      'Formulating methodology...',
      'Analyzing results...',
      'Creating visualizations...',
      'Performing statistical analysis...',
      'Writing discussion...',
      'Finalizing conclusion...',
      'Generating references...',
      'Formatting paper...'
    ];
    
    let currentStep = 0;
    const totalSteps = steps.length;
    
    const progressInterval = setInterval(() => {
      if (currentStep < totalSteps) {
        setGenerationStep(steps[currentStep]);
        setGenerationProgress(Math.round(((currentStep + 1) / totalSteps) * 100));
        currentStep++;
      } else {
        clearInterval(progressInterval);
        
        // Simulate generated paper content
        const generatedAbstract = "This study investigates the impact of artificial intelligence on academic research productivity across multiple disciplines. Using a mixed-methods approach combining bibliometric analysis and qualitative interviews with researchers, we identified significant patterns in how AI tools are transforming scholarly workflows. Our findings indicate a 37% increase in research output among early adopters of AI-assisted writing and analysis tools, with particularly strong effects in data-intensive fields. However, challenges related to algorithmic bias and reproducibility remain significant concerns. This paper presents a framework for responsible AI integration in academic workflows and suggests policy recommendations for research institutions.";
        
        const generatedIntroduction = "The rapid advancement of artificial intelligence (AI) technologies has begun to transform numerous aspects of academic research, from literature review and data analysis to manuscript preparation and peer review (Smith et al., 2022). As large language models and specialized research tools become increasingly sophisticated, questions arise about their impact on research productivity, quality, and integrity (Chen & Wang, 2021). While proponents highlight potential efficiency gains and novel insights enabled by AI, critics raise concerns about algorithmic bias, reproducibility challenges, and the changing nature of scholarly expertise (Garcia & Lee, 2023).\n\nThis study aims to quantify and characterize the effects of AI adoption on research productivity across disciplines, identify best practices for AI integration in academic workflows, and develop a framework for addressing ethical and methodological challenges. By combining quantitative bibliometric analysis with qualitative insights from researchers, we provide a comprehensive assessment of AI's current and potential future impact on scholarly knowledge production.";
        
        // Update paper sections with generated content
        setPaperSections(paperSections.map(section => {
          if (section.id === 'abstract') {
            return { ...section, content: generatedAbstract, completed: true };
          } else if (section.id === 'introduction') {
            return { ...section, content: generatedIntroduction, completed: true };
          } else if (section.id === 'literature') {
            return { ...section, content: "The literature on AI in academic research can be categorized into three main streams: studies of AI as a research tool, investigations of AI's impact on research practices, and ethical considerations in AI-assisted research.\n\nAI as a research tool has seen rapid development across disciplines. In biomedicine, machine learning algorithms have demonstrated success in protein structure prediction (AlphaFold Team, 2021) and drug discovery (Johnson et al., 2022). In the humanities, natural language processing has enabled large-scale text analysis of historical documents and literary corpora (Williams & Thompson, 2020).", completed: true };
          } else if (section.id === 'methods') {
            return { ...section, content: "This study employed a mixed-methods research design combining quantitative bibliometric analysis with qualitative interviews.\n\nFor the bibliometric component, we analyzed publication data from Web of Science and Scopus spanning 2018-2023, focusing on research productivity metrics across 12 disciplines. We identified AI adoption through explicit mentions in methodology sections and acknowledgments, supplemented by a survey of corresponding authors (n=427).\n\nQualitative data collection involved semi-structured interviews with 48 researchers across career stages and disciplines. Participants were selected using maximum variation sampling to ensure diverse perspectives. Interviews explored researchers' experiences with AI tools, perceived impacts on productivity and quality, and ethical considerations.", completed: true };
          } else if (section.id === 'results') {
            return { ...section, content: "Our analysis revealed significant patterns in AI adoption and impact across academic disciplines.\n\nBibliometric analysis showed that researchers who adopted AI tools published an average of 37% more papers annually compared to matched non-adopters (p<0.001). This effect was strongest in computer science (52% increase), biomedicine (43%), and physics (39%), but remained significant across all fields studied. Citation impact showed more variable results, with significant positive effects in data-intensive fields but no consistent pattern in theoretical or qualitative disciplines.\n\nQualitative findings indicated that researchers primarily use AI for four purposes: literature discovery and synthesis (78% of participants), data analysis (65%), manuscript drafting and editing (61%), and visualization creation (42%). Early-career researchers reported higher rates of adoption and more diverse use cases compared to senior scholars.", completed: true };
          } else if (section.id === 'discussion') {
            return { ...section, content: "The findings of this study highlight both the transformative potential of AI in academic research and important challenges that require attention.\n\nThe substantial productivity gains observed across disciplines suggest that AI tools are effectively addressing key bottlenecks in the research process. Particularly notable is the democratizing effect reported by researchers at less-resourced institutions, who described AI tools as partially compensating for limited access to research assistance and specialized expertise. However, the uneven adoption patterns across career stages and institutional types raise concerns about emerging forms of inequality in research capabilities.\n\nThe qualitative findings reveal a nuanced relationship between researchers and AI tools that goes beyond simple productivity metrics. Many participants described a collaborative relationship in which AI serves as a thought partner, helping to identify connections between disparate literature or suggesting alternative interpretations of data. This finding challenges simplistic narratives about AI replacing human researchers, instead pointing to new forms of human-AI complementarity in knowledge production.", completed: true };
          } else if (section.id === 'conclusion') {
            return { ...section, content: "This study has demonstrated that AI adoption is associated with significant increases in research productivity across academic disciplines, with particularly strong effects in data-intensive fields. The mixed-methods approach revealed not only quantitative productivity gains but also qualitative changes in research practices and scholarly collaboration.\n\nOur findings suggest that responsible integration of AI in academic workflows requires attention to issues of transparency, reproducibility, equity, and the preservation of human creativity and critical thinking. The framework developed in this study offers a starting point for researchers, institutions, and policymakers seeking to maximize the benefits of AI while mitigating potential risks.\n\nFuture research should examine longitudinal effects of AI adoption on research trajectories, investigate potential impacts on research diversity and innovation, and develop more sophisticated methods for attributing contributions in AI-assisted research. As AI capabilities continue to advance, ongoing critical reflection on their role in knowledge production will be essential to maintaining the integrity and social value of academic research.", completed: true };
          } else {
            return section;
          }
        }));
        
        // Add sample visualizations
        const newVisualizations = [
          {
            id: Date.now(),
            type: 'bar',
            title: 'AI Adoption Rates by Discipline',
            description: 'Percentage of researchers reporting regular use of AI tools in their work',
            data: {
              labels: ['Computer Science', 'Biomedicine', 'Physics', 'Economics', 'Psychology', 'Sociology', 'History'],
              datasets: [{
                label: 'Adoption Rate (%)',
                data: [78, 65, 52, 43, 38, 25, 18],
                backgroundColor: 'rgba(44, 122, 123, 0.6)',
                borderColor: 'rgba(44, 122, 123, 1)',
                borderWidth: 1
              }]
            },
            options: {
              title: 'AI Adoption Rates by Discipline',
              xAxisLabel: 'Discipline',
              yAxisLabel: 'Adoption Rate (%)',
              showLegend: true
            }
          },
          {
            id: Date.now() + 1,
            type: 'line',
            title: 'Publication Productivity Before and After AI Adoption',
            description: 'Average annual publications per researcher',
            data: {
              labels: ['Year -2', 'Year -1', 'Adoption Year', 'Year +1', 'Year +2'],
              datasets: [{
                label: 'AI Adopters',
                data: [3.2, 3.4, 3.8, 4.7, 5.2],
                borderColor: 'rgba(44, 122, 123, 1)',
                backgroundColor: 'rgba(44, 122, 123, 0.1)',
                tension: 0.3,
                fill: true
              },
              {
                label: 'Non-Adopters',
                data: [3.3, 3.3, 3.4, 3.5, 3.6],
                borderColor: 'rgba(153, 102, 255, 1)',
                backgroundColor: 'rgba(153, 102, 255, 0.1)',
                tension: 0.3,
                fill: true
              }]
            },
            options: {
              title: 'Publication Productivity Before and After AI Adoption',
              xAxisLabel: 'Year Relative to AI Adoption',
              yAxisLabel: 'Average Publications per Researcher',
              showLegend: true
            }
          },
          {
            id: Date.now() + 2,
            type: 'pie',
            title: 'Primary Uses of AI in Research Workflow',
            description: 'Percentage of researchers reporting each use case as primary',
            data: {
              labels: ['Literature Review', 'Data Analysis', 'Manuscript Drafting', 'Visualization', 'Other'],
              datasets: [{
                data: [35, 28, 22, 12, 3],
                backgroundColor: [
                  'rgba(44, 122, 123, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(255, 206, 86, 0.6)',
                  'rgba(75, 192, 192, 0.6)',
                  'rgba(153, 102, 255, 0.6)',
                ],
                borderColor: [
                  'rgba(44, 122, 123, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                ],
                borderWidth: 1
              }]
            },
            options: {
              title: 'Primary Uses of AI in Research Workflow',
              showLegend: true
            }
          }
        ];
        
        setVisualizations([...visualizations, ...newVisualizations]);
        
        // Add sample statistical analyses
        const newStatisticalAnalyses = [
          {
            id: Date.now(),
            type: 't-test',
            title: 'Comparison of Publication Rates Between AI Adopters and Non-Adopters',
            description: 'Independent samples t-test comparing annual publication counts',
            data: {
              group1: { name: 'AI Adopters', n: 215, mean: 4.7, sd: 1.2 },
              group2: { name: 'Non-Adopters', n: 212, mean: 3.4, sd: 1.1 }
            },
            results: {
              t: 11.42,
              df: 425,
              p: 0.00001,
              significant: true,
              effectSize: 1.13,
              effectSizeInterpretation: 'Large effect'
            },
            interpretation: 'Researchers who adopted AI tools published significantly more papers annually (M = 4.7, SD = 1.2) compared to non-adopters (M = 3.4, SD = 1.1); t(425) = 11.42, p < .001, d = 1.13. This represents a large effect size, indicating a substantial impact of AI adoption on research productivity.'
          },
          {
            id: Date.now() + 1,
            type: 'correlation',
            title: 'Correlation Between AI Usage Intensity and Citation Impact',
            description: 'Pearson correlation analysis examining relationship between AI tool usage frequency and citation counts',
            data: {
              n: 427,
              variables: ['AI Usage Intensity', 'Citation Count']
            },
            results: {
              r: 0.38,
              p: 0.003,
              significant: true,
              effectSize: 0.38,
              effectSizeInterpretation: 'Medium effect'
            },
            interpretation: 'There was a significant positive correlation between AI usage intensity and citation impact (r = 0.38, p = .003), indicating a medium-strength relationship. Researchers who used AI tools more frequently tended to receive more citations, though the relationship was moderate in strength, suggesting other factors also play important roles in determining citation impact.'
          }
        ];
        
        setStatisticalAnalyses([...statisticalAnalyses, ...newStatisticalAnalyses]);
        
        // Add references
        const newReferences = [
          { id: 1, title: "The impact of artificial intelligence on scientific discovery", authors: "Smith, J., Johnson, A., & Williams, B.", journal: "Nature", year: 2022, doi: "10.1038/s41586-022-04543-3" },
          { id: 2, title: "A comprehensive review of deep learning architectures for scientific applications", authors: "Chen, L., & Wang, H.", journal: "IEEE Transactions on Neural Networks", year: 2021, doi: "10.1109/tnn.2021.3067454" },
          { id: 3, title: "Ethical considerations in AI-assisted academic research", authors: "Garcia, M., & Lee, S.", journal: "Science and Education", year: 2023, doi: "10.1007/s11191-023-00456-3" },
          { id: 4, title: "AlphaFold: Protein structure prediction using deep learning", authors: "AlphaFold Team", journal: "Science", year: 2021, doi: "10.1126/science.abj8754" },
          { id: 5, title: "Machine learning approaches in drug discovery and development", authors: "Johnson, K., Zhang, L., & Patel, R.", journal: "Nature Reviews Drug Discovery", year: 2022, doi: "10.1038/s41573-022-00465-9" },
          { id: 6, title: "Computational methods for large-scale text analysis in humanities research", authors: "Williams, E., & Thompson, J.", journal: "Digital Scholarship in the Humanities", year: 2020, doi: "10.1093/llc/fqaa012" }
        ];
        
        setReferences([...references, ...newReferences]);
        
        // Update paper title
        setPaperTitle("The Impact of Artificial Intelligence on Academic Research Productivity: A Mixed-Methods Analysis");
        
        setIsGeneratingPaper(false);
        setShowAiGenerationModal(false);
      }
    }, 1000);
  };

  // Create new visualization
  const createVisualization = () => {
    const newVisualization = {
      id: Date.now(),
      type: visualizationType,
      title: visualizationOptions.title,
      description: 'Description of the visualization',
      data: visualizationData,
      options: visualizationOptions
    };
    
    setVisualizations([...visualizations, newVisualization]);
    setShowVisualizationModal(false);
  };

  // Insert visualization into paper
  const insertVisualizationReference = (visualization) => {
    const reference = `[Figure: ${visualization.title}]`;
    
    // Insert at cursor position or at end of current section
    const currentSectionContent = paperSections.find(s => s.id === activeSection)?.content || '';
    const updatedContent = currentSectionContent + '\n\n' + reference + '\n\n';
    
    updateSectionContent(activeSection, updatedContent);
  };

  // Perform statistical analysis
  const performStatisticalAnalysis = () => {
    let results = null;
    
    // Simulate statistical analysis
    if (selectedStatisticalTest === 't-test') {
      const group1Mean = statisticalData.group1.reduce((sum, val) => sum + val, 0) / statisticalData.group1.length;
      const group2Mean = statisticalData.group2.reduce((sum, val) => sum + val, 0) / statisticalData.group2.length;
      
      // Calculate t-statistic (simplified)
      const t = Math.abs(group1Mean - group2Mean) / Math.sqrt(2 / statisticalData.group1.length);
      const df = statisticalData.group1.length + statisticalData.group2.length - 2;
      const p = 0.03; // Simulated p-value
      
      results = {
        test: 't-test',
        group1: {
          n: statisticalData.group1.length,
          mean: group1Mean.toFixed(2),
          sd: (Math.sqrt(statisticalData.group1.reduce((sum, val) => sum + Math.pow(val - group1Mean, 2), 0) / statisticalData.group1.length)).toFixed(2)
        },
        group2: {
          n: statisticalData.group2.length,
          mean: group2Mean.toFixed(2),
          sd: (Math.sqrt(statisticalData.group2.reduce((sum, val) => sum + Math.pow(val - group2Mean, 2), 0) / statisticalData.group2.length)).toFixed(2)
        },
        t: t.toFixed(2),
        df,
        p,
        significant: p < 0.05,
        interpretation: `There was a significant difference between Group 1 (M=${group1Mean.toFixed(2)}) and Group 2 (M=${group2Mean.toFixed(2)}); t(${df})=${t.toFixed(2)}, p=${p.toFixed(3)}.`
      };
    } else if (selectedStatisticalTest === 'correlation') {
      // Simplified correlation calculation
      const correlation = 0.68; // Simulated correlation coefficient
      const p = 0.008; // Simulated p-value
      
      results = {
        test: 'correlation',
        r: correlation.toFixed(2),
        n: statisticalData.group1.length,
        p,
        significant: p < 0.05,
        interpretation: `There was a significant positive correlation between the variables (r=${correlation.toFixed(2)}, n=${statisticalData.group1.length}, p=${p.toFixed(3)}).`
      };
    }
    
    setStatisticalResults(results);
  };

  // Save statistical analysis
  const saveStatisticalAnalysis = () => {
    if (statisticalResults) {
      const newAnalysis = {
        id: Date.now(),
        type: selectedStatisticalTest,
        title: `${selectedStatisticalTest === 't-test' ? 'T-Test' : 'Correlation'} Analysis`,
        description: 'Statistical analysis of research data',
        data: statisticalData,
        results: statisticalResults,
        interpretation: statisticalResults.interpretation
      };
      
      setStatisticalAnalyses([...statisticalAnalyses, newAnalysis]);
      setShowStatisticsModal(false);
      setStatisticalResults(null);
    }
  };

  // Insert statistical analysis into paper
  const insertStatisticalAnalysisReference = (analysis) => {
    const reference = `[Statistical Analysis: ${analysis.title}]`;
    
    // Insert at cursor position or at end of current section
    const currentSectionContent = paperSections.find(s => s.id === activeSection)?.content || '';
    const updatedContent = currentSectionContent + '\n\n' + reference + '\n\n';
    
    updateSectionContent(activeSection, updatedContent);
  };

  // Render visualization based on type
  const renderVisualization = (visualization) => {
    const { type, data, options } = visualization;
    
    const chartOptions = {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        title: {
          display: !!options.title,
          text: options.title
        },
        legend: {
          display: options.showLegend
        }
      },
      scales: {
        x: {
          title: {
            display: !!options.xAxisLabel,
            text: options.xAxisLabel
          }
        },
        y: {
          title: {
            display: !!options.yAxisLabel,
            text: options.yAxisLabel
          }
        }
      }
    };
    
    switch (type) {
      case 'bar':
        return <Bar data={data} options={chartOptions} />;
      case 'line':
        return <Line data={data} options={chartOptions} />;
      case 'pie':
        return <Pie data={data} options={chartOptions} />;
      default:
        return <div>Unsupported visualization type</div>;
    }
  };

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <BookOpen className="h-8 w-8 text-teal-600" />
            <div>
              <h1 className="text-xl font-semibold text-gray-800">Academic Paper Assistant</h1>
              <p className="text-sm text-gray-500">AI-powered research paper writing tool</p>
            </div>
          </div>
          <div className="flex items-center space-x-3">
            <button 
              className="flex items-center px-3 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
              onClick={() => setShowAiGenerationModal(true)}
            >
              <Brain className="h-4 w-4 mr-2" />
              Generate with AI
            </button>
            <div className="text-sm text-gray-500">
              {savedAt ? `Last saved: ${savedAt.toLocaleTimeString()}` : 'Not saved yet'}
            </div>
            <button className="flex items-center px-3 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition-colors">
              <Save className="h-4 w-4 mr-2" />
              Save
            </button>
            <div className="relative">
              <button 
                className="flex items-center px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
                onClick={() => document.getElementById('export-menu').classList.toggle('hidden')}
              >
                <Download className="h-4 w-4 mr-2" />
                Export
              </button>
              <div id="export-menu" className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg hidden z-10">
                <div className="py-1">
                  <button onClick={() => exportPaper('PDF')} className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Export as PDF</button>
                  <button onClick={() => exportPaper('DOCX')} className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Export as DOCX</button>
                  <button onClick={() => exportPaper('LaTeX')} className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Export as LaTeX</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <aside className="w-16 bg-gray-800 flex flex-col items-center py-6">
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'editor' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('editor')}
            title="Editor"
          >
            <FileText className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'research' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('research')}
            title="Research"
          >
            <Search className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'references' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('references')}
            title="References"
          >
            <BookmarkPlus className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'visualizations' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('visualizations')}
            title="Visualizations"
          >
            <BarChart className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'statistics' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('statistics')}
            title="Statistical Analysis"
          >
            <Database className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'collaboration' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('collaboration')}
            title="Collaboration"
          >
            <Users className="h-6 w-6" />
          </button>
          <div className="flex-grow"></div>
          <button 
            className={`p-3 rounded-lg ${activeTab === 'settings' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('settings')}
            title="Settings"
          >
            <Settings className="h-6 w-6" />
          </button>
        </aside>

        {/* Secondary Sidebar */}
        <div className="w-64 border-r border-gray-200 bg-white overflow-y-auto">
          {activeTab === 'editor' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Document Structure</h2>
              <div className="space-y-2">
                {paperSections.map(section => (
                  <div 
                    key={section.id}
                    className={`p-3 rounded-md cursor-pointer flex items-center justify-between ${activeSection === section.id ? 'bg-teal-50 border border-teal-200' : 'hover:bg-gray-100'}`}
                    onClick={() => setActiveSection(section.id)}
                  >
                    <span className={`${section.completed ? 'text-teal-600' : 'text-gray-700'}`}>{section.name}</span>
                    <button 
                      className={`h-5 w-5 rounded ${section.completed ? 'text-teal-600' : 'text-gray-400'}`}
                      onClick={(e) => {
                        e.stopPropagation();
                        toggleSectionCompletion(section.id);
                      }}
                    >
                      <CheckSquare className="h-5 w-5" />
                    </button>
                  </div>
                ))}
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Progress</h3>
                <div className="w-full bg-gray-200 rounded-full h-2.5">
                  <div 
                    className="bg-teal-600 h-2.5 rounded-full" 
                    style={{ width: `${calculateCompletion()}%` }}
                  ></div>
                </div>
                <p className="text-sm text-gray-500 mt-1">{calculateCompletion()}% complete</p>
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Word Count</h3>
                <p className="text-2xl font-semibold text-gray-800">{wordCount} <span className="text-sm text-gray-500">words</span></p>
                <p className="text-xs text-gray-500 mt-1">Target: 6,000 words</p>
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">AI Tools</h3>
                <div className="space-y-2">
                  <button 
                    className="w-full p-2 bg-indigo-50 text-indigo-700 rounded-md text-sm font-medium hover:bg-indigo-100 transition-colors flex items-center"
                    onClick={() => setShowAiGenerationModal(true)}
                  >
                    <Brain className="h-4 w-4 mr-2" />
                    Generate Full Paper
                  </button>
                  <button 
                    className="w-full p-2 bg-indigo-50 text-indigo-700 rounded-md text-sm font-medium hover:bg-indigo-100 transition-colors flex items-center"
                  >
                    <Edit3 className="h-4 w-4 mr-2" />
                    Improve Current Section
                  </button>
                  <button 
                    className="w-full p-2 bg-indigo-50 text-indigo-700 rounded-md text-sm font-medium hover:bg-indigo-100 transition-colors flex items-center"
                  >
                    <RefreshCw className="h-4 w-4 mr-2" />
                    Rewrite Selection
                  </button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'research' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Research Tools</h2>
              <form onSubmit={handleSearch}>
                <div className="relative">
                  <input
                    type="text"
                    placeholder="Search academic papers..."
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                  <button 
                    type="submit"
                    className="absolute right-2 top-2 text-gray-400 hover:text-gray-600"
                  >
                    <Search className="h-5 w-5" />
                  </button>
                </div>
              </form>
              <div className="mt-4">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Saved Research Notes</h3>
                <div className="space-y-2">
                  <div className="p-3 bg-gray-100 rounded-md">
                    <h4 className="text-sm font-medium">Key findings from Smith (2022)</h4>
                    <p className="text-xs text-gray-600 mt-1">Added 2 days ago</p>
                  </div>
                  <div className="p-3 bg-gray-100 rounded-md">
                    <h4 className="text-sm font-medium">Methodology comparison</h4>
                    <p className="text-xs text-gray-600 mt-1">Added yesterday</p>
                  </div>
                </div>
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">AI Research Assistant</h3>
                <div className="p-3 bg-indigo-50 rounded-md">
                  <p className="text-sm text-indigo-700">Ask AI to find relevant papers, summarize articles, or extract key information.</p>
                  <div className="mt-2">
                    <input
                      type="text"
                      placeholder="Ask a research question..."
                      className="w-full px-3 py-2 text-sm border border-indigo-200 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    />
                    <button className="w-full mt-2 p-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 transition-colors">
                      Get AI Assistance
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'references' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">References</h2>
              <div className="flex justify-between items-center mb-4">
                <div>
                  <label className="text-sm text-gray-600 block mb-1">Citation Style</label>
                  <select 
                    className="border border-gray-300 rounded-md px-2 py-1 text-sm"
                    value={citationStyle}
                    onChange={(e) => setCitationStyle(e.target.value)}
                  >
                    <option value="APA">APA</option>
                    <option value="MLA">MLA</option>
                    <option value="Chicago">Chicago</option>
                    <option value="Harvard">Harvard</option>
                    <option value="IEEE">IEEE</option>
                  </select>
                </div>
                <button 
                  className="px-3 py-1 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                  onClick={() => setShowReferenceModal(true)}
                >
                  Add New
                </button>
              </div>
              <div className="space-y-3 mt-4">
                {references.length === 0 ? (
                  <p className="text-sm text-gray-500 italic">No references added yet.</p>
                ) : (
                  references.map((ref, index) => (
                    <div key={index} className="p-3 bg-gray-100 rounded-md text-sm">
                      <p className="font-medium">{ref.title}</p>
                      <p className="text-gray-600">{ref.authors}</p>
                      <p className="text-gray-500 text-xs">{ref.journal}, {ref.year}</p>
                      {ref.doi && <p className="text-xs text-teal-600 mt-1">DOI: {ref.doi}</p>}
                    </div>
                  ))
                )}
              </div>
              <div className="mt-4">
                <button className="w-full p-2 bg-indigo-50 text-indigo-700 rounded-md text-sm font-medium hover:bg-indigo-100 transition-colors flex items-center justify-center">
                  <Brain className="h-4 w-4 mr-2" />
                  Find Missing Citations with AI
                </button>
              </div>
            </div>
          )}

          {activeTab === 'visualizations' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Visualizations</h2>
              <button 
                className="w-full px-3 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700 mb-4"
                onClick={() => setShowVisualizationModal(true)}
              >
                Create New Visualization
              </button>
              <div className="space-y-3">
                {visualizations.length === 0 ? (
                  <p className="text-sm text-gray-500 italic">No visualizations created yet.</p>
                ) : (
                  visualizations.map((vis) => (
                    <div 
                      key={vis.id} 
                      className={`p-3 bg-gray-100 rounded-md cursor-pointer ${activeVisualization?.id === vis.id ? 'ring-2 ring-teal-500' : ''}`}
                      onClick={() => setActiveVisualization(vis)}
                    >
                      <div className="flex justify-between items-start">
                        <h3 className="text-sm font-medium">{vis.title}</h3>
                        <span className="text-xs px-2 py-0.5 bg-gray-200 rounded-full">{vis.type}</span>
                      </div>
                      <p className="text-xs text-gray-600 mt-1">{vis.description || 'No description'}</p>
                      <div className="mt-2 flex space-x-2">
                        <button 
                          className="text-xs px-2 py-1 bg-teal-100 text-teal-700 rounded hover:bg-teal-200"
                          onClick={(e) => {
                            e.stopPropagation();
                            insertVisualizationReference(vis);
                          }}
                        >
                          Insert
                        </button>
                        <button 
                          className="text-xs px-2 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
                          onClick={(e) => {
                            e.stopPropagation();
                            // Edit visualization logic
                          }}
                        >
                          Edit
                        </button>
                      </div>
                    </div>
                  ))
                )}
              </div>
              <div className="mt-4">
                <button className="w-full p-2 bg-indigo-50 text-indigo-700 rounded-md text-sm font-medium hover:bg-indigo-100 transition-colors flex items-center justify-center">
                  <Brain className="h-4 w-4 mr-2" />
                  Generate Visualizations with AI
                </button>
              </div>
            </div>
          )}

          {activeTab === 'statistics' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Statistical Analysis</h2>
              <button 
                className="w-full px-3 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700 mb-4"
                onClick={() => setShowStatisticsModal(true)}
              >
                Perform New Analysis
              </button>
              <div className="space-y-3">
                {statisticalAnalyses.length === 0 ? (
                  <p className="text-sm text-gray-500 italic">No statistical analyses performed yet.</p>
                ) : (
                  statisticalAnalyses.map((analysis) => (
                    <div key={analysis.id} className="p-3 bg-gray-100 rounded-md">
                      <div className="flex justify-between items-start">
                        <h3 className="text-sm font-medium">{analysis.title}</h3>
                        <span className="text-xs px-2 py-0.5 bg-gray-200 rounded-full">{analysis.type}</span>
                      </div>
                      <p className="text-xs text-gray-600 mt-1">{analysis.description}</p>
                      <div className="mt-2 text-xs">
                        {analysis.type === 't-test' && (
                          <p>
                            t({analysis.results.df}) = {analysis.results.t}, 
                            p = {analysis.results.p < 0.001 ? '< 0.001' : analysis.results.p.toFixed(3)}, 
                            {analysis.results.significant ? ' significant' : ' not significant'}
                          </p>
                        )}
                        {analysis.type === 'correlation' && (
                          <p>
                            r = {analysis.results.r}, 
                            p = {analysis.results.p < 0.001 ? '< 0.001' : analysis.results.p.toFixed(3)}, 
                            {analysis.results.significant ? ' significant' : ' not significant'}
                          </p>
                        )}
                      </div>
                      <div className="mt-2 flex space-x-2">
                        <button 
                          className="text-xs px-2 py-1 bg-teal-100 text-teal-700 rounded hover:bg-teal-200"
                          onClick={() => insertStatisticalAnalysisReference(analysis)}
                        >
                          Insert
                        </button>
                        <button className="text-xs px-2 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
                          View Details
                        </button>
                      </div>
                    </div>
                  ))
                )}
              </div>
              <div className="mt-4">
                <button className="w-full p-2 bg-indigo-50 text-indigo-700 rounded-md text-sm font-medium hover:bg-indigo-100 transition-colors flex items-center justify-center">
                  <Brain className="h-4 w-4 mr-2" />
                  AI Statistical Recommendations
                </button>
              </div>
            </div>
          )}

          {activeTab === 'collaboration' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Collaboration</h2>
              <div className="mb-4">
                <button className="w-full px-3 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 text-sm">
                  Invite Collaborators
                </button>
              </div>
              <h3 className="text-sm font-medium text-gray-700 mb-2">Current Collaborators</h3>
              <div className="space-y-2">
                {collaborators.map(collaborator => (
                  <div key={collaborator.id} className="flex items-center justify-between p-2 bg-gray-100 rounded-md">
                    <div>
                      <p className="text-sm font-medium">{collaborator.name}</p>
                      <p className="text-xs text-gray-500">{collaborator.email}</p>
                    </div>
                    <span className="text-xs px-2 py-1 bg-gray-200 rounded-full">{collaborator.role}</span>
                  </div>
                ))}
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Activity Log</h3>
                <div className="space-y-2 text-xs text-gray-600">
                  <div className="flex items-start space-x-2">
                    <Clock className="h-3 w-3 mt-1 flex-shrink-0" />
                    <p>You edited the Introduction section (10 minutes ago)</p>
                  </div>
                  <div className="flex items-start space-x-2">
                    <Clock className="h-3 w-3 mt-1 flex-shrink-0" />
                    <p>You added 2 new references (1 hour ago)</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'settings' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Settings</h2>
              <div className="space-y-4">
                <div>
                  <h3 className="text-sm font-medium text-gray-700 mb-2">Journal Templates</h3>
                  <div className="space-y-2">
                    {templates.map(template => (
                      <div 
                        key={template.id}
                        className={`p-3 rounded-md cursor-pointer ${selectedTemplate?.id === template.id ? 'bg-teal-50 border border-teal-200' : 'bg-gray-100 hover:bg-gray-200'}`}
                        onClick={() => applyTemplate(template)}
                      >
                        <p className="text-sm font-medium">{template.name}</p>
                        <p className="text-xs text-gray-600">{template.description}</p>
                      </div>
                    ))}
                  </div>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-gray-700 mb-2">AI Settings</h3>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-600">Default AI Model</label>
                      <select className="border border-gray-300 rounded-md px-2 py-1 text-sm">
                        <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
                        <option value="deepseek-v3-fw">Deepseek-V3-FW</option>
                        <option value="gpt-4o">GPT-4o</option>
                      </select>
                    </div>
                    <div className="flex items-center">
                      <label className="inline-flex items-center cursor-pointer">
                        <input 
                          type="checkbox" 
                          className="sr-only peer"
                          checked={showAiSuggestions}
                          onChange={() => setShowAiSuggestions(!showAiSuggestions)}
                        />
                        <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-600"></div>
                        <span className="ml-3 text-sm font-medium text-gray-700">Enable AI suggestions</span>
                      </label>
                    </div>
                  </div>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-gray-700 mb-2">Auto-save</h3>
                  <div className="flex items-center">
                    <label className="inline-flex items-center cursor-pointer">
                      <input type="checkbox" className="sr-only peer" checked={true} readOnly />
                      <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-600"></div>
                      <span className="ml-3 text-sm font-medium text-gray-700">Auto-save every 5 minutes</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Main Content Area */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {activeTab === 'editor' && (
            <div className="flex-1 flex flex-col overflow-hidden">
              <div className="p-6 border-b border-gray-200">
                <input
                  type="text"
                  value={paperTitle}
                  onChange={(e) => setPaperTitle(e.target.value)}
                  className="w-full text-2xl font-bold text-gray-800 border-none focus:outline-none focus:ring-0"
                  placeholder="Enter paper title..."
                />
              </div>
              <div className="flex-1 overflow-auto p-6 bg-white">
                <h2 className="text-xl font-semibold mb-4">{paperSections.find(s => s.id === activeSection)?.name}</h2>
                <textarea
                  className="w-full h-full p-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                  placeholder={`Write your ${paperSections.find(s => s.id === activeSection)?.name.toLowerCase()} here...`}
                  value={paperSections.find(s => s.id === activeSection)?.content || ''}
                  onChange={(e) => updateSectionContent(activeSection, e.target.value)}
                ></textarea>
              </div>
              {showAiSuggestions && aiSuggestions.length > 0 && (
                <div className="p-4 bg-teal-50 border-t border-teal-200">
                  <div className="flex items-start">
                    <AlertCircle className="h-5 w-5 text-teal-600 mr-2 flex-shrink-0 mt-0.5" />
                    <div>
                      <h3 className="text-sm font-medium text-teal-800">AI Writing Suggestions</h3>
                      <ul className="mt-2 space-y-1">
                        {aiSuggestions.map((suggestion, index) => (
                          <li key={index} className="text-sm text-teal-700 flex items-start">
                            <span className="mr-2">•</span>
                            <span>{suggestion}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {activeTab === 'research' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-4">Research Results</h2>
              {isSearching ? (
                <div className="flex justify-center items-center h-64">
                  <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-600"></div>
                </div>
              ) : searchResults.length > 0 ? (
                <div className="space-y-4">
                  {searchResults.map(result => (
                    <div key={result.id} className="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
                      <h3 className="text-lg font-medium text-gray-800">{result.title}</h3>
                      <p className="text-sm text-gray-600 mt-1">{result.authors}</p>
                      <p className="text-sm text-gray-500 mt-1">{result.journal}, {result.year}</p>
                      {result.doi && <p className="text-sm text-teal-600 mt-1">DOI: {result.doi}</p>}
                      <div className="mt-3 flex space-x-2">
                        <button className="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-md hover:bg-gray-300">
                          View Abstract
                        </button>
                        <button 
                          className="px-3 py-1 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                          onClick={() => addReferenceFromSearch(result)}
                        >
                          Add to References
                        </button>
                        <button className="px-3 py-1 bg-indigo-100 text-indigo-700 text-sm rounded-md hover:bg-indigo-200 flex items-center">
                          <Brain className="h-3 w-3 mr-1" />
                          Summarize
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : searchQuery ? (
                <div className="text-center py-12">
                  <p className="text-gray-500">No results found for "{searchQuery}"</p>
                  <p className="text-sm text-gray-400 mt-2">Try different keywords or broaden your search</p>
                </div>
              ) : (
                <div className="text-center py-12">
                  <Search className="h-12 w-12 text-gray-300 mx-auto mb-4" />
                  <p className="text-gray-500">Search for academic papers to begin your research</p>
                  <p className="text-sm text-gray-400 mt-2">Enter keywords, author names, or topics</p>
                </div>
              )}
            </div>
          )}

          {activeTab === 'references' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Reference Management</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Reference List</h3>
                  {references.length === 0 ? (
                    <div className="text-center py-8">
                      <BookmarkPlus className="h-10 w-10 text-gray-300 mx-auto mb-3" />
                      <p className="text-gray-500">No references added yet</p>
                      <button 
                        className="mt-3 px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                        onClick={() => setShowReferenceModal(true)}
                      >
                        Add Your First Reference
                      </button>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {references.map((ref, index) => (
                        <div key={index} className="p-3 bg-gray-50 rounded-md border border-gray-200">
                          <div className="flex justify-between">
                            <h4 className="font-medium text-gray-800">{ref.title}</h4>
                            <div className="flex space-x-1">
                              <button className="text-gray-400 hover:text-gray-600">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                </svg>
                              </button>
                              <button className="text-gray-400 hover:text-red-600">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                              </button>
                            </div>
                          </div>
                          <p className="text-sm text-gray-600">{ref.authors}</p>
                          <p className="text-sm text-gray-500">{ref.journal}, {ref.year}</p>
                          {ref.doi && <p className="text-xs text-teal-600 mt-1">DOI: {ref.doi}</p>}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Citation Preview</h3>
                  <div className="mb-4">
                    <label className="text-sm text-gray-600 block mb-1">Citation Style</label>
                    <select 
                      className="border border-gray-300 rounded-md px-3 py-2 w-full"
                      value={citationStyle}
                      onChange={(e) => setCitationStyle(e.target.value)}
                    >
                      <option value="APA">APA (7th Edition)</option>
                      <option value="MLA">MLA (8th Edition)</option>
                      <option value="Chicago">Chicago (17th Edition)</option>
                      <option value="Harvard">Harvard</option>
                      <option value="IEEE">IEEE</option>
                    </select>
                  </div>
                  <div className="bg-gray-50 p-4 rounded-md border border-gray-200">
                    <h4 className="text-sm font-medium mb-2">In-text Citation</h4>
                    {references.length > 0 ? (
                      <div className="text-sm">
                        {citationStyle === 'APA' && <p>According to recent research (Smith et al., 2022), the findings suggest...</p>}
                        {citationStyle === 'MLA' && <p>Recent studies indicate that "quoted text" (Smith et al. 42).</p>}
                        {citationStyle === 'Chicago' && <p>As noted by Smith et al., "quoted text."<sup>1</sup></p>}
                        {citationStyle === 'Harvard' && <p>It has been argued (Smith et al., 2022, p.42) that...</p>}
                        {citationStyle === 'IEEE' && <p>Recent research [1] has demonstrated that...</p>}
                      </div>
                    ) : (
                      <p className="text-sm text-gray-500 italic">Add references to see citation previews</p>
                    )}
                  </div>
                  <div className="bg-gray-50 p-4 rounded-md border border-gray-200 mt-4">
                    <h4 className="text-sm font-medium mb-2">Reference List Format</h4>
                    {references.length > 0 ? (
                      <div className="text-sm">
                        {citationStyle === 'APA' && (
                          <p>Smith, J., Johnson, A., & Williams, B. (2022). The impact of artificial intelligence on scientific discovery. <em>Nature</em>, 603(7901), 123-145. https://doi.org/10.1038/s41586-022-04543-3</p>
                        )}
                        {citationStyle === 'MLA' && (
                          <p>Smith, John, et al. "The Impact of Artificial Intelligence on Scientific Discovery." <em>Nature</em>, vol. 603, no. 7901, 2022, pp. 123-145.</p>
                        )}
                        {citationStyle === 'Chicago' && (
                          <p>Smith, John, Alice Johnson, and Brian Williams. "The Impact of Artificial Intelligence on Scientific Discovery." <em>Nature</em> 603, no. 7901 (2022): 123-145.</p>
                        )}
                        {citationStyle === 'Harvard' && (
                          <p>Smith, J., Johnson, A. and Williams, B. (2022) 'The impact of artificial intelligence on scientific discovery', <em>Nature</em>, 603(7901), pp. 123-145.</p>
                        )}
                        {citationStyle === 'IEEE' && (
                          <p>[1] J. Smith, A. Johnson, and B. Williams, "The impact of artificial intelligence on scientific discovery," <em>Nature</em>, vol. 603, no. 7901, pp. 123-145, 2022.</p>
                        )}
                      </div>
                    ) : (
                      <p className="text-sm text-gray-500 italic">Add references to see reference list format</p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'visualizations' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Data Visualizations</h2>
              <div className="flex justify-between items-center mb-4">
                <div>
                  <button 
                    className="px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                    onClick={() => setShowVisualizationModal(true)}
                  >
                    Create New Visualization
                  </button>
                </div>
                <div>
                  <button className="px-4 py-2 bg-indigo-100 text-indigo-700 text-sm rounded-md hover:bg-indigo-200 flex items-center">
                    <Brain className="h-4 w-4 mr-2" />
                    Generate with AI
                  </button>
                </div>
              </div>
              
              {activeVisualization ? (
                <div className="border border-gray-200 rounded-lg p-6 bg-white">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-medium">{activeVisualization.title}</h3>
                    <button 
                      className="text-gray-400 hover:text-gray-600"
                      onClick={() => setActiveVisualization(null)}
                    >
                      <X className="h-5 w-5" />
                    </button>
                  </div>
                  <div className="h-80">
                    {renderVisualization(activeVisualization)}
                  </div>
                  <p className="text-sm text-gray-600 mt-4">{activeVisualization.description || 'No description provided.'}</p>
                  <div className="mt-4 flex space-x-3">
                    <button 
                      className="px-3 py-1 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                      onClick={() => insertVisualizationReference(activeVisualization)}
                    >
                      Insert into Paper
                    </button>
                    <button className="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-md hover:bg-gray-300">
                      Edit Visualization
                    </button>
                    <button className="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-md hover:bg-gray-300">
                      Export as Image
                    </button>
                  </div>
                </div>
              ) : visualizations.length > 0 ? (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {visualizations.map(vis => (
                    <div 
                      key={vis.id} 
                      className="border border-gray-200 rounded-lg p-4 bg-white hover:shadow-md transition-shadow cursor-pointer"
                      onClick={() => setActiveVisualization(vis)}
                    >
                      <h3 className="text-md font-medium mb-2">{vis.title}</h3>
                      <div className="h-48">
                        {renderVisualization(vis)}
                      </div>
                      <div className="mt-3 flex justify-between items-center">
                        <span className="text-xs px-2 py-0.5 bg-gray-200 rounded-full">{vis.type}</span>
                        <button 
                          className="text-xs px-2 py-1 bg-teal-100 text-teal-700 rounded hover:bg-teal-200"
                          onClick={(e) => {
                            e.stopPropagation();
                            insertVisualizationReference(vis);
                          }}
                        >
                          Insert
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-16 border border-gray-200 rounded-lg bg-white">
                  <BarChart className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-700 mb-2">No Visualizations Yet</h3>
                  <p className="text-gray-500 max-w-md mx-auto mb-6">Create visualizations to enhance your paper with charts, graphs, and other data representations.</p>
                  <div className="flex justify-center space-x-4">
                    <button 
                      className="px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                      onClick={() => setShowVisualizationModal(true)}
                    >
                      Create Visualization
                    </button>
                    <button className="px-4 py-2 bg-indigo-100 text-indigo-700 text-sm rounded-md hover:bg-indigo-200 flex items-center">
                      <Brain className="h-4 w-4 mr-2" />
                      Generate with AI
                    </button>
                  </div>
                </div>
              )}
            </div>
          )}

          {activeTab === 'statistics' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Statistical Analysis</h2>
              <div className="flex justify-between items-center mb-4">
                <div>
                  <button 
                    className="px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                    onClick={() => setShowStatisticsModal(true)}
                  >
                    Perform New Analysis
                  </button>
                </div>
                <div>
                  <button className="px-4 py-2 bg-indigo-100 text-indigo-700 text-sm rounded-md hover:bg-indigo-200 flex items-center">
                    <Brain className="h-4 w-4 mr-2" />
                    AI Analysis Recommendations
                  </button>
                </div>
              </div>
              
              {statisticalAnalyses.length > 0 ? (
                <div className="space-y-6">
                  {statisticalAnalyses.map(analysis => (
                    <div key={analysis.id} className="border border-gray-200 rounded-lg p-6 bg-white">
                      <div className="flex justify-between items-start mb-4">
                        <div>
                          <h3 className="text-lg font-medium">{analysis.title}</h3>
                          <p className="text-sm text-gray-600">{analysis.description}</p>
                        </div>
                        <span className="text-xs px-2 py-1 bg-gray-200 rounded-full">{analysis.type}</span>
                      </div>
                      
                      <div className="bg-gray-50 p-4 rounded-md">
                        <h4 className="text-sm font-medium mb-3">Results</h4>
                        {analysis.type === 't-test' && (
                          <div className="space-y-3">
                            <div className="grid grid-cols-3 gap-4 text-sm">
                              <div>
                                <p className="font-medium">{analysis.data.group1?.name || 'Group 1'}</p>
                                <p>n = {analysis.results.group1.n}</p>
                                <p>Mean = {analysis.results.group1.mean}</p>
                                <p>SD = {analysis.results.group1.sd}</p>
                              </div>
                              <div>
                                <p className="font-medium">{analysis.data.group2?.name || 'Group 2'}</p>
                                <p>n = {analysis.results.group2.n}</p>
                                <p>Mean = {analysis.results.group2.mean}</p>
                                <p>SD = {analysis.results.group2.sd}</p>
                              </div>
                              <div>
                                <p className="font-medium">Test Statistics</p>
                                <p>t = {analysis.results.t}</p>
                                <p>df = {analysis.results.df}</p>
                                <p>p = {analysis.results.p < 0.001 ? '< 0.001' : analysis.results.p.toFixed(3)}</p>
                                <p>Significant: {analysis.results.significant ? 'Yes' : 'No'}</p>
                                {analysis.results.effectSize && (
                                  <p>Effect size: {analysis.results.effectSize.toFixed(2)} ({analysis.results.effectSizeInterpretation})</p>
                                )}
                              </div>
                            </div>
                          </div>
                        )}
                        
                        {analysis.type === 'correlation' && (
                          <div className="space-y-3">
                            <div className="grid grid-cols-2 gap-4 text-sm">
                              <div>
                                <p className="font-medium">Variables</p>
                                <p>{analysis.data.variables?.join(' and ') || 'Variable 1 and Variable 2'}</p>
                                <p>n = {analysis.results.n}</p>
                              </div>
                              <div>
                                <p className="font-medium">Test Statistics</p>
                                <p>r = {analysis.results.r}</p>
                                <p>p = {analysis.results.p < 0.001 ? '< 0.001' : analysis.results.p.toFixed(3)}</p>
                                <p>Significant: {analysis.results.significant ? 'Yes' : 'No'}</p>
                                {analysis.results.effectSize && (
                                  <p>Effect size: {analysis.results.effectSize.toFixed(2)} ({analysis.results.effectSizeInterpretation})</p>
                                )}
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                      
                      <div className="mt-4">
                        <h4 className="text-sm font-medium mb-2">Interpretation</h4>
                        <p className="text-sm text-gray-700">{analysis.interpretation}</p>
                      </div>
                      
                      <div className="mt-4 flex space-x-3">
                        <button 
                          className="px-3 py-1 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                          onClick={() => insertStatisticalAnalysisReference(analysis)}
                        >
                          Insert into Paper
                        </button>
                        <button className="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-md hover:bg-gray-300">
                          Edit Analysis
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-16 border border-gray-200 rounded-lg bg-white">
                  <Database className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-700 mb-2">No Statistical Analyses Yet</h3>
                  <p className="text-gray-500 max-w-md mx-auto mb-6">Perform statistical analyses to add rigor and evidence to your research findings.</p>
                  <div className="flex justify-center space-x-4">
                    <button 
                      className="px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                      onClick={() => setShowStatisticsModal(true)}
                    >
                      Perform Analysis
                    </button>
                    <button className="px-4 py-2 bg-indigo-100 text-indigo-700 text-sm rounded-md hover:bg-indigo-200 flex items-center">
                      <Brain className="h-4 w-4 mr-2" />
                      AI Recommendations
                    </button>
                  </div>
                </div>
              )}
            </div>
          )}

          {activeTab === 'collaboration' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Collaboration Tools</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Comments & Feedback</h3>
                  <div className="space-y-4">
                    <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                      <div className="flex justify-between items-start">
                        <div>
                          <p className="text-sm font-medium">Introduction - Paragraph 2</p>
                          <p className="text-xs text-gray-500">You, 2 hours ago</p>
                        </div>
                        <button className="text-gray-400 hover:text-gray-600">
                          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      <p className="text-sm mt-2">Need to expand this section with more recent literature.</p>
                    </div>
                    <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
                      <div className="flex justify-between items-start">
                        <div>
                          <p className="text-sm font-medium">Methods - Sample Size</p>
                          <p className="text-xs text-gray-500">AI Assistant, 1 hour ago</p>
                        </div>
                        <button className="text-gray-400 hover:text-gray-600">
                          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      <p className="text-sm mt-2">Consider adding a power analysis to justify your sample size.</p>
                    </div>
                  </div>
                  <div className="mt-4">
                    <textarea
                      className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                      placeholder="Add a new comment..."
                      rows={3}
                    ></textarea>
                    <div className="mt-2 flex justify-end">
                      <button className="px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700">
                        Add Comment
                      </button>
                    </div>
                  </div>
                </div>
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Peer Review Simulation</h3>
                  <p className="text-sm text-gray-600 mb-4">Get AI-generated feedback that simulates journal peer review to improve your paper before submission.</p>
                  <div className="space-y-3">
                    <div className="flex items-center">
                      <input id="reviewer1" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer1" className="ml-2 block text-sm text-gray-700">Methodological Reviewer</label>
                    </div>
                    <div className="flex items-center">
                      <input id="reviewer2" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer2" className="ml-2 block text-sm text-gray-700">Theoretical Framework Reviewer</label>
                    </div>
                    <div className="flex items-center">
                      <input id="reviewer3" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer3" className="ml-2 block text-sm text-gray-700">Statistical Analysis Reviewer</label>
                    </div>
                    <div className="flex items-center">
                      <input id="reviewer4" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer4" className="ml-2 block text-sm text-gray-700">Language & Style Reviewer</label>
                    </div>
                  </div>
                  <div className="mt-4">
                    <button className="w-full px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700">
                      Generate Peer Review
                    </button>
                  </div>
                </div>
              </div>
              <div className="mt-6 border border-gray-200 rounded-lg p-4">
                <h3 className="text-lg font-medium mb-4">Journal Recommendation</h3>
                <p className="text-sm text-gray-600 mb-4">Based on your paper's content, these journals might be a good fit for submission:</p>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="font-medium text-gray-800">Journal of Academic Research</h4>
                    <p className="text-xs text-gray-500 mt-1">Impact Factor: 4.2</p>
                    <div className="flex items-center mt-2">
                      <span className="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">95% Match</span>
                      <span className="text-xs text-gray-500 ml-2">~3 months review time</span>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="font-medium text-gray-800">International Review of Science</h4>
                    <p className="text-xs text-gray-500 mt-1">Impact Factor: 5.7</p>
                    <div className="flex items-center mt-2">
                      <span className="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">82% Match</span>
                      <span className="text-xs text-gray-500 ml-2">~5 months review time</span>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="font-medium text-gray-800">Research Quarterly</h4>
                    <p className="text-xs text-gray-500 mt-1">Impact Factor: 3.8</p>
                    <div className="flex items-center mt-2">
                      <span className="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">78% Match</span>
                      <span className="text-xs text-gray-500 ml-2">~2 months review time</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'settings' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Application Settings</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Paper Information</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Paper Title</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        value={paperTitle}
                        onChange={(e) => setPaperTitle(e.target.value)}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Authors</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        placeholder="e.g., John Smith, Jane Doe"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Keywords</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        placeholder="e.g., machine learning, artificial intelligence"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Abstract</label>
                      <textarea
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                        rows={4}
                        placeholder="Enter your abstract here..."
                        value={paperSections.find(s => s.id === 'abstract')?.content || ''}
                        onChange={(e) => updateSectionContent('abstract', e.target.value)}
                      ></textarea>
                    </div>
                  </div>
                </div>
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">AI Settings</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Default AI Model</label>
                      <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">
                        <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
                        <option value="deepseek-v3-fw">Deepseek-V3-FW</option>
                        <option value="gpt-4o">GPT-4o</option>
                      </select>
                      <p className="text-xs text-gray-500 mt-1">Select the AI model to use for paper generation and assistance</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">AI Writing Style</label>
                      <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">
                        <option value="academic">Academic (Formal)</option>
                        <option value="technical">Technical</option>
                        <option value="explanatory">Explanatory</option>
                        <option value="concise">Concise</option>
                      </select>
                      <p className="text-xs text-gray-500 mt-1">Choose the writing style for AI-generated content</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">AI Features</label>
                      <div className="space-y-2">
                        <div className="flex items-center">
                          <input id="ai-suggestions" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" checked={showAiSuggestions} onChange={() => setShowAiSuggestions(!showAiSuggestions)} />
                          <label htmlFor="ai-suggestions" className="ml-2 block text-sm text-gray-700">Real-time writing suggestions</label>
                        </div>
                        <div className="flex items-center">
                          <input id="ai-citations" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" defaultChecked />
                          <label htmlFor="ai-citations" className="ml-2 block text-sm text-gray-700">Automatic citation recommendations</label>
                        </div>
                        <div className="flex items-center">
                          <input id="ai-grammar" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" defaultChecked />
                          <label htmlFor="ai-grammar" className="ml-2 block text-sm text-gray-700">Grammar and style checking</label>
                        </div>
                        <div className="flex items-center">
                          <input id="ai-plagiarism" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" defaultChecked />
                          <label htmlFor="ai-plagiarism" className="ml-2 block text-sm text-gray-700">Plagiarism detection</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="mt-6 border border-gray-200 rounded-lg p-4">
                <h3 className="text-lg font-medium mb-4">Analytics</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="text-sm font-medium text-gray-700">Word Count</h4>
                    <p className="text-2xl font-semibold text-gray-800 mt-1">{wordCount}</p>
                    <p className="text-xs text-gray-500 mt-1">Target: 6,000 words</p>
                    <div className="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-teal-600 h-1.5 rounded-full" 
                        style={{ width: `${Math.min((wordCount / 6000) * 100, 100)}%` }}
                      ></div>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="text-sm font-medium text-gray-700">Completion</h4>
                    <p className="text-2xl font-semibold text-gray-800 mt-1">{calculateCompletion()}%</p>
                    <p className="text-xs text-gray-500 mt-1">Sections completed: {paperSections.filter(s => s.completed).length}/{paperSections.length}</p>
                    <div className="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-teal-600 h-1.5 rounded-full" 
                        style={{ width: `${calculateCompletion()}%` }}
                      ></div>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="text-sm font-medium text-gray-700">References</h4>
                    <p className="text-2xl font-semibold text-gray-800 mt-1">{references.length}</p>
                    <p className="text-xs text-gray-500 mt-1">Recommended: 25-30 references</p>
                    <div className="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-teal-600 h-1.5 rounded-full" 
                        style={{ width: `${Math.min((references.length / 25) * 100, 100)}%` }}
                      ></div>
                    </div>
                  </div>
                </div>
                <div className="h-64 bg-gray-50 border border-gray-200 rounded-md flex items-center justify-center">
                  <div className="text-center">
                    <BarChart2 className="h-10 w-10 text-gray-300 mx-auto mb-2" />
                    <p className="text-gray-500">Writing progress over time</p>
                    <p className="text-xs text-gray-400 mt-1">Continue writing to see your progress analytics</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* AI Paper Generation Modal */}
      {showAiGenerationModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-2xl">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Generate Research Paper with AI</h3>
              <button 
                className="text-gray-400 hover:text-gray-600"
                onClick={() => setShowAiGenerationModal(false)}
                disabled={isGeneratingPaper}
              >
                <X className="h-6 w-6" />
              </button>
            </div>
            
            {isGeneratingPaper ? (
              <div className="py-8">
                <div className="flex flex-col items-center">
                  <div className="relative w-24 h-24 mb-6">
                    <div className="absolute inset-0 rounded-full border-4 border-gray-200"></div>
                    <div 
                      className="absolute inset-0 rounded-full border-4 border-teal-600 border-t-transparent"
                      style={{ 
                        transform: 'rotate(0deg)',
                        animation: 'spin 1.5s linear infinite'
                      }}
                    ></div>
                    <div className="absolute inset-0 flex items-center justify-center">
                      <p className="text-lg font-semibold text-gray-700">{generationProgress}%</p>
                    </div>
                  </div>
                  <h4 className="text-lg font-medium text-gray-800 mb-2">Generating Your Paper</h4>
                  <p className="text-gray-600 mb-6">{generationStep}</p>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div 
                      className="bg-teal-600 h-2 rounded-full transition-all duration-300" 
                      style={{ width: `${generationProgress}%` }}
                    ></div>
                  </div>
                  <p className="text-sm text-gray-500 mt-4">This may take a few minutes. The AI is researching, writing, and formatting your paper.</p>
                </div>
              </div>
            ) : (
              <>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Research Topic*</label>
                    <input
                      type="text"
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                      placeholder="e.g., The impact of artificial intelligence on academic research"
                      value={aiGenerationParams.topic}
                      onChange={(e) => setAiGenerationParams({...aiGenerationParams, topic: e.target.value})}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Field of Study</label>
                      <select 
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        value={aiGenerationParams.field}
                        onChange={(e) => setAiGenerationParams({...aiGenerationParams, field: e.target.value})}
                      >
                        <option value="Computer Science">Computer Science</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Psychology">Psychology</option>
                        <option value="Economics">Economics</option>
                        <option value="Engineering">Engineering</option>
                        <option value="Physics">Physics</option>
                        <option value="Biology">Biology</option>
                        <option value="Sociology">Sociology</option>
                        <option value="Education">Education</option>
                        <option value="Environmental Science">Environmental Science</option>
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Paper Length</label>
                      <select 
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        value={aiGenerationParams.length}
                        onChange={(e) => setAiGenerationParams({...aiGenerationParams, length: e.target.value})}
                      >
                        <option value="short">Short (~3,000 words)</option>
                        <option value="medium">Medium (~6,000 words)</option>
                        <option value="long">Long (~9,000 words)</option>
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Keywords (comma separated)</label>
                    <input
                      type="text"
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                      placeholder="e.g., artificial intelligence, academic research, productivity"
                      value={aiGenerationParams.keywords}
                      onChange={(e) => setAiGenerationParams({...aiGenerationParams, keywords: e.target.value})}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">AI Model</label>
                    <select 
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                      value={aiGenerationParams.model}
                      onChange={(e) => setAiGenerationParams({...aiGenerationParams, model: e.target.value})}
                    >
                      <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
                      <option value="deepseek-v3-fw">Deepseek-V3-FW</option>
                      <option value="gpt-4o">GPT-4o</option>
                    </select>
                    <p className="text-xs text-gray-500 mt-1">Different models have different strengths for various research domains</p>
                  </div>
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-gray-700">Additional Options</label>
                    <div className="flex items-center">
                      <input 
                        id="include-visualizations" 
                        type="checkbox" 
                        className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"
                        checked={aiGenerationParams.includeVisualizations}
                        onChange={(e) => setAiGenerationParams({...aiGenerationParams, includeVisualizations: e.target.checked})}
                      />
                      <label htmlFor="include-visualizations" className="ml-2 block text-sm text-gray-700">
                        Generate data visualizations (charts, graphs, tables)
                      </label>
                    </div>
                    <div className="flex items-center">
                      <input 
                        id="include-statistics" 
                        type="checkbox" 
                        className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"
                        checked={aiGenerationParams.includeStatistics}
                        onChange={(e) => setAiGenerationParams({...aiGenerationParams, includeStatistics: e.target.checked})}
                      />
                      <label htmlFor="include-statistics" className="ml-2 block text-sm text-gray-700">
                        Include statistical analysis
                      </label>
                    </div>
                  </div>
                </div>
                <div className="mt-6 bg-blue-50 p-3 rounded-md">
                  <div className="flex">
                    <div className="flex-shrink-0">
                      <HelpCircle className="h-5 w-5 text-blue-600" />
                    </div>
                    <div className="ml-3">
                      <p className="text-sm text-blue-700">
                        The AI will generate a complete research paper based on your specifications, including all sections, references, visualizations, and statistical analyses. You can edit the generated content afterward.
                      </p>
                    </div>
                  </div>
                </div>
                <div className="mt-6 flex justify-end space-x-3">
                  <button 
                    className="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
                    onClick={() => setShowAiGenerationModal(false)}
                  >
                    Cancel
                  </button>
                  <button 
                    className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center"
                    onClick={generatePaperWithAI}
                    disabled={!aiGenerationParams.topic}
                  >
                    <Brain className="h-4 w-4 mr-2" />
                    Generate Paper
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {/* Visualization Modal */}
      {showVisualizationModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Create Visualization</h3>
              <button 
                className="text-gray-400 hover:text-gray-600"
                onClick={() => setShowVisualizationModal(false)}
              >
                <X className="h-6 w-6" />
              </button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Visualization Type</label>
                    <select 
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                      value={visualizationType}
                      onChange={(e) => setVisualizationType(e.target.value)}
                    >
                      <option value="bar">Bar Chart</option>
                      <option value="line">Line Chart</option>
                      <option value="pie">Pie Chart</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Chart Title</label>
                    <input
                      type="text"
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                      value={visualizationOptions.title}
                      onChange={(e) => setVisualizationOptions({...visualizationOptions, title: e.target.value})}
                      placeholder="Enter chart title"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">X-Axis Label</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        value={visualizationOptions.xAxisLabel}
                        onChange={(e) => setVisualizationOptions({...visualizationOptions, xAxisLabel: e.target.value})}
                        placeholder="X-Axis"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Y-Axis Label</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        value={visualizationOptions.yAxisLabel}
                        onChange={(e) => setVisualizationOptions({...visualizationOptions, yAxisLabel: e.target.value})}
                        placeholder="Y-Axis"
                      />
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Data</label>
                    <div className="border border-gray-300 rounded-md p-3">
                      <div className="mb-2">
                        <label className="block text-xs font-medium text-gray-600 mb-1">Labels (comma separated)</label>
                        <input
                          type="text"
                          className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-teal-500"
                          value={visualizationData.labels.join(', ')}
                          onChange={(e) => {
                            const labels = e.target.value.split(',').map(label => label.trim());
                            setVisualizationData({...visualizationData, labels});
                          }}
                          placeholder="Label 1, Label 2, Label 3..."
                        />
                      </div>
                      <div>
                        <label className="block text-xs font-medium text-gray-600 mb-1">Values (comma separated)</label>
                        <input
                          type="text"
                          className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-teal-500"
                          value={visualizationData.datasets[0].data.join(', ')}
                          onChange={(e) => {
                            const values = e.target.value.split(',').map(val => parseFloat(val.trim()) || 0);
                            const updatedDatasets = [...visualizationData.datasets];
                            updatedDatasets[0] = {...updatedDatasets[0], data: values};
                            setVisualizationData({...visualizationData, datasets: updatedDatasets});
                          }}
                          placeholder="10, 20, 30..."
                        />
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <input 
                      id="show-legend" 
                      type="checkbox" 
                      className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"
                      checked={visualizationOptions.showLegend}
                      onChange={(e) => setVisualizationOptions({...visualizationOptions, showLegend: e.target.checked})}
                    />
                    <label htmlFor="show-legend" className="ml-2 block text-sm text-gray-700">
                      Show legend
                    </label>
                  </div>
                </div>
              </div>
              <div>
                <div className="border border-gray-200 rounded-lg p-4 bg-white h-full flex flex-col">
                  <h4 className="text-sm font-medium text-gray-700 mb-2">Preview</h4>
                  <div className="flex-grow">
                    {visualizationType === 'bar' && <Bar data={visualizationData} options={{
                      responsive: true,
                      plugins: {
                        title: {
                          display: !!visualizationOptions.title,
                          text: visualizationOptions.title
                        },
                        legend: {
                          display: visualizationOptions.showLegend
                        }
                      },
                      scales: {
                        x: {
                          title: {
                            display: !!visualizationOptions.xAxisLabel,
                            text: visualizationOptions.xAxisLabel
                          }
                        },
                        y: {
                          title: {
                            display: !!visualizationOptions.yAxisLabel,
                            text: visualizationOptions.yAxisLabel
                          }
                        }
                      }
                    }} />}
                    {visualizationType === 'line' && <Line data={visualizationData} options={{
                      responsive: true,
                      plugins: {
                        title: {
                          display: !!visualizationOptions.title,
                          text: visualizationOptions.title
                        },
                        legend: {
                          display: visualizationOptions.showLegend
                        }
                      },
                      scales: {
                        x: {
                          title: {
                            display: !!visualizationOptions.xAxisLabel,
                            text: visualizationOptions.xAxisLabel
                          }
                        },
                        y: {
                          title: {
                            display: !!visualizationOptions.yAxisLabel,
                            text: visualizationOptions.yAxisLabel
                          }
                        }
                      }
                    }} />}
                    {visualizationType === 'pie' && <Pie data={visualizationData} options={{
                      responsive: true,
                      plugins: {
                        title: {
                          display: !!visualizationOptions.title,
                          text: visualizationOptions.title
                        },
                        legend: {
                          display: visualizationOptions.showLegend
                        }
                      }
                    }} />}
                  </div>
                </div>
              </div>
            </div>
            <div className="mt-6 flex justify-end space-x-3">
              <button 
                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
                onClick={() => setShowVisualizationModal(false)}
              >
                Cancel
              </button>
              <button 
                className="px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700"
                onClick={createVisualization}
              >
                Create Visualization
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Statistical Analysis Modal */}
      {showStatisticsModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Statistical Analysis</h3>
              <button 
                className="text-gray-400 hover:text-gray-600"
                onClick={() => setShowStatisticsModal(false)}
              >
                <X className="h-6 w-6" />
              </button>
            </div>
            <div className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Select Statistical Test</label>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                  {statisticalTests.map(test => (
                    <div 
                      key={test.id}
                      className={`p-3 border rounded-md cursor-pointer ${selectedStatisticalTest === test.id ? 'border-teal-500 bg-teal-50' : 'border-gray-300 hover:bg-gray-50'}`}
                      onClick={() => setSelectedStatisticalTest(test.id)}
                    >
                      <div className="flex items-center">
                        <div className={`h-4 w-4 rounded-full mr-2 ${selectedStatisticalTest === test.id ? 'bg-teal-500' : 'bg-gray-300'}`}></div>
                        <span className="font-medium">{test.name}</span>
                      </div>
                      <p className="text-xs text-gray-500 mt-1">{test.description}</p>
                    </div>
                  ))}
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Enter Data</label>
                {selectedStatisticalTest === 't-test' && (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Group 1 (comma separated values)</label>
                      <textarea
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"<ant_artifact identifier="academic-paper-assistant" title="Academic Paper Assistant Code">
import React, { useState, useEffect } from 'react';
import { Search, BookOpen, FileText, Users, Settings, Save, Download, Upload, BookmarkPlus, CheckSquare, BarChart2, Clock, AlertCircle } from 'lucide-react';

// Main application component
export default function AcademicPaperAssistant() {
  const [activeTab, setActiveTab] = useState('editor');
  const [paperTitle, setPaperTitle] = useState('Untitled Research Paper');
  const [paperContent, setPaperContent] = useState('');
  const [wordCount, setWordCount] = useState(0);
  const [references, setReferences] = useState([]);
  const [citationStyle, setCitationStyle] = useState('APA');
  const [savedAt, setSavedAt] = useState(null);
  const [showReferenceModal, setShowReferenceModal] = useState(false);
  const [newReference, setNewReference] = useState({ 
    title: '', 
    authors: '', 
    journal: '', 
    year: '', 
    doi: '',
    url: ''
  });
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
  const [templates, setTemplates] = useState([
    { id: 1, name: 'IEEE', description: 'For engineering and computer science' },
    { id: 2, name: 'Nature', description: 'For natural sciences' },
    { id: 3, name: 'JAMA', description: 'For medical research' },
    { id: 4, name: 'APA', description: 'For social sciences' }
  ]);
  const [selectedTemplate, setSelectedTemplate] = useState(null);
  const [aiSuggestions, setAiSuggestions] = useState([]);
  const [showAiSuggestions, setShowAiSuggestions] = useState(false);
  const [paperSections, setPaperSections] = useState([
    { id: 'abstract', name: 'Abstract', content: '', completed: false },
    { id: 'introduction', name: 'Introduction', content: '', completed: false },
    { id: 'methods', name: 'Methods', content: '', completed: false },
    { id: 'results', name: 'Results', content: '', completed: false },
    { id: 'discussion', name: 'Discussion', content: '', completed: false },
    { id: 'conclusion', name: 'Conclusion', content: '', completed: false },
    { id: 'references', name: 'References', content: '', completed: false }
  ]);
  const [activeSection, setActiveSection] = useState('abstract');
  const [collaborators, setCollaborators] = useState([
    { id: 1, name: 'You', email: 'you@example.com', role: 'Owner' }
  ]);

  // Calculate word count whenever paper content changes
  useEffect(() => {
    const words = paperContent.trim().split(/\s+/);
    setWordCount(paperContent ? words.length : 0);
  }, [paperContent]);

  // Auto-save functionality
  useEffect(() => {
    const saveTimer = setTimeout(() => {
      if (paperContent) {
        // In a real app, this would save to a database or localStorage
        console.log('Auto-saving paper...');
        setSavedAt(new Date());
      }
    }, 5000);

    return () => clearTimeout(saveTimer);
  }, [paperContent]);

  // Simulate AI suggestions based on content
  useEffect(() => {
    if (paperContent.length > 100) {
      // In a real app, this would call an AI service
      const mockSuggestions = [
        "Consider adding more detail to your methodology section.",
        "Your introduction could benefit from a clearer research question.",
        "The literature review seems incomplete. Consider adding more recent sources."
      ];
      setAiSuggestions(mockSuggestions);
    }
  }, [paperContent]);

  // Handle search functionality
  const handleSearch = (e) => {
    e.preventDefault();
    if (!searchQuery.trim()) return;
    
    setIsSearching(true);
    
    // Simulate API call to academic search engine
    setTimeout(() => {
      const mockResults = [
        { id: 1, title: "Advances in Machine Learning for Natural Language Processing", authors: "Smith, J., Johnson, A.", journal: "Journal of AI Research", year: 2022, doi: "10.1234/jair.2022.123" },
        { id: 2, title: "A Comprehensive Review of Deep Learning Architectures", authors: "Chen, L., Wang, H.", journal: "IEEE Transactions on Neural Networks", year: 2021, doi: "10.1109/tnn.2021.456" },
        { id: 3, title: "The Impact of Artificial Intelligence on Academic Research", authors: "Garcia, M., Lee, S.", journal: "Science and Education", year: 2023, doi: "10.5678/sci.edu.2023.789" }
      ];
      setSearchResults(mockResults);
      setIsSearching(false);
    }, 1000);
  };

  // Add a reference from search results
  const addReferenceFromSearch = (reference) => {
    setReferences([...references, reference]);
    // Show confirmation toast in a real app
  };

  // Add a new reference manually
  const addNewReference = () => {
    if (newReference.title && newReference.authors) {
      setReferences([...references, { ...newReference, id: Date.now() }]);
      setNewReference({ title: '', authors: '', journal: '', year: '', doi: '', url: '' });
      setShowReferenceModal(false);
    }
  };

  // Update section content
  const updateSectionContent = (sectionId, content) => {
    setPaperSections(paperSections.map(section => 
      section.id === sectionId ? { ...section, content } : section
    ));
    
    // Update overall paper content
    const updatedContent = paperSections
      .map(section => section.id === sectionId ? content : section.content)
      .join('\n\n');
    setPaperContent(updatedContent);
  };

  // Mark section as completed
  const toggleSectionCompletion = (sectionId) => {
    setPaperSections(paperSections.map(section => 
      section.id === sectionId ? { ...section, completed: !section.completed } : section
    ));
  };

  // Apply template
  const applyTemplate = (template) => {
    setSelectedTemplate(template);
    // In a real app, this would load template-specific formatting and guidelines
  };

  // Export paper
  const exportPaper = (format) => {
    // In a real app, this would generate and download the paper in the specified format
    console.log(`Exporting paper in ${format} format...`);
    alert(`Your paper would now be downloaded in ${format} format.`);
  };

  // Calculate completion percentage
  const calculateCompletion = () => {
    const completedSections = paperSections.filter(section => section.completed).length;
    return Math.round((completedSections / paperSections.length) * 100);
  };

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <BookOpen className="h-8 w-8 text-teal-600" />
            <div>
              <h1 className="text-xl font-semibold text-gray-800">Academic Paper Assistant</h1>
              <p className="text-sm text-gray-500">Your comprehensive research paper writing tool</p>
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <div className="text-sm text-gray-500">
              {savedAt ? `Last saved: ${savedAt.toLocaleTimeString()}` : 'Not saved yet'}
            </div>
            <button className="flex items-center px-3 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition-colors">
              <Save className="h-4 w-4 mr-2" />
              Save
            </button>
            <div className="relative">
              <button 
                className="flex items-center px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
                onClick={() => document.getElementById('export-menu').classList.toggle('hidden')}
              >
                <Download className="h-4 w-4 mr-2" />
                Export
              </button>
              <div id="export-menu" className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg hidden z-10">
                <div className="py-1">
                  <button onClick={() => exportPaper('PDF')} className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Export as PDF</button>
                  <button onClick={() => exportPaper('DOCX')} className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Export as DOCX</button>
                  <button onClick={() => exportPaper('LaTeX')} className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Export as LaTeX</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <aside className="w-16 bg-gray-800 flex flex-col items-center py-6">
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'editor' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('editor')}
            title="Editor"
          >
            <FileText className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'research' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('research')}
            title="Research"
          >
            <Search className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'references' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('references')}
            title="References"
          >
            <BookmarkPlus className="h-6 w-6" />
          </button>
          <button 
            className={`p-3 rounded-lg mb-4 ${activeTab === 'collaboration' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('collaboration')}
            title="Collaboration"
          >
            <Users className="h-6 w-6" />
          </button>
          <div className="flex-grow"></div>
          <button 
            className={`p-3 rounded-lg ${activeTab === 'settings' ? 'bg-teal-600 text-white' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
            onClick={() => setActiveTab('settings')}
            title="Settings"
          >
            <Settings className="h-6 w-6" />
          </button>
        </aside>

        {/* Secondary Sidebar */}
        <div className="w-64 border-r border-gray-200 bg-white overflow-y-auto">
          {activeTab === 'editor' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Document Structure</h2>
              <div className="space-y-2">
                {paperSections.map(section => (
                  <div 
                    key={section.id}
                    className={`p-3 rounded-md cursor-pointer flex items-center justify-between ${activeSection === section.id ? 'bg-teal-50 border border-teal-200' : 'hover:bg-gray-100'}`}
                    onClick={() => setActiveSection(section.id)}
                  >
                    <span className={`${section.completed ? 'text-teal-600' : 'text-gray-700'}`}>{section.name}</span>
                    <button 
                      className={`h-5 w-5 rounded ${section.completed ? 'text-teal-600' : 'text-gray-400'}`}
                      onClick={(e) => {
                        e.stopPropagation();
                        toggleSectionCompletion(section.id);
                      }}
                    >
                      <CheckSquare className="h-5 w-5" />
                    </button>
                  </div>
                ))}
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Progress</h3>
                <div className="w-full bg-gray-200 rounded-full h-2.5">
                  <div 
                    className="bg-teal-600 h-2.5 rounded-full" 
                    style={{ width: `${calculateCompletion()}%` }}
                  ></div>
                </div>
                <p className="text-sm text-gray-500 mt-1">{calculateCompletion()}% complete</p>
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Word Count</h3>
                <p className="text-2xl font-semibold text-gray-800">{wordCount} <span className="text-sm text-gray-500">words</span></p>
                <p className="text-xs text-gray-500 mt-1">Target: 6,000 words</p>
              </div>
            </div>
          )}

          {activeTab === 'research' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Research Tools</h2>
              <form onSubmit={handleSearch}>
                <div className="relative">
                  <input
                    type="text"
                    placeholder="Search academic papers..."
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                  <button 
                    type="submit"
                    className="absolute right-2 top-2 text-gray-400 hover:text-gray-600"
                  >
                    <Search className="h-5 w-5" />
                  </button>
                </div>
              </form>
              <div className="mt-4">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Saved Research Notes</h3>
                <div className="space-y-2">
                  <div className="p-3 bg-gray-100 rounded-md">
                    <h4 className="text-sm font-medium">Key findings from Smith (2022)</h4>
                    <p className="text-xs text-gray-600 mt-1">Added 2 days ago</p>
                  </div>
                  <div className="p-3 bg-gray-100 rounded-md">
                    <h4 className="text-sm font-medium">Methodology comparison</h4>
                    <p className="text-xs text-gray-600 mt-1">Added yesterday</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'references' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">References</h2>
              <div className="flex justify-between items-center mb-4">
                <div>
                  <label className="text-sm text-gray-600 block mb-1">Citation Style</label>
                  <select 
                    className="border border-gray-300 rounded-md px-2 py-1 text-sm"
                    value={citationStyle}
                    onChange={(e) => setCitationStyle(e.target.value)}
                  >
                    <option value="APA">APA</option>
                    <option value="MLA">MLA</option>
                    <option value="Chicago">Chicago</option>
                    <option value="Harvard">Harvard</option>
                    <option value="IEEE">IEEE</option>
                  </select>
                </div>
                <button 
                  className="px-3 py-1 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                  onClick={() => setShowReferenceModal(true)}
                >
                  Add New
                </button>
              </div>
              <div className="space-y-3 mt-4">
                {references.length === 0 ? (
                  <p className="text-sm text-gray-500 italic">No references added yet.</p>
                ) : (
                  references.map((ref, index) => (
                    <div key={index} className="p-3 bg-gray-100 rounded-md text-sm">
                      <p className="font-medium">{ref.title}</p>
                      <p className="text-gray-600">{ref.authors}</p>
                      <p className="text-gray-500 text-xs">{ref.journal}, {ref.year}</p>
                      {ref.doi && <p className="text-xs text-teal-600 mt-1">DOI: {ref.doi}</p>}
                    </div>
                  ))
                )}
              </div>
            </div>
          )}

          {activeTab === 'collaboration' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Collaboration</h2>
              <div className="mb-4">
                <button className="w-full px-3 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 text-sm">
                  Invite Collaborators
                </button>
              </div>
              <h3 className="text-sm font-medium text-gray-700 mb-2">Current Collaborators</h3>
              <div className="space-y-2">
                {collaborators.map(collaborator => (
                  <div key={collaborator.id} className="flex items-center justify-between p-2 bg-gray-100 rounded-md">
                    <div>
                      <p className="text-sm font-medium">{collaborator.name}</p>
                      <p className="text-xs text-gray-500">{collaborator.email}</p>
                    </div>
                    <span className="text-xs px-2 py-1 bg-gray-200 rounded-full">{collaborator.role}</span>
                  </div>
                ))}
              </div>
              <div className="mt-6">
                <h3 className="text-sm font-medium text-gray-700 mb-2">Activity Log</h3>
                <div className="space-y-2 text-xs text-gray-600">
                  <div className="flex items-start space-x-2">
                    <Clock className="h-3 w-3 mt-1 flex-shrink-0" />
                    <p>You edited the Introduction section (10 minutes ago)</p>
                  </div>
                  <div className="flex items-start space-x-2">
                    <Clock className="h-3 w-3 mt-1 flex-shrink-0" />
                    <p>You added 2 new references (1 hour ago)</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'settings' && (
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Settings</h2>
              <div className="space-y-4">
                <div>
                  <h3 className="text-sm font-medium text-gray-700 mb-2">Journal Templates</h3>
                  <div className="space-y-2">
                    {templates.map(template => (
                      <div 
                        key={template.id}
                        className={`p-3 rounded-md cursor-pointer ${selectedTemplate?.id === template.id ? 'bg-teal-50 border border-teal-200' : 'bg-gray-100 hover:bg-gray-200'}`}
                        onClick={() => applyTemplate(template)}
                      >
                        <p className="text-sm font-medium">{template.name}</p>
                        <p className="text-xs text-gray-600">{template.description}</p>
                      </div>
                    ))}
                  </div>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-gray-700 mb-2">AI Writing Assistant</h3>
                  <div className="flex items-center">
                    <label className="inline-flex items-center cursor-pointer">
                      <input 
                        type="checkbox" 
                        className="sr-only peer"
                        checked={showAiSuggestions}
                        onChange={() => setShowAiSuggestions(!showAiSuggestions)}
                      />
                      <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-600"></div>
                      <span className="ml-3 text-sm font-medium text-gray-700">Enable AI suggestions</span>
                    </label>
                  </div>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-gray-700 mb-2">Auto-save</h3>
                  <div className="flex items-center">
                    <label className="inline-flex items-center cursor-pointer">
                      <input type="checkbox" className="sr-only peer" checked={true} readOnly />
                      <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-600"></div>
                      <span className="ml-3 text-sm font-medium text-gray-700">Auto-save every 5 minutes</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Main Content Area */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {activeTab === 'editor' && (
            <div className="flex-1 flex flex-col overflow-hidden">
              <div className="p-6 border-b border-gray-200">
                <input
                  type="text"
                  value={paperTitle}
                  onChange={(e) => setPaperTitle(e.target.value)}
                  className="w-full text-2xl font-bold text-gray-800 border-none focus:outline-none focus:ring-0"
                  placeholder="Enter paper title..."
                />
              </div>
              <div className="flex-1 overflow-auto p-6 bg-white">
                <h2 className="text-xl font-semibold mb-4">{paperSections.find(s => s.id === activeSection)?.name}</h2>
                <textarea
                  className="w-full h-full p-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                  placeholder={`Write your ${paperSections.find(s => s.id === activeSection)?.name.toLowerCase()} here...`}
                  value={paperSections.find(s => s.id === activeSection)?.content || ''}
                  onChange={(e) => updateSectionContent(activeSection, e.target.value)}
                ></textarea>
              </div>
              {showAiSuggestions && aiSuggestions.length > 0 && (
                <div className="p-4 bg-teal-50 border-t border-teal-200">
                  <div className="flex items-start">
                    <AlertCircle className="h-5 w-5 text-teal-600 mr-2 flex-shrink-0 mt-0.5" />
                    <div>
                      <h3 className="text-sm font-medium text-teal-800">AI Writing Suggestions</h3>
                      <ul className="mt-2 space-y-1">
                        {aiSuggestions.map((suggestion, index) => (
                          <li key={index} className="text-sm text-teal-700 flex items-start">
                            <span className="mr-2">•</span>
                            <span>{suggestion}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {activeTab === 'research' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-4">Research Results</h2>
              {isSearching ? (
                <div className="flex justify-center items-center h-64">
                  <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-600"></div>
                </div>
              ) : searchResults.length > 0 ? (
                <div className="space-y-4">
                  {searchResults.map(result => (
                    <div key={result.id} className="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
                      <h3 className="text-lg font-medium text-gray-800">{result.title}</h3>
                      <p className="text-sm text-gray-600 mt-1">{result.authors}</p>
                      <p className="text-sm text-gray-500 mt-1">{result.journal}, {result.year}</p>
                      {result.doi && <p className="text-sm text-teal-600 mt-1">DOI: {result.doi}</p>}
                      <div className="mt-3 flex space-x-2">
                        <button className="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-md hover:bg-gray-300">
                          View Abstract
                        </button>
                        <button 
                          className="px-3 py-1 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                          onClick={() => addReferenceFromSearch(result)}
                        >
                          Add to References
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : searchQuery ? (
                <div className="text-center py-12">
                  <p className="text-gray-500">No results found for "{searchQuery}"</p>
                  <p className="text-sm text-gray-400 mt-2">Try different keywords or broaden your search</p>
                </div>
              ) : (
                <div className="text-center py-12">
                  <Search className="h-12 w-12 text-gray-300 mx-auto mb-4" />
                  <p className="text-gray-500">Search for academic papers to begin your research</p>
                  <p className="text-sm text-gray-400 mt-2">Enter keywords, author names, or topics</p>
                </div>
              )}
            </div>
          )}

          {activeTab === 'references' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Reference Management</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Reference List</h3>
                  {references.length === 0 ? (
                    <div className="text-center py-8">
                      <BookmarkPlus className="h-10 w-10 text-gray-300 mx-auto mb-3" />
                      <p className="text-gray-500">No references added yet</p>
                      <button 
                        className="mt-3 px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700"
                        onClick={() => setShowReferenceModal(true)}
                      >
                        Add Your First Reference
                      </button>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {references.map((ref, index) => (
                        <div key={index} className="p-3 bg-gray-50 rounded-md border border-gray-200">
                          <div className="flex justify-between">
                            <h4 className="font-medium text-gray-800">{ref.title}</h4>
                            <div className="flex space-x-1">
                              <button className="text-gray-400 hover:text-gray-600">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                </svg>
                              </button>
                              <button className="text-gray-400 hover:text-red-600">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                              </button>
                            </div>
                          </div>
                          <p className="text-sm text-gray-600">{ref.authors}</p>
                          <p className="text-sm text-gray-500">{ref.journal}, {ref.year}</p>
                          {ref.doi && <p className="text-xs text-teal-600 mt-1">DOI: {ref.doi}</p>}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Citation Preview</h3>
                  <div className="mb-4">
                    <label className="text-sm text-gray-600 block mb-1">Citation Style</label>
                    <select 
                      className="border border-gray-300 rounded-md px-3 py-2 w-full"
                      value={citationStyle}
                      onChange={(e) => setCitationStyle(e.target.value)}
                    >
                      <option value="APA">APA (7th Edition)</option>
                      <option value="MLA">MLA (8th Edition)</option>
                      <option value="Chicago">Chicago (17th Edition)</option>
                      <option value="Harvard">Harvard</option>
                      <option value="IEEE">IEEE</option>
                    </select>
                  </div>
                  <div className="bg-gray-50 p-4 rounded-md border border-gray-200">
                    <h4 className="text-sm font-medium mb-2">In-text Citation</h4>
                    {references.length > 0 ? (
                      <div className="text-sm">
                        {citationStyle === 'APA' && <p>According to recent research (Smith et al., 2022), the findings suggest...</p>}
                        {citationStyle === 'MLA' && <p>Recent studies indicate that "quoted text" (Smith et al. 42).</p>}
                        {citationStyle === 'Chicago' && <p>As noted by Smith et al., "quoted text."<sup>1</sup></p>}
                        {citationStyle === 'Harvard' && <p>It has been argued (Smith et al., 2022, p.42) that...</p>}
                        {citationStyle === 'IEEE' && <p>Recent research [1] has demonstrated that...</p>}
                      </div>
                    ) : (
                      <p className="text-sm text-gray-500 italic">Add references to see citation previews</p>
                    )}
                  </div>
                  <div className="bg-gray-50 p-4 rounded-md border border-gray-200 mt-4">
                    <h4 className="text-sm font-medium mb-2">Reference List Format</h4>
                    {references.length > 0 ? (
                      <div className="text-sm">
                        {citationStyle === 'APA' && (
                          <p>Smith, J., Johnson, A. (2022). Advances in Machine Learning for Natural Language Processing. <em>Journal of AI Research</em>, 15(2), 123-145. https://doi.org/10.1234/jair.2022.123</p>
                        )}
                        {citationStyle === 'MLA' && (
                          <p>Smith, John, and Alice Johnson. "Advances in Machine Learning for Natural Language Processing." <em>Journal of AI Research</em>, vol. 15, no. 2, 2022, pp. 123-145.</p>
                        )}
                        {citationStyle === 'Chicago' && (
                          <p>Smith, John, and Alice Johnson. "Advances in Machine Learning for Natural Language Processing." <em>Journal of AI Research</em> 15, no. 2 (2022): 123-145.</p>
                        )}
                        {citationStyle === 'Harvard' && (
                          <p>Smith, J. and Johnson, A. (2022) 'Advances in Machine Learning for Natural Language Processing', <em>Journal of AI Research</em>, 15(2), pp. 123-145.</p>
                        )}
                        {citationStyle === 'IEEE' && (
                          <p>[1] J. Smith and A. Johnson, "Advances in Machine Learning for Natural Language Processing," <em>J. AI Res.</em>, vol. 15, no. 2, pp. 123-145, 2022.</p>
                        )}
                      </div>
                    ) : (
                      <p className="text-sm text-gray-500 italic">Add references to see reference list format</p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'collaboration' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Collaboration Tools</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Comments & Feedback</h3>
                  <div className="space-y-4">
                    <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                      <div className="flex justify-between items-start">
                        <div>
                          <p className="text-sm font-medium">Introduction - Paragraph 2</p>
                          <p className="text-xs text-gray-500">You, 2 hours ago</p>
                        </div>
                        <button className="text-gray-400 hover:text-gray-600">
                          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      <p className="text-sm mt-2">Need to expand this section with more recent literature.</p>
                    </div>
                    <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
                      <div className="flex justify-between items-start">
                        <div>
                          <p className="text-sm font-medium">Methods - Sample Size</p>
                          <p className="text-xs text-gray-500">AI Assistant, 1 hour ago</p>
                        </div>
                        <button className="text-gray-400 hover:text-gray-600">
                          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      <p className="text-sm mt-2">Consider adding a power analysis to justify your sample size.</p>
                    </div>
                  </div>
                  <div className="mt-4">
                    <textarea
                      className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                      placeholder="Add a new comment..."
                      rows={3}
                    ></textarea>
                    <div className="mt-2 flex justify-end">
                      <button className="px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700">
                        Add Comment
                      </button>
                    </div>
                  </div>
                </div>
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Peer Review Simulation</h3>
                  <p className="text-sm text-gray-600 mb-4">Get AI-generated feedback that simulates journal peer review to improve your paper before submission.</p>
                  <div className="space-y-3">
                    <div className="flex items-center">
                      <input id="reviewer1" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer1" className="ml-2 block text-sm text-gray-700">Methodological Reviewer</label>
                    </div>
                    <div className="flex items-center">
                      <input id="reviewer2" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer2" className="ml-2 block text-sm text-gray-700">Theoretical Framework Reviewer</label>
                    </div>
                    <div className="flex items-center">
                      <input id="reviewer3" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer3" className="ml-2 block text-sm text-gray-700">Statistical Analysis Reviewer</label>
                    </div>
                    <div className="flex items-center">
                      <input id="reviewer4" type="checkbox" className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" />
                      <label htmlFor="reviewer4" className="ml-2 block text-sm text-gray-700">Language & Style Reviewer</label>
                    </div>
                  </div>
                  <div className="mt-4">
                    <button className="w-full px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700">
                      Generate Peer Review
                    </button>
                  </div>
                </div>
              </div>
              <div className="mt-6 border border-gray-200 rounded-lg p-4">
                <h3 className="text-lg font-medium mb-4">Journal Recommendation</h3>
                <p className="text-sm text-gray-600 mb-4">Based on your paper's content, these journals might be a good fit for submission:</p>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="font-medium text-gray-800">Journal of Academic Research</h4>
                    <p className="text-xs text-gray-500 mt-1">Impact Factor: 4.2</p>
                    <div className="flex items-center mt-2">
                      <span className="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">95% Match</span>
                      <span className="text-xs text-gray-500 ml-2">~3 months review time</span>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="font-medium text-gray-800">International Review of Science</h4>
                    <p className="text-xs text-gray-500 mt-1">Impact Factor: 5.7</p>
                    <div className="flex items-center mt-2">
                      <span className="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">82% Match</span>
                      <span className="text-xs text-gray-500 ml-2">~5 months review time</span>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="font-medium text-gray-800">Research Quarterly</h4>
                    <p className="text-xs text-gray-500 mt-1">Impact Factor: 3.8</p>
                    <div className="flex items-center mt-2">
                      <span className="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">78% Match</span>
                      <span className="text-xs text-gray-500 ml-2">~2 months review time</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'settings' && (
            <div className="flex-1 overflow-auto p-6">
              <h2 className="text-xl font-semibold mb-6">Application Settings</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Paper Information</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Paper Title</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        value={paperTitle}
                        onChange={(e) => setPaperTitle(e.target.value)}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Authors</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        placeholder="e.g., John Smith, Jane Doe"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Keywords</label>
                      <input
                        type="text"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                        placeholder="e.g., machine learning, artificial intelligence"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Abstract</label>
                      <textarea
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 resize-none"
                        rows={4}
                        placeholder="Enter your abstract here..."
                        value={paperSections.find(s => s.id === 'abstract')?.content || ''}
                        onChange={(e) => updateSectionContent('abstract', e.target.value)}
                      ></textarea>
                    </div>
                  </div>
                </div>
                <div className="border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">Export & Sharing</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Export Format</label>
                      <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">
                        <option value="pdf">PDF</option>
                        <option value="docx">Microsoft Word (.docx)</option>
                        <option value="latex">LaTeX</option>
                        <option value="html">HTML</option>
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Paper Website</label>
                      <div className="flex items-center">
                        <input
                          type="checkbox"
                          id="createWebsite"
                          className="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"
                        />
                        <label htmlFor="createWebsite" className="ml-2 block text-sm text-gray-700">
                          Create a dedicated website for this paper
                        </label>
                      </div>
                      <p className="text-xs text-gray-500 mt-1">Includes interactive figures, supplementary materials, and code</p>
                    </div>
                    <div className="pt-2">
                      <button className="w-full px-4 py-2 bg-teal-600 text-white text-sm rounded-md hover:bg-teal-700 flex items-center justify-center">
                        <Download className="h-4 w-4 mr-2" />
                        Export Paper
                      </button>
                    </div>
                    <div>
                      <button className="w-full px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded-md hover:bg-gray-50 flex items-center justify-center">
                        <Upload className="h-4 w-4 mr-2" />
                        Import Data
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div className="mt-6 border border-gray-200 rounded-lg p-4">
                <h3 className="text-lg font-medium mb-4">Analytics</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="text-sm font-medium text-gray-700">Word Count</h4>
                    <p className="text-2xl font-semibold text-gray-800 mt-1">{wordCount}</p>
                    <p className="text-xs text-gray-500 mt-1">Target: 6,000 words</p>
                    <div className="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-teal-600 h-1.5 rounded-full" 
                        style={{ width: `${Math.min((wordCount / 6000) * 100, 100)}%` }}
                      ></div>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="text-sm font-medium text-gray-700">Completion</h4>
                    <p className="text-2xl font-semibold text-gray-800 mt-1">{calculateCompletion()}%</p>
                    <p className="text-xs text-gray-500 mt-1">Sections completed: {paperSections.filter(s => s.completed).length}/{paperSections.length}</p>
                    <div className="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-teal-600 h-1.5 rounded-full" 
                        style={{ width: `${calculateCompletion()}%` }}
                      ></div>
                    </div>
                  </div>
                  <div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
                    <h4 className="text-sm font-medium text-gray-700">References</h4>
                    <p className="text-2xl font-semibold text-gray-800 mt-1">{references.length}</p>
                    <p className="text-xs text-gray-500 mt-1">Recommended: 25-30 references</p>
                    <div className="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div 
                        className="bg-teal-600 h-1.5 rounded-full" 
                        style={{ width: `${Math.min((references.length / 25) * 100, 100)}%` }}
                      ></div>
                    </div>
                  </div>
                </div>
                <div className="h-64 bg-gray-50 border border-gray-200 rounded-md flex items-center justify-center">
                  <div className="text-center">
                    <BarChart2 className="h-10 w-10 text-gray-300 mx-auto mb-2" />
                    <p className="text-gray-500">Writing progress over time</p>
                    <p className="text-xs text-gray-400 mt-1">Continue writing to see your progress analytics</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Reference Modal */}
      {showReferenceModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium">Add New Reference</h3>
              <button 
                className="text-gray-400 hover:text-gray-600"
                onClick={() => setShowReferenceModal(false)}
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Title *</label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                  value={newReference.title}
                  onChange={(e) => setNewReference({...newReference, title: e.target.value})}
                  placeholder="Paper title"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Authors *</label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                  value={newReference.authors}
                  onChange={(e) => setNewReference({...newReference, authors: e.target.value})}
                  placeholder="e.g., Smith, J., Johnson, A."
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Journal/Publication</label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                  value={newReference.journal}
                  onChange={(e) => setNewReference({...newReference, journal: e.target.value})}
                  placeholder="Journal name"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Year</label>
                  <input
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                    value={newReference.year}
                    onChange={(e) => setNewReference({...newReference, year: e.target.value})}
                    placeholder="Publication year"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">DOI</label>
                  <input
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                    value={newReference.doi}
                    onChange={(e) => setNewReference({...newReference, doi: e.target.value})}
                    placeholder="Digital Object Identifier"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">URL</label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500"
                  value={newReference.url}
                  onChange={(e) => setNewReference({...newReference, url: e.target.value})}
                  placeholder="Link to paper"
                />
              </div>
            </div>
            <div className="mt-6 flex justify-end space-x-3">
              <button 
                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
                onClick={() => setShowReferenceModal(false)}
              >
                Cancel
              </button>
              <button 
                className="px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700"
                onClick={addNewReference}
              >
                Add Reference
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}