import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';

// Import components
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Dashboard from './pages/Dashboard';
import Agents from './pages/Agents';
import Journal from './pages/Journal';
import Portfolio from './pages/Portfolio';
import TokenEconomy from './pages/TokenEconomy';
import VirtualWorld from './pages/VirtualWorld';
import Settings from './pages/Settings';
import Chat from './pages/Chat';

// Import API service
import { getSystemInfo } from './services/api';

// Create theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#4B8BBE',
    },
    secondary: {
      main: '#FFD43B',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: '2.5rem',
      fontWeight: 500,
    },
    h2: {
      fontSize: '2rem',
      fontWeight: 500,
    },
    h3: {
      fontSize: '1.8rem',
      fontWeight: 500,
    },
    h4: {
      fontSize: '1.5rem',
      fontWeight: 500,
    },
    h5: {
      fontSize: '1.2rem',
      fontWeight: 500,
    },
    h6: {
      fontSize: '1rem',
      fontWeight: 500,
    },
  },
  components: {
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 4,
          textTransform: 'none',
        },
      },
    },
  },
});

function App() {
  const [systemInfo, setSystemInfo] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [sidebarOpen, setSidebarOpen] = useState(true);

  useEffect(() => {
    const fetchSystemInfo = async () => {
      try {
        const data = await getSystemInfo();
        setSystemInfo(data);
        setLoading(false);
      } catch (err) {
        console.error('Error fetching system info:', err);
        setError('Failed to load system information. Please try again later.');
        setLoading(false);
      }
    };

    fetchSystemInfo();
  }, []);

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  if (loading) {
    return (
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
          }}
        >
          <h2>Loading AnnabanOS Enhanced...</h2>
        </Box>
      </ThemeProvider>
    );
  }

  if (error) {
    return (
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
            flexDirection: 'column',
            p: 3,
          }}
        >
          <h2>Error</h2>
          <p>{error}</p>
          <button onClick={() => window.location.reload()}>Retry</button>
        </Box>
      </ThemeProvider>
    );
  }

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Box sx={{ display: 'flex' }}>
          <Header toggleSidebar={toggleSidebar} systemInfo={systemInfo} />
          <Sidebar open={sidebarOpen} />
          <Box
            component="main"
            sx={{
              flexGrow: 1,
              p: 3,
              mt: 8,
              ml: sidebarOpen ? '240px' : 0,
              transition: 'margin-left 0.2s',
            }}
          >
            <Routes>
              <Route path="/" element={<Dashboard systemInfo={systemInfo} />} />
              <Route path="/agents" element={<Agents />} />
              <Route path="/journal" element={<Journal />} />
              <Route path="/portfolio" element={<Portfolio />} />
              <Route path="/token-economy" element={<TokenEconomy />} />
              <Route path="/virtual-world" element={<VirtualWorld />} />
              <Route path="/settings" element={<Settings systemInfo={systemInfo} />} />
              <Route path="/chat" element={<Chat />} />
            </Routes>
          </Box>
        </Box>
      </Router>
    </ThemeProvider>
  );
}

export default App;