import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { motion, AnimatePresence } from 'framer-motion';
import { FaHome, FaChartLine, FaFolderOpen, FaCog, FaFeatherAlt, FaFileUpload } from 'react-icons/fa';
import { BsThreeDots } from 'react-icons/bs';
import Dashboard from './components/Dashboard';
import Sidebar from './components/Sidebar';
import RightBar from './components/RightBar';
import UploadModal from './components/UploadModal';

const App = () => {
  const [reports, setReports] = useState([]);
  const [activeReport, setActiveReport] = useState(null);
  const [isUploadOpen, setIsUploadOpen] = useState(false);

  useEffect(() => {
    fetchReports();
  }, []);

  const fetchReports = async () => {
    const res = await axios.get('http://localhost:5000/api/reports');
    setReports(res.data);
  };

  return (
    <div className="flex min-h-screen bg-black text-white font-sans overflow-hidden">
      {/* Left Sidebar (Nav) */}
      <Sidebar onOpenUpload={() => setIsUploadOpen(true)} />

      {/* Main Content Area */}
      <main className="flex-1 border-x border-gray-800 relative overflow-y-auto">
        <header className="sticky top-0 z-10 bg-black/80 backdrop-blur-md p-4 border-b border-gray-800">
          <h2 className="text-xl font-bold">Home</h2>
        </header>
        
        <div className="p-4">
          {activeReport ? (
             <Dashboard report={activeReport} onClose={() => setActiveReport(null)} />
          ) : (
            <div className="text-center mt-20 text-gray-500">
              <p>Select a report from the right sidebar or upload a new one.</p>
            </div>
          )}
        </div>
      </main>

      {/* Right Sidebar (Stored Files) */}
      <RightBar 
        reports={reports} 
        onSelect={(r) => setActiveReport(r)} 
      />

      {/* Upload Modal */}
      <AnimatePresence>
        {isUploadOpen && (
          <UploadModal 
            close={() => setIsUploadOpen(false)} 
            refresh={fetchReports} 
          />
        )}
      </AnimatePresence>
    </div>
  );
};

export default App;