import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { Layout, Menu, Typography } from 'antd';
import { DashboardOutlined, SettingOutlined, BarChartOutlined } from '@ant-design/icons';
import Dashboard from './components/Dashboard';
import SystemMetrics from './components/SystemMetrics';
import Settings from './components/Settings';
import OfflineMode from './components/OfflineMode';
import ErrorBoundary from './components/common/ErrorBoundary';
import { useServiceStatus } from './hooks/useServiceStatus';
import './App.css';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

function App() {
  const serviceStatus = useServiceStatus();

  const handleRetry = () => {
    window.location.reload();
  };

  return (
    <ErrorBoundary>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider width={250} theme="dark">
          <div style={{ padding: '16px', textAlign: 'center' }}>
            <Title level={3} style={{ color: 'white', margin: 0 }}>
              LabFusion
            </Title>
          </div>
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['dashboard']}
            items={[
              {
                key: 'dashboard',
                icon: <DashboardOutlined />,
                label: 'Dashboard',
              },
              {
                key: 'metrics',
                icon: <BarChartOutlined />,
                label: 'System Metrics',
              },
              {
                key: 'settings',
                icon: <SettingOutlined />,
                label: 'Settings',
              },
            ]}
          />
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: '0 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
            <Title level={4} style={{ margin: 0, lineHeight: '64px' }}>
              Homelab Dashboard
            </Title>
          </Header>
          <Content style={{ margin: '24px', background: '#fff', borderRadius: '8px' }}>
            {serviceStatus.overall === 'offline' && (
              <OfflineMode onRetry={handleRetry} />
            )}
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/dashboard" element={<Dashboard />} />
              <Route path="/metrics" element={<SystemMetrics />} />
              <Route path="/settings" element={<Settings />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </ErrorBoundary>
  );
}

export default App;