import { AnimatePresence, motion } from 'framer-motion';
import Navbar from './components/Navbar';
import LandingPage from './components/LandingPage';
import AnalysisProgress from './components/AnalysisProgress';
import ForensicDashboard from './components/ForensicDashboard';
import { useAnalysis } from './hooks/useAnalysis';
import { useTheme } from './hooks/useTheme';
import styles from './App.module.css';

export default function App() {
  const { phase, currentStage, progress, result, file, previewUrl, error, analyze, reset } = useAnalysis();
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={styles.app}>
      <Navbar theme={theme} onToggleTheme={toggleTheme} />

      <main className={styles.main}>
        <AnimatePresence mode="wait">
          {phase === 'idle' && (
            <motion.div
              key="landing"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.25 }}
            >
              <LandingPage onFileSelect={analyze} error={error} />
            </motion.div>
          )}

          {(phase === 'uploading' || phase === 'analyzing') && (
            <motion.div
              key="progress"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.25 }}
            >
              <AnalysisProgress
                phase={phase}
                currentStage={currentStage}
                progress={progress}
                file={file}
              />
            </motion.div>
          )}

          {phase === 'complete' && result && (
            <motion.div
              key="dashboard"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.3 }}
              className={styles.dashboardWrap}
            >
              <ForensicDashboard
                result={result}
                previewUrl={previewUrl}
                onReset={reset}
              />
            </motion.div>
          )}
        </AnimatePresence>
      </main>

      <footer className={styles.footer}>
        <p>
          <span className={styles.footerBrand}>UAIDE</span>
          {' '}· Unified AI Origin Detection Engine · Academic Defense Interface ·{' '}
          <span>For evaluators, researchers, and investigators</span>
        </p>
        <p className={styles.footerDisclaimer}>
          Detection outcomes are probabilistic and intended to support, not replace, expert human review.
        </p>
      </footer>
    </div>
  );
}