<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- React -->
    <script src="https://unpkg.com/react@16.8.4/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
    <script src="https://unpkg.com/react-redux@5.0.7/dist/react-redux.min.js"></script>
    <script src="https://unpkg.com/styled-components@4.1.3/dist/styled-components.min.js"></script>
    <!-- KeplerGL -->
    <script src="https://unpkg.com/kepler.gl@3.0.0/umd/keplergl.min.js"></script>
    <link href="https://unpkg.com/kepler.gl@3.0.0/umd/keplergl.min.css" rel="stylesheet" />
    <!-- Mapbox GL -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
        #app { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        // Map state from Python
        const state = {{state}};

        // Set Mapbox token if available
        if (state.mapbox_token) {
            mapboxgl.accessToken = state.mapbox_token;
        }

        // Create Redux store
        const reducers = KeplerGl.combineReducers({
            keplerGl: KeplerGl.keplerGlReducer
        });

        const store = Redux.createStore(
            reducers,
            {},
            Redux.applyMiddleware(KeplerGl.taskMiddleware)
        );

        // KeplerGL configuration
        const mapConfig = {
            mapState: {
                latitude: state.center[1],
                longitude: state.center[0],
                zoom: state.zoom
            }
        };

        // Create the app
        const App = () => {
            return React.createElement(
                ReactRedux.Provider,
                { store },
                React.createElement(KeplerGl.KeplerGl, {
                    id: 'map',
                    mapboxApiAccessToken: state.mapbox_token,
                    width: window.innerWidth,
                    height: window.innerHeight,
                    appName: 'KeplerGL Map',
                    version: 'v1.0'
                })
            );
        };

        // Render
        ReactDOM.render(
            React.createElement(App),
            document.getElementById('app')
        );

        // Add datasets
        setTimeout(() => {
            Object.entries(state.datasets || {}).forEach(([dataId, dataset]) => {
                if (dataset.data) {
                    let dataToAdd;
                    if (dataset.data.type === 'geojson') {
                        dataToAdd = KeplerGl.processGeojson(dataset.data.data);
                    } else if (dataset.data.fields && dataset.data.rows) {
                        dataToAdd = KeplerGl.processRowObject({
                            fields: dataset.data.fields,
                            rows: dataset.data.rows
                        });
                    }

                    if (dataToAdd) {
                        store.dispatch(KeplerGl.addDataToMap({
                            datasets: [{
                                info: dataset.info || { id: dataId, label: dataId },
                                data: dataToAdd
                            }],
                            options: {
                                centerMap: true
                            },
                            config: state.config || {}
                        }));
                    }
                }
            });
        }, 1000);

        // Handle window resize
        window.addEventListener('resize', () => {
            store.dispatch(KeplerGl.updateMap(window.innerWidth, window.innerHeight));
        });
    </script>
</body>
</html>
