import React, { useState, useEffect, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Container, Navbar, Nav } from 'react-bootstrap';
import { features } from './features';
import axios from 'axios';

const API_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : '';

const App = () => {
    const [availableFeatures, setAvailableFeatures] = useState([]);

    useEffect(() => {
        const fetchFeatures = async () => {
            try {
                const response = await axios.get(`${API_URL}/api/features`);
                setAvailableFeatures(response.data);
            } catch (error) => {
                console.error("Error fetching features:", error);
            }
        };
        fetchFeatures();
    }, []);

    return (
        <Router>
            <div>
                <Navbar bg="dark" variant="dark">
                    <Container>
                        <Navbar.Brand as={Link} to="/">CNC Toolbox</Navbar.Brand>
                        <Nav className="me-auto">
                            {features
                                .filter(feature => availableFeatures.includes(feature.id))
                                .map(feature => (
                                <Nav.Link as={Link} to={`/features/${feature.id}`} key={feature.id}>
                                    {feature.name}
                                </Nav.Link>
                            ))}
                        </Nav>
                    </Container>
                </Navbar>
                <Container className="mt-5">
                    <Suspense fallback={<div>Loading...</div>}>
                        <Routes>
                            <Route path="/" element={<h1>Welcome to the CNC Toolbox</h1>} />
                            {features
                                .filter(feature => availableFeatures.includes(feature.id))
                                .map(feature => {
                                const FeatureComponent = React.lazy(feature.component);
                                return (
                                    <Route
                                        key={feature.id}
                                        path={`/features/${feature.id}`}
                                        element={<FeatureComponent />}
                                    />
                                );
                            })}
                        </Routes>
                    </Suspense>
                </Container>
            </div>
        </Router>
    );
};

export default App;