App.tsx

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Dropzone } from './components/Dropzone';
import { AnalysisOverlay } from './components/AnalysisOverlay';
import { Report } from './components/Report';
import { Disclaimer } from './components/Disclaimer';
import { ChatInterface } from './components/ChatInterface';
import { analyzeMRI } from './services/gemini';
import { MRIAnalysis, AppState, Language, TextItem } from './types';
import { Brain, RefreshCw, ChevronLeft, FileText, MessageCircle, Globe, Sun, Moon, Sparkles } from 'lucide-react';

const App: React.FC = () => {
  const [appState, setAppState] = useState<AppState>(AppState.IDLE);
  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
  const [base64Images, setBase64Images] = useState<string[]>([]);
  const [textLayers, setTextLayers] = useState<TextItem[][]>([]);
  
  const [analysis, setAnalysis] = useState<MRIAnalysis | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'report' | 'chat'>('report');
  const [language, setLanguage] = useState<Language>('English');
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [analysisProgress, setAnalysisProgress] = useState(0);

  // Active Finding for Highlighting
  const [activeFindingId, setActiveFindingId] = useState<string | null>(null);

  // Resizable Columns State
  const [leftPanelWidth, setLeftPanelWidth] = useState(50); // Percentage
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  // Toggle dark mode class on html element
  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  // Handle fake progress bar for analysis
  useEffect(() => {
    let interval: ReturnType<typeof setInterval>;
    if (appState === AppState.ANALYZING) {
      setAnalysisProgress(0);
      interval = setInterval(() => {
        setAnalysisProgress(prev => {
          if (prev >= 90) return prev;
          const remaining = 90 - prev;
          return prev + Math.max(1, remaining * 0.1); 
        });
      }, 500);
    } else if (appState === AppState.SUCCESS) {
      setAnalysisProgress(100);
    }
    return () => clearInterval(interval);
  }, [appState]);

  // Resizing Logic
  const startResizing = useCallback(() => {
    setIsDragging(true);
  }, []);

  const stopResizing = useCallback(() => {
    setIsDragging(false);
  }, []);

  const resize = useCallback((e: MouseEvent) => {
    if (isDragging && containerRef.current) {
      const containerRect = containerRef.current.getBoundingClientRect();
      const newWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
      if (newWidth > 20 && newWidth < 80) {
        setLeftPanelWidth(newWidth);
      }
    }
  }, [isDragging]);

  useEffect(() => {
    if (isDragging) {
      window.addEventListener('mousemove', resize);
      window.addEventListener('mouseup', stopResizing);
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none'; 
    } else {
      window.removeEventListener('mousemove', resize);
      window.removeEventListener('mouseup', stopResizing);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    }
    return () => {
      window.removeEventListener('mousemove', resize);
      window.removeEventListener('mouseup', stopResizing);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    };
  }, [isDragging, resize, stopResizing]);

  const handleImageSelected = async (images: { base64: string, preview: string, textLayer?: TextItem[] }[]) => {
    const previews = images.map(img => img.preview);
    const base64s = images.map(img => img.base64);
    const layers = images.map(img => img.textLayer || []); // Default to empty array if no text
    
    setImagePreviews(previews);
    setBase64Images(base64s);
    setTextLayers(layers);
    
    setAppState(AppState.ANALYZING);
    setErrorMsg(null);
    setAnalysis(null);
    setActiveTab('report'); 

    try {
      const result = await analyzeMRI(base64s, language);
      
      if (result.scanType === 'Non-MRI Content') {
          setAppState(AppState.ERROR);
          setErrorMsg(result.summary);
      } else {
          setAnalysis(result);
          setAppState(AppState.SUCCESS);
      }
    } catch (error) {
      console.error(error);
      setAppState(AppState.ERROR);
      setErrorMsg("Failed to analyze image(s). Please try again.");
    }
  };

  const handleReset = () => {
    setAppState(AppState.IDLE);
    setImagePreviews([]);
    setBase64Images([]);
    setTextLayers([]);
    setAnalysis(null);
  };

  const LANGUAGES: Language[] = ['English', 'Spanish', 'French', 'German', 'Chinese', 'Hindi', 'Portuguese', 'Arabic'];

  return (
    <div className="min-h-screen bg-[#f8fafc] dark:bg-[#020617] text-slate-900 dark:text-slate-100 pb-12 font-sans transition-colors duration-500 selection:bg-blue-500 selection:text-white">
      {/* Sleek Glass Header */}
      <header className="fixed top-0 left-0 right-0 h-16 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl z-50 transition-all duration-300 border-b border-slate-200/50 dark:border-white/5">
        <div className="max-w-[1600px] mx-auto px-4 sm:px-6 h-full flex items-center justify-between">
          <div className="flex items-center gap-2.5 group cursor-default">
            <div className="bg-gradient-to-tr from-blue-600 to-indigo-600 p-2 rounded-lg shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform duration-300">
              <Brain className="w-5 h-5 text-white" />
            </div>
            <div className="flex flex-col">
                <h1 className="text-lg font-bold tracking-tight text-slate-900 dark:text-white leading-none">
                  ScanSense
                </h1>
                <span className="text-[10px] font-bold text-blue-600 dark:text-blue-400 tracking-wider uppercase mt-0.5">Medical AI</span>
            </div>
          </div>

          <div className="flex items-center gap-3">
             {/* Dark Mode Toggle */}
             <button 
                onClick={() => setIsDarkMode(!isDarkMode)}
                className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-white/10 text-slate-500 dark:text-slate-400 transition-colors"
                title="Toggle Theme"
             >
                {isDarkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
             </button>

             {/* Language Selector */}
             <div className="hidden sm:flex items-center gap-2 bg-slate-100/50 dark:bg-white/5 rounded-full px-3 py-1.5 border border-slate-200 dark:border-white/10 hover:border-blue-300 dark:hover:border-blue-700 transition-colors">
                <Globe className="w-3.5 h-3.5 text-slate-400" />
                <select 
                    value={language}
                    onChange={(e) => setLanguage(e.target.value as Language)}
                    disabled={appState === AppState.ANALYZING}
                    className="bg-transparent text-xs font-semibold text-slate-700 dark:text-slate-300 focus:outline-none cursor-pointer disabled:opacity-50 min-w-[70px]"
                >
                    {LANGUAGES.map(lang => (
                        <option key={lang} value={lang} className="dark:bg-slate-800">{lang}</option>
                    ))}
                </select>
             </div>
          </div>
        </div>
      </header>

      {/* Main Content Spacer */}
      <div className="h-20"></div>

      <main className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* State: IDLE */}
        {appState === AppState.IDLE && (
          <div className="max-w-4xl mx-auto mt-12 animate-fade-in">
            <div className="text-center mb-16 relative">
              {/* Background Glow */}
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[300px] bg-blue-500/20 dark:bg-blue-500/10 blur-[100px] rounded-full pointer-events-none"></div>
              
              <div className="relative z-10">
                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-xs font-bold uppercase tracking-wider mb-6 border border-blue-100 dark:border-blue-800">
                      <Sparkles className="w-3 h-3" /> New AI Model 2.0
                  </div>
                  <h2 className="text-4xl sm:text-6xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-6">
                    Clarify your medical scans <br/>
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-indigo-600 to-teal-400">in seconds.</span>
                  </h2>
                  <p className="text-lg text-slate-600 dark:text-slate-400 mb-8 max-w-2xl mx-auto leading-relaxed">
                    Upload MRI images or PDFs. Get instant, plain-English explanations and visual anatomical highlights powered by advanced AI.
                  </p>
              </div>

              {/* Mobile Language Selector */}
              <div className="sm:hidden flex justify-center mb-8 relative z-10">
                 <div className="flex items-center gap-2 bg-white dark:bg-slate-800 rounded-full px-5 py-2.5 shadow-sm border border-slate-200 dark:border-slate-700">
                    <Globe className="w-4 h-4 text-blue-500" />
                    <select 
                        value={language}
                        onChange={(e) => setLanguage(e.target.value as Language)}
                        className="bg-transparent text-sm font-bold text-slate-700 dark:text-slate-200 focus:outline-none"
                    >
                        {LANGUAGES.map(lang => (
                            <option key={lang} value={lang} className="dark:bg-slate-800">{lang}</option>
                        ))}
                    </select>
                 </div>
              </div>
            </div>
            
            <div className="relative z-10">
                <Dropzone onImageSelected={handleImageSelected} />
            </div>
            
            <div className="mt-16">
                <Disclaimer />
            </div>
          </div>
        )}

        {/* State: ANALYZING */}
        {appState === AppState.ANALYZING && (
          <div className="max-w-xl mx-auto mt-24 text-center space-y-10 animate-fade-in">
            <div className="relative w-40 h-40 mx-auto">
               <div className="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
               {imagePreviews.length > 0 && (
                  <div className="relative w-full h-full rounded-full overflow-hidden border-4 border-white/50 dark:border-slate-800/50 shadow-2xl">
                      <img src={imagePreviews[0]} alt="Scanning" className="w-full h-full object-cover opacity-80 blur-[1px]" />
                      <div className="absolute inset-0 bg-gradient-to-t from-blue-900/50 to-transparent"></div>
                  </div>
               )}
               <div className="absolute inset-0 flex items-center justify-center">
                  <div className="animate-spin rounded-full h-24 w-24 border-[3px] border-t-blue-500 border-r-transparent border-b-blue-500 border-l-transparent shadow-lg shadow-blue-500/20"></div>
               </div>
            </div>
            <div className="space-y-6">
                <div>
                    <h3 className="text-3xl font-bold text-slate-900 dark:text-white tracking-tight mb-2">Analyzing Anatomy...</h3>
                    <p className="text-slate-500 dark:text-slate-400">Translating complex findings into <span className="text-blue-600 dark:text-blue-400 font-bold">{language}</span></p>
                </div>
                
                {/* Sleek Progress Bar */}
                <div className="w-64 h-1.5 mx-auto bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                   <div 
                      className="h-full bg-blue-600 rounded-full transition-all duration-300 ease-out shadow-[0_0_15px_rgba(37,99,235,0.6)]" 
                      style={{ width: `${analysisProgress}%` }}
                   ></div>
                </div>
            </div>
          </div>
        )}

        {/* State: ERROR */}
        {appState === AppState.ERROR && (
          <div className="max-w-md mx-auto mt-24 text-center animate-fade-in px-4">
            <div className="bg-red-50 dark:bg-red-950/20 p-8 rounded-3xl border border-red-100 dark:border-red-900 mb-8">
                <div className="w-16 h-16 bg-white dark:bg-red-900/30 rounded-2xl shadow-sm flex items-center justify-center mx-auto mb-6">
                    <RefreshCw className="w-8 h-8 text-red-600 dark:text-red-400" />
                </div>
                <h3 className="text-red-900 dark:text-red-200 font-bold text-xl mb-3 tracking-tight">Analysis Interrupted</h3>
                <p className="text-red-700 dark:text-red-300/80 leading-relaxed text-sm">{errorMsg}</p>
            </div>
            <button 
                onClick={handleReset}
                className="inline-flex items-center gap-2 px-8 py-3.5 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded-full hover:scale-105 hover:shadow-xl transition-all font-bold text-sm tracking-wide"
            >
                <RefreshCw className="w-4 h-4" />
                Try Again
            </button>
          </div>
        )}

        {/* State: SUCCESS (Main Interface) */}
        {appState === AppState.SUCCESS && analysis && imagePreviews.length > 0 && (
          <div className="animate-slide-up pb-10 h-[calc(100vh-140px)] flex flex-col">
            
            {/* Top Bar Actions */}
            <div className="flex justify-between items-center mb-4 shrink-0 px-2">
                 <button 
                    onClick={handleReset}
                    className="flex items-center gap-2 text-xs font-bold text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition-colors group uppercase tracking-wider"
                >
                    <div className="p-1.5 rounded-full bg-slate-200 dark:bg-slate-800 group-hover:bg-slate-300 dark:group-hover:bg-slate-700 transition-colors">
                        <ChevronLeft className="w-3.5 h-3.5" />
                    </div>
                    New Scan
                </button>
            </div>

            {/* Resizable Split View */}
            <div ref={containerRef} className="flex-1 flex flex-col lg:flex-row gap-0 overflow-hidden relative group rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-2xl">
              
              {/* LEFT PANEL: IMAGES */}
              <div 
                  className="image-column relative flex flex-col bg-slate-50/50 dark:bg-slate-950/50"
                  style={{ 
                      flexBasis: `${leftPanelWidth}%`,
                      flexGrow: 0,
                      flexShrink: 0,
                  }}
              >
                 <div className="flex-1 overflow-y-auto custom-scrollbar p-4 lg:p-6">
                    <AnalysisOverlay 
                        imageUrls={imagePreviews}
                        textLayers={textLayers}
                        activeFindingId={activeFindingId}
                        findings={analysis.findings}
                    />
                 </div>
              </div>

              {/* DRAG HANDLE */}
              <div 
                className="hidden lg:flex w-1 bg-slate-100 dark:bg-slate-800 hover:bg-blue-500 cursor-col-resize items-center justify-center z-20 transition-colors group/handle flex-shrink-0 border-x border-slate-200 dark:border-slate-700"
                onMouseDown={startResizing}
              >
              </div>

              {/* RIGHT PANEL: DATA */}
              <div className="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900 relative">
                 
                 {/* Segmented Tabs */}
                 <div className="px-6 pt-6 pb-2 shrink-0">
                    <div className="flex p-1 bg-slate-100 dark:bg-slate-800/80 rounded-xl border border-slate-200 dark:border-slate-700/50">
                        <button
                            onClick={() => setActiveTab('report')}
                            className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-xs font-bold uppercase tracking-wide transition-all duration-200 ${
                                activeTab === 'report' 
                                ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/10' 
                                : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                            }`}
                        >
                            <FileText className="w-4 h-4" />
                            Report
                        </button>
                        <button
                            onClick={() => setActiveTab('chat')}
                            className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-xs font-bold uppercase tracking-wide transition-all duration-200 ${
                                activeTab === 'chat' 
                                ? 'bg-white dark:bg-slate-700 text-blue-600 dark:text-blue-400 shadow-sm ring-1 ring-black/5 dark:ring-white/10' 
                                : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
                            }`}
                        >
                            <MessageCircle className="w-4 h-4" />
                            Assistant
                        </button>
                    </div>
                 </div>

                 {/* Tab Content */}
                 <div className="flex-1 overflow-hidden relative">
                    {activeTab === 'report' ? (
                         <div className="h-full overflow-y-auto custom-scrollbar p-1">
                            <Report 
                                analysis={analysis} 
                                imageCount={imagePreviews.length}
                                language={language}
                                onFindingHover={setActiveFindingId}
                            />
                         </div>
                    ) : (
                        <div className="h-full">
                            <ChatInterface images={base64Images} />
                        </div>
                    )}
                 </div>
              </div>
            </div>
            
            {/* Mobile CSS for split view */}
            <style>{`
                @media (max-width: 1024px) {
                    .image-column {
                        flex-basis: auto !important;
                        width: 100% !important;
                        height: 350px;
                        flex-grow: 0;
                    }
                }
            `}</style>
          </div>
        )}
      </main>
    </div>
  );
};

export default App;