import React, { useState, useRef } from 'react';
import { Moon, Sun, Upload, FileText, Download, Share2, MessageSquare, AlertCircle, LayoutGrid, List, Grid, ChevronLeft, ArrowRight, X, BrainCircuit, BookOpen, Layers, Key, ChevronDown } from 'lucide-react';
import Background from './components/Background';
import BentoCard from './components/BentoCard';
import ChatBot from './components/ChatBot';
import BlogView from './components/BlogView';
import { BentoCardData, BlogSection, ChatMessage, AppSettings, ProcessingStatus, ViewMode, PaperStructure, GeminiModel, ReadingPreferences } from './types';
import { generateBentoCards, expandBentoCard, chatWithDocument, analyzePaperStructure, generateAndValidateSection, MODEL_INFO } from './services/aiService';

// Default reading preferences for ADHD-friendly features
const defaultReadingPreferences: ReadingPreferences = {
  bionicReading: false,
  eli5Mode: false,
  highlightKeyTerms: true,
  ttsEnabled: false,
  ttsSpeed: 1.0
};

const App: React.FC = () => {
  // Settings
  const [settings, setSettings] = useState<AppSettings>({
    apiKey: '',
    model: 'gemini-2.5-flash',
    theme: 'light',
    layoutMode: 'auto',
    useThinking: false,
    readingPreferences: defaultReadingPreferences
  });

  // Inputs
  const [file, setFile] = useState<File | null>(null);
  
  // State
  const [view, setView] = useState<'input' | 'results'>('input');
  const [resultViewMode, setResultViewMode] = useState<ViewMode>('grid');
  const [cards, setCards] = useState<BentoCardData[]>([]);
  const [blogSections, setBlogSections] = useState<BlogSection[]>([]);
  const [paperStructure, setPaperStructure] = useState<PaperStructure | null>(null);
  const [isBlogLoading, setIsBlogLoading] = useState(false);
  const [blogLoadingStage, setBlogLoadingStage] = useState<'idle' | 'analyzing' | 'generating' | 'validating'>('idle');
  const [currentGeneratingSection, setCurrentGeneratingSection] = useState<number>(-1);
  const [sectionStatus, setSectionStatus] = useState<string>('');
  const [status, setStatus] = useState<ProcessingStatus>({ state: 'idle' });
  const [paperContext, setPaperContext] = useState<string>(''); // Stores the raw text/base64
  const [paperTitle, setPaperTitle] = useState<string>('');
  const [retryingSectionIndex, setRetryingSectionIndex] = useState<number>(-1);
  
  // Chat
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
  const [isChatProcessing, setIsChatProcessing] = useState(false);

  const gridRef = useRef<HTMLDivElement>(null);
  const blogRef = useRef<HTMLDivElement>(null);

  const toggleTheme = () => {
    const newTheme = settings.theme === 'dark' ? 'light' : 'dark';
    setSettings(prev => ({ ...prev, theme: newTheme }));
    if (newTheme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setFile(e.target.files[0]);
    }
  };

  const handleProcess = async () => {
    if (!settings.apiKey) {
      setStatus({ state: 'error', message: 'Please enter your Gemini API Key.' });
      return;
    }
    
    if (!file) {
         setStatus({ state: 'error', message: "Please upload a PDF file." });
         return;
    }

    setStatus({ state: 'reading', message: 'Reading PDF file...' });

    try {
      let contentToProcess = "";
      const contextTitle = file.name;

      // PDF UPLOAD FLOW
      contentToProcess = await new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => {
              const result = reader.result as string;
              const base64 = result.split(',')[1]; 
              resolve(base64);
          };
          reader.onerror = reject;
          reader.readAsDataURL(file);
      });

      if (file.type !== 'application/pdf') {
         throw new Error("File must be a PDF.");
      }

      setPaperContext(contentToProcess);
      setPaperTitle(contextTitle);

      setStatus({ state: 'analyzing', message: settings.useThinking ? 'Thinking deeply about paper structure...' : 'Analyzing paper structure...' });
      
      const generatedCards = await generateBentoCards(
        settings.apiKey, 
        settings.model, 
        contentToProcess, 
        true,
        settings.useThinking
      );
      
      setCards(generatedCards);
      setStatus({ state: 'complete', message: 'Visualization ready.' });
      setView('results'); 

    } catch (error: any) {
      console.error(error);
      setStatus({ state: 'error', message: error.message || "An error occurred processing the paper." });
    }
  };

  const handleReset = () => {
    setView('input');
    setResultViewMode('grid');
    setCards([]);
    setBlogSections([]);
    setPaperStructure(null);
    setBlogLoadingStage('idle');
    setCurrentGeneratingSection(-1);
    setStatus({ state: 'idle' });
    setChatHistory([]);
    setIsChatOpen(false);
    setPaperTitle('');
    setPaperContext('');
    setFile(null);
  };

  const handleSwitchToBlogView = async () => {
    // If we already have fully generated sections, just switch view
    if (blogSections.length > 0 && blogSections.every(s => !s.isLoading)) {
      setResultViewMode('blog');
      return;
    }

    setIsBlogLoading(true);
    setResultViewMode('blog');

    try {
      // Step 1: Analyze paper structure
      setBlogLoadingStage('analyzing');
      const structure = await analyzePaperStructure(
        settings.apiKey,
        settings.model,
        paperContext,
        true,
        settings.useThinking
      );
      setPaperStructure(structure);
      setPaperTitle(structure.paperTitle || paperTitle);

      // Create placeholder sections with loading state
      const placeholderSections: BlogSection[] = structure.sections.map((plan, index) => ({
        id: plan.id,
        title: plan.title,
        content: '',
        isLoading: true,
        visualizationType: plan.suggestedVisualization
      }));
      setBlogSections(placeholderSections);

      // Step 2: Generate, validate, and repair each section progressively
      setBlogLoadingStage('generating');
      const paperContextInfo = {
        title: structure.paperTitle,
        abstract: structure.paperAbstract,
        mainContribution: structure.mainContribution,
        keyTerms: structure.keyTerms
      };

      for (let i = 0; i < structure.sections.length; i++) {
        setCurrentGeneratingSection(i);
        
        try {
          const generatedSection = await generateAndValidateSection(
            settings.apiKey,
            settings.model,
            paperContext,
            structure.sections[i],
            i,
            structure.sections.length,
            paperContextInfo,
            true,
            settings.useThinking,
            2, // max repair attempts
            (stage, message) => {
              // Update UI with current status
              if (stage === 'validating') {
                setBlogLoadingStage('validating');
              } else if (stage === 'generating' || stage === 'repairing') {
                setBlogLoadingStage('generating');
              }
              setSectionStatus(message);
            }
          );

          // Update the specific section in state
          setBlogSections(prev => prev.map((section, idx) => 
            idx === i ? { ...generatedSection, isLoading: false } : section
          ));
        } catch (sectionError: any) {
          // Mark section as errored but continue with others
          setBlogSections(prev => prev.map((section, idx) => 
            idx === i ? { 
              ...section, 
              isLoading: false, 
              error: sectionError.message,
              content: `Failed to generate this section: ${sectionError.message}` 
            } : section
          ));
        }
      }

      setCurrentGeneratingSection(-1);
      setSectionStatus('');
      setBlogLoadingStage('idle');

    } catch (error: any) {
      console.error('Failed to generate blog view:', error);
      setStatus({ state: 'error', message: 'Failed to analyze paper: ' + error.message });
      setBlogLoadingStage('idle');
    } finally {
      setIsBlogLoading(false);
    }
  };

  // Retry a failed section
  const handleRetrySection = async (sectionIndex: number) => {
    if (!paperStructure || !paperStructure.sections[sectionIndex]) {
      console.error('Cannot retry: missing paper structure or section plan');
      return;
    }

    setRetryingSectionIndex(sectionIndex);

    try {
      const sectionPlan = paperStructure.sections[sectionIndex];
      const paperContextInfo = {
        title: paperStructure.paperTitle,
        abstract: paperStructure.paperAbstract,
        mainContribution: paperStructure.mainContribution,
        keyTerms: paperStructure.keyTerms
      };

      const generatedSection = await generateAndValidateSection(
        settings.apiKey,
        settings.model,
        paperContext,
        sectionPlan,
        sectionIndex,
        paperStructure.sections.length,
        paperContextInfo,
        true,
        settings.useThinking,
        2,
        (stage, message) => {
          setSectionStatus(message);
        }
      );

      // Update the section in state
      setBlogSections(prev => prev.map((section, idx) =>
        idx === sectionIndex ? { ...generatedSection, isLoading: false, error: undefined } : section
      ));
      setSectionStatus('');
    } catch (error: any) {
      console.error(`Failed to retry section ${sectionIndex}:`, error);
      setBlogSections(prev => prev.map((section, idx) =>
        idx === sectionIndex ? {
          ...section,
          isLoading: false,
          error: error.message || 'Retry failed. Please try again.'
        } : section
      ));
    } finally {
      setRetryingSectionIndex(-1);
    }
  };

  const handleExpandCard = async (card: BentoCardData) => {
    if (card.expandedContent || card.isLoadingDetails) return;

    setCards(prev => prev.map(c => c.id === card.id ? { ...c, isLoadingDetails: true } : c));

    try {
      const details = await expandBentoCard(
        settings.apiKey,
        settings.model,
        card.title,
        card.detailPrompt,
        paperContext,
        settings.useThinking
      );

      setCards(prev => prev.map(c => c.id === card.id ? { ...c, expandedContent: details, isLoadingDetails: false } : c));
    } catch (error) {
      setCards(prev => prev.map(c => c.id === card.id ? { ...c, isLoadingDetails: false, expandedContent: "Failed to load details." } : c));
    }
  };

  const handleResizeCard = (id: string, deltaCol: number, deltaRow: number) => {
    setCards(prev => prev.map(c => {
      if (c.id === id) {
        const newCol = Math.max(1, Math.min(4, c.colSpan + deltaCol));
        const newRow = Math.max(1, Math.min(3, c.rowSpan + deltaRow));
        return { ...c, colSpan: newCol, rowSpan: newRow };
      }
      return c;
    }));
  };

  const handleRateCard = (id: string, rating: number) => {
      setCards(prev => prev.map(c => c.id === id ? { ...c, rating } : c));
      console.log(`Rated card ${id}: ${rating}`);
  };

  const handleExport = async () => {
    const targetRef = resultViewMode === 'blog' ? blogRef.current : gridRef.current;
    if (!targetRef) return;
    
    // @ts-ignore
    if (!window.html2canvas) {
        alert("Export module not loaded yet.");
        return;
    }

    // @ts-ignore
    const canvas = await window.html2canvas(targetRef, {
        backgroundColor: settings.theme === 'dark' ? '#0f172a' : '#f8fafc',
        scale: 2,
        useCORS: true, 
        logging: false,
        windowWidth: targetRef.scrollWidth,
        windowHeight: targetRef.scrollHeight,
    });

    if (resultViewMode === 'blog') {
        // Export as PDF for blog view
        // @ts-ignore
        if (!window.jspdf) {
            alert("PDF export module not loaded yet.");
            return;
        }
        // @ts-ignore
        const { jsPDF } = window.jspdf;
        const imgData = canvas.toDataURL('image/png');
        
        // A4 dimensions in mm
        const pdfWidth = 210;
        const pdfHeight = 297;
        
        // Calculate the scaled dimensions to fit width
        const ratio = pdfWidth / (canvas.width / 2); // Divide by scale factor (2)
        const scaledHeight = (canvas.height / 2) * ratio;
        
        // Create PDF
        const pdf = new jsPDF({
            orientation: 'portrait',
            unit: 'mm',
            format: 'a4'
        });
        
        // Calculate how many pages we need
        const pageCount = Math.ceil(scaledHeight / pdfHeight);
        
        for (let page = 0; page < pageCount; page++) {
            if (page > 0) {
                pdf.addPage();
            }
            // Position the image so the correct portion shows on each page
            const yOffset = -(page * pdfHeight);
            pdf.addImage(imgData, 'PNG', 0, yOffset, pdfWidth, scaledHeight);
        }
        
        pdf.save('paper-blog.pdf');
    } else {
        // Export as PNG for grid view
        const link = document.createElement('a');
        link.download = 'bento-summary.png';
        link.href = canvas.toDataURL();
        link.click();
    }
  };

  const handleShare = async () => {
    if (navigator.share) {
        try {
            await navigator.share({
                title: 'Paper Summary',
                text: 'Check out this visual summary generated by PaperStack!',
                url: window.location.href
            });
        } catch (err) {
            console.error("Share failed", err);
        }
    } else {
        alert("Sharing is not supported on this browser.");
    }
  };

  const handleSendMessage = async (text: string) => {
      const newUserMsg: ChatMessage = { id: Date.now().toString(), role: 'user', text, timestamp: Date.now() };
      setChatHistory(prev => [...prev, newUserMsg]);
      setIsChatProcessing(true);

      try {
          const responseText = await chatWithDocument(settings.apiKey, settings.model, chatHistory, text, paperContext || JSON.stringify(cards));
          const newBotMsg: ChatMessage = { id: (Date.now()+1).toString(), role: 'model', text: responseText, timestamp: Date.now() };
          setChatHistory(prev => [...prev, newBotMsg]);
      } catch (error) {
          const errorMsg: ChatMessage = { id: (Date.now()+1).toString(), role: 'system', text: "Failed to get response.", timestamp: Date.now() };
          setChatHistory(prev => [...prev, errorMsg]);
      } finally {
          setIsChatProcessing(false);
      }
  };

  return (
    <div className={`min-h-screen w-full text-gray-900 dark:text-gray-100 overflow-x-hidden transition-colors duration-500 ${settings.theme}`}>
      <Background theme={settings.theme} />
      
      {/* Navbar */}
      <nav className="fixed top-0 w-full z-50 px-6 py-4 flex justify-between items-center glass-panel border-b border-gray-200 dark:border-white/5">
        <div className="flex items-center gap-4">
          {view === 'results' && (
             <button 
               onClick={handleReset}
               className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
               title="Start Over"
             >
               <ChevronLeft size={20} />
             </button>
          )}
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-brand-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold shadow-lg">
               P
            </div>
            <span className="text-xl font-display font-bold tracking-tight hidden md:block">PaperStack</span>
          </div>
        </div>

        <div className="flex gap-4 items-center">
          {view === 'results' && (
            <div className="hidden md:flex items-center gap-2 px-4 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-full border border-gray-200 dark:border-gray-700">
               <FileText size={14} className="text-gray-500" />
               <span className="text-sm font-medium max-w-[200px] truncate opacity-80">{paperTitle || 'Analysis'}</span>
            </div>
          )}
          <button onClick={toggleTheme} className="p-2 rounded-full bg-gray-100 dark:bg-white/10 hover:bg-gray-200 dark:hover:bg-white/20 transition-colors shadow-sm">
            {settings.theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
          </button>
        </div>
      </nav>

      <main className="pt-32 pb-20 px-4 md:px-8 max-w-7xl mx-auto relative z-10 min-h-[80vh]">
        
        {/* Input View */}
        {view === 'input' && (
          <section className="flex flex-col gap-8 animate-in fade-in zoom-in-95 duration-700 items-center justify-center min-h-[60vh]">
            <div className="text-center space-y-6 mb-4 max-w-3xl">
              <h1 className="text-5xl md:text-7xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-brand-600 to-purple-600 dark:from-white dark:via-brand-400 dark:to-purple-400 leading-tight pb-2">
                Visual Research Summaries
              </h1>
              <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto font-light">
                Upload your research paper (PDF) and instantly transform it into a rich, interactive Bento grid. 
                <br className="hidden md:block" />
                Powered by <span className="font-semibold text-brand-600 dark:text-brand-400">Google Gemini</span>.
              </p>
            </div>

            <div className="w-full max-w-2xl space-y-6 p-8 glass-panel rounded-3xl shadow-2xl border border-gray-200 dark:border-white/10 backdrop-blur-xl bg-white/80 dark:bg-black/40">
              {/* API Keys & Model Selection */}
              <div className="space-y-6">
                {/* Model Selection Dropdown */}
                <div className="space-y-2">
                  <label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1">
                    Select Model
                  </label>
                  <div className="relative">
                    <select
                      value={settings.model}
                      onChange={(e) => setSettings({ ...settings, model: e.target.value as GeminiModel })}
                      className="w-full appearance-none bg-white dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-xl py-4 pl-4 pr-10 focus:ring-2 focus:ring-brand-500 outline-none transition-all text-sm font-medium text-gray-700 dark:text-gray-200"
                    >
                      <option value="gemini-2.5-flash">⚡ Gemini Flash (Fastest)</option>
                      <option value="gemini-3-pro-preview">🧠 Gemini Pro (Best Reasoning)</option>
                    </select>
                    <div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
                      <ChevronDown size={16} />
                    </div>
                  </div>
                </div>

                {/* API Key Input */}
                <div className="space-y-2">
                  <label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1">
                    Gemini API Key
                  </label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                      <Key size={16} className="text-blue-500" />
                    </div>
                    <input
                      type="password"
                      placeholder="Enter your Gemini API Key"
                      value={settings.apiKey}
                      onChange={(e) => setSettings({ ...settings, apiKey: e.target.value })}
                      className="w-full bg-white dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-xl py-4 pl-12 pr-4 outline-none transition-all text-sm font-mono focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <p className="text-xs text-gray-400 px-1">
                    Get your key from Google AI Studio
                  </p>
                </div>
              </div>
                 
              {/* Thinking Toggle Switch */}
              <div 
                className={`
                    flex items-center justify-between px-4 py-2 rounded-xl border transition-all
                    ${settings.useThinking ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800' : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700'}
                `}
              >
                  <div className="flex items-center gap-3 mr-4">
                    <BrainCircuit size={20} className={settings.useThinking ? 'text-indigo-500 animate-pulse' : 'text-gray-400'} />
                    <div className="flex flex-col leading-none">
                          <span className={`text-sm font-bold ${settings.useThinking ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400'}`}>Thinking</span>
                          <span className="text-[10px] opacity-60">32k Budget</span>
                    </div>
                  </div>

                  <button
                    onClick={() => setSettings(s => ({ ...s, useThinking: !s.useThinking }))}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${settings.useThinking ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}
                  >
                    <span
                        className={`${settings.useThinking ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out`}
                    />
                  </button>
              </div>

              {/* PDF Upload - Main Action */}
              <div className="relative">
                <input 
                  type="file" 
                  accept=".pdf"
                  onChange={handleFileChange}
                  className="hidden"
                  id="file-upload"
                />
                <label 
                  htmlFor="file-upload" 
                  className={`
                    flex flex-col items-center justify-center gap-3 cursor-pointer rounded-2xl border-2 border-dashed transition-all py-12
                    ${file 
                      ? 'bg-brand-50 dark:bg-brand-900/10 border-brand-500 text-brand-600 dark:text-brand-400' 
                      : 'bg-gray-50/50 dark:bg-white/5 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-white/10 text-gray-500 hover:border-brand-400 dark:hover:border-brand-400'}
                  `}
                >
                  {file ? (
                    <>
                      <div className="p-3 bg-brand-100 dark:bg-brand-900/30 rounded-full">
                        <FileText size={32} className="text-brand-600 dark:text-brand-400" />
                      </div>
                      <div className="text-center">
                        <span className="font-bold text-lg">{file.name}</span>
                        <p className="text-sm opacity-70 mt-1">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
                      </div>
                      <div className="mt-2 text-xs bg-brand-200 dark:bg-brand-800/40 px-2 py-1 rounded">
                        Click to change file
                      </div>
                    </>
                  ) : (
                    <>
                      <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-full">
                         <Upload size={32} />
                      </div>
                      <div className="text-center">
                        <span className="font-bold text-lg">Upload PDF Paper</span>
                        <p className="text-sm opacity-70 mt-1">Max size 10MB</p>
                      </div>
                    </>
                  )}
                </label>
              </div>
              
              {/* Generate Button */}
              <button 
                onClick={handleProcess}
                disabled={status.state !== 'idle' && status.state !== 'error'}
                className={`
                  w-full py-4 rounded-xl font-bold text-lg shadow-xl hover:shadow-2xl hover:scale-[1.01] active:scale-[0.99] transition-all disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-3
                  ${settings.useThinking 
                    ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white'
                    : 'bg-gradient-to-r from-gray-900 to-gray-800 dark:from-brand-600 dark:to-purple-600 text-white'
                  }
                `}
              >
                {status.state !== 'idle' && status.state !== 'error' && status.state !== 'complete' ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    <span>{status.message}</span>
                  </>
                ) : (
                  <>
                    <span>{settings.useThinking ? 'Deep Analyze' : 'Generate Bento Grid'}</span>
                    <ArrowRight size={20} />
                  </>
                )}
              </button>

              {status.state === 'error' && (
                <div className="flex items-center gap-2 text-red-500 bg-red-50 dark:bg-red-900/20 p-3 rounded-lg text-sm animate-in fade-in slide-in-from-top-2">
                  <AlertCircle size={16} />
                  {status.message}
                </div>
              )}
            </div>
          </section>
        )}

        {/* Results View */}
        {view === 'results' && (
          <div className="animate-in fade-in slide-in-from-bottom-8 duration-700">
            {/* View Mode Toggle - Grid vs Blog */}
            <div className="flex justify-center mb-8">
              <div className="inline-flex items-center p-1.5 rounded-2xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                <button
                  onClick={() => setResultViewMode('grid')}
                  className={`
                    flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300
                    ${resultViewMode === 'grid' 
                      ? 'bg-white dark:bg-gray-900 text-brand-600 dark:text-brand-400 shadow-lg' 
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
                    }
                  `}
                >
                  <Layers size={18} />
                  <span>Bento Grid</span>
                </button>
                <button
                  onClick={handleSwitchToBlogView}
                  disabled={isBlogLoading && resultViewMode !== 'blog'}
                  className={`
                    flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300
                    ${resultViewMode === 'blog' 
                      ? 'bg-white dark:bg-gray-900 text-brand-600 dark:text-brand-400 shadow-lg' 
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
                    }
                    disabled:opacity-50
                  `}
                >
                  {isBlogLoading && resultViewMode !== 'blog' ? (
                    <>
                      <div className="w-4 h-4 border-2 border-gray-400 border-t-brand-500 rounded-full animate-spin" />
                      <span>Analyzing...</span>
                    </>
                  ) : (
                    <>
                      <BookOpen size={18} />
                      <span>Blog View</span>
                    </>
                  )}
                </button>
              </div>
            </div>

            {/* Grid View */}
            {resultViewMode === 'grid' && (
              <>
                {/* Controls */}
                <div className="flex justify-between items-center mb-6">
                    <h2 className="text-2xl font-display font-bold flex items-center gap-3">
                      Summary Grid
                      {settings.useThinking && (
                        <span className="text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 px-2 py-1 rounded-full border border-indigo-200 dark:border-indigo-800 flex items-center gap-1">
                          <BrainCircuit size={12} /> Deep Thought
                        </span>
                      )}
                    </h2>
                    <div className="flex gap-2">
                        <button onClick={handleShare} className="p-2 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 transition-colors text-gray-600 dark:text-gray-300">
                            <Share2 size={18} />
                        </button>
                        <button onClick={handleExport} className="p-2 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 transition-colors text-gray-600 dark:text-gray-300">
                            <Download size={18} />
                        </button>
                        <div className="w-px h-8 bg-gray-200 dark:bg-gray-700 mx-2"></div>
                         <button onClick={() => setSettings({...settings, layoutMode: 'grid'})} className={`p-2 rounded-lg border transition-colors ${settings.layoutMode === 'grid' ? 'bg-brand-50 dark:bg-brand-900/30 border-brand-500 text-brand-600' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500'}`}>
                            <Grid size={18} />
                        </button>
                         <button onClick={() => setSettings({...settings, layoutMode: 'list'})} className={`p-2 rounded-lg border transition-colors ${settings.layoutMode === 'list' ? 'bg-brand-50 dark:bg-brand-900/30 border-brand-500 text-brand-600' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500'}`}>
                            <List size={18} />
                        </button>
                    </div>
                </div>

                {/* Grid */}
                <div 
                  ref={gridRef}
                  className="grid grid-cols-1 md:grid-cols-4 auto-rows-[minmax(180px,auto)] gap-4 md:gap-6 p-1 grid-flow-dense"
                >
                  {cards.map((card) => (
                    <BentoCard 
                      key={card.id} 
                      card={card} 
                      onExpand={handleExpandCard} 
                      onRate={handleRateCard}
                      onResize={handleResizeCard}
                      layoutMode={settings.layoutMode}
                    />
                  ))}
                </div>
              </>
            )}

            {/* Blog View */}
            {resultViewMode === 'blog' && (
              <BlogView 
                sections={blogSections}
                paperTitle={paperStructure?.paperTitle || paperTitle}
                theme={settings.theme}
                onExport={handleExport}
                onShare={handleShare}
                isLoading={isBlogLoading}
                loadingStage={blogLoadingStage}
                currentSection={currentGeneratingSection}
                paperStructure={paperStructure}
                sectionStatus={sectionStatus}
                onRetrySection={handleRetrySection}
                retryingSectionIndex={retryingSectionIndex}
                contentRef={blogRef}
                readingPreferences={settings.readingPreferences}
                onReadingPreferencesChange={(prefs) => setSettings(prev => ({ ...prev, readingPreferences: prefs }))}
              />
            )}

            {/* Floating Chat Trigger */}
            <button 
               onClick={() => setIsChatOpen(true)}
               className="fixed bottom-8 right-8 p-4 bg-brand-600 hover:bg-brand-500 text-white rounded-full shadow-2xl hover:scale-110 transition-all z-40 group"
            >
               <MessageSquare size={24} />
               <span className="absolute right-full mr-4 top-1/2 -translate-y-1/2 px-3 py-1 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                 Chat with Paper
               </span>
            </button>
          </div>
        )}
      </main>

      <ChatBot 
        isOpen={isChatOpen} 
        onClose={() => setIsChatOpen(false)} 
        messages={chatHistory}
        onSendMessage={handleSendMessage}
        isProcessing={isChatProcessing}
      />
    </div>
  );
};

export default App;