<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="#{settings.title}">Settings - Reitti</title>
    <link rel="icon" th:href="@{/img/logo.svg}">
    <link rel="apple-touch-icon" th:href="@{/img/logo.svg}">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/logo.svg}">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/lineicons.css">
    <script src="/js/htmx.min.js"></script>
    <script src="/js/util.js"></script>
</head>
<body class="settings-page">
<div class="navigation-container" th:replace="~{fragments/main-navigation :: main-navigation('settings')}"></div>

<div class="settings-container">
    <div th:replace="~{fragments/settings-navigation :: settings-nav(${activeSection}, ${dataManagementEnabled}, ${isAdmin})}"></div>
    <div class="settings-content-area">
        <!-- File Upload Section -->
        <div id="file-upload" class="settings-section active">
            <div th:fragment="file-upload-content">
                <h2 th:text="#{upload.title}">Import Location Data</h2>

                <div th:if="${uploadSuccessMessage}" class="alert alert-success" style="display: block;">
                    <span th:text="${uploadSuccessMessage}">File uploaded successfully</span>
                </div>
                <div th:if="${uploadErrorMessage}" class="alert alert-danger" style="display: block;">
                    <span th:text="${uploadErrorMessage}">Error message</span>
                </div>

                <div class="upload-options">
                    <div class="settings-card">
                        <h3 th:text="#{upload.gpx.title}">GPX Files</h3>
                        <p class="description" th:text="#{upload.gpx.description}">
                            Upload GPX files from your GPS devices or tracking apps. GPX files contain waypoints,
                            tracks, and routes with timestamps that can be processed into your location history.
                        </p>
                        <form id="gpx-upload-form"
                              hx-post="/settings/import/gpx"
                              hx-target="#file-upload"
                              hx-encoding="multipart/form-data">
                            <div class="form-group">
                                <input type="file" name="files" accept=".gpx" multiple required>
                            </div>
                            <button type="submit" class="btn upload-btn" th:text="#{upload.button.gpx}">Upload GPX File</button>
                            <div class="spinner" style="display: none;">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Processing...</span>
                                </div>
                                <span>Processing ...</span>
                            </div>
                        </form>
                        <progress id='progress-gpx' value='0' max='100' style="display: none"></progress>
                    </div>
                    <div class="settings-card">
                        <h3 th:text="#{upload.geojson.title}">GeoJSON Files</h3>
                        <p class="description" th:text="#{upload.geojson.description}">
                            Upload GeoJSON files containing Point features with location data. GeoJSON files
                            should contain Point geometries with coordinates and optional timestamp properties.
                            Supports both single Feature and FeatureCollection formats.
                        </p>
                        <form id="geojson-upload-form"
                              hx-post="/settings/import/geojson"
                              hx-target="#file-upload"
                              hx-swap="innerHTML"
                              hx-encoding="multipart/form-data">
                            <div class="form-group">
                                <input type="file" name="files" accept=".geojson,.json" multiple required>
                            </div>
                            <button type="submit" class="btn upload-btn" th:text="#{upload.button.geojson}">Upload GeoJSON File</button>
                            <div class="spinner" style="display: none;">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Processing...</span>
                                </div>
                                <span>Processing ...</span>
                            </div>
                        </form>
                        <progress id='progress-geojson' value='0' max='100' style="display: none"></progress>
                    </div>
                    <div class="settings-card">
                        <h3 th:text="#{upload.google.android.format.title}">📱 Android Timeline (timeline.json)</h3>
                        <p><strong>Android:</strong> <span th:text="#{upload.google.new.format.instructions}">From your Android phone: Settings → Location → Location Services → Timeline → Export Timeline</span></p>
                        <p class="description" th:text="#{upload.google.android.format.description}">This exports a timeline.json file with your recent location data from Android devices.</p>

                        <form id="timeline-android-upload-form"
                              hx-post="/settings/import/google-timeline-android"
                              hx-target="#file-upload"
                              hx-swap="innerHTML"
                              hx-encoding="multipart/form-data">
                            <div class="form-group">
                                <input type="file" name="file" accept=".json" required>
                            </div>
                            <button type="submit" class="btn upload-btn" th:text="#{upload.button.google.timeline.android}">Upload Android Timeline Data</button>
                            <div class="spinner" style="display: none;">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Processing...</span>
                                </div>
                                <span>Processing ...</span>
                            </div>
                        </form>
                        <progress id='progress-timeline-android' value='0' max='100'  style="display: none"></progress>
                    </div>
                    <div class="settings-card">
                        <h3 th:text="#{upload.google.ios.format.title}">📱 iOS Timeline (timeline.json)</h3>
                        <p><strong>iOS:</strong> <span th:text="#{upload.google.new.format.ios.instructions}">From iOS Google Maps: Open Google Maps → Click on your Profile → Settings → Personal content → Export Timeline Data</span></p>
                        <p class="description" th:text="#{upload.google.ios.format.description}">This exports a timeline.json file with your recent location data from iOS devices.</p>

                        <form id="timeline-ios-upload-form"
                              hx-post="/settings/import/google-timeline-ios"
                              hx-target="#file-upload"
                              hx-swap="innerHTML"
                              hx-encoding="multipart/form-data">
                            <div class="form-group">
                                <input type="file" name="file" accept=".json" required>
                            </div>
                            <button type="submit" class="btn upload-btn" th:text="#{upload.button.google.timeline.ios}">Upload iOS Timeline Data</button>
                            <div class="spinner" style="display: none;">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Processing...</span>
                                </div>
                                <span>Processing ...</span>
                            </div>
                        </form>
                        <progress id='progress-timeline-ios' value='0' max='100'  style="display: none"></progress>
                    </div>
                    <div class="settings-card">
                        <h3 th:text="#{upload.google.old.format.title}">🌐 Old Format (Records.json)</h3>
                        <p th:text="#{upload.google.old.format.instructions}">From Google Takeout: Export your data from takeout.google.com and upload the Records.json file from the Location History folder.</p>
                        <p class="description" th:text="#{upload.google.old.format.description}">This contains your complete historical location data.</p>
                        <form id="records-upload-form"
                              hx-post="/settings/import/google-records"
                              hx-target="#file-upload"
                              hx-swap="innerHTML"
                              hx-encoding="multipart/form-data">
                            <div class="form-group">
                                <input type="file" name="file" accept=".json" required>
                            </div>
                            <button type="submit" class="btn upload-btn" th:text="#{upload.button.google.records}">Upload Records Data</button>
                            <div class="spinner" style="display: none;">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Processing...</span>
                                </div>
                                <span>Processing ...</span>
                            </div>
                        </form>
                        <progress id='progress-records' value='0' max='100'  style="display: none"></progress>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    document.addEventListener('DOMContentLoaded', function() {
        // Function to disable all upload buttons and show spinners
        function disableAllUploads() {
            const uploadButtons = document.querySelectorAll('.upload-btn');
            const spinners = document.querySelectorAll('.spinner');

            uploadButtons.forEach(button => {
                button.disabled = true;
                button.style.display = 'none';
            });

            spinners.forEach(spinner => {
                spinner.style.display = 'flex';
            });
        }
        // Function to enable all upload buttons and hide spinners
        function enableAllUploads() {
            const uploadButtons = document.querySelectorAll('.upload-btn');
            const spinners = document.querySelectorAll('.spinner');

            uploadButtons.forEach(button => {
                button.disabled = false;
                button.style.display = 'inline-block';
            });

            spinners.forEach(spinner => {
                spinner.style.display = 'none';
            });
        }

        // Listen for HTMX request start events on actual file upload forms only
        document.body.addEventListener('htmx:beforeRequest', function(evt) {
            const form = evt.target;
            if (form && form.id && typeof form.id === 'string' && form.id.includes('upload-form') && !form.id.includes('integration')) {
                disableAllUploads();
            }
        });

        // Listen for HTMX request completion events on actual file upload forms only
        document.body.addEventListener('htmx:afterRequest', function(evt) {
            const form = evt.target;
            if (form && form.id && typeof form.id === 'string' && form.id.includes('upload-form') && !form.id.includes('integration')) {
                enableAllUploads();
            }
        });

        // Handle progress events
        document.body.addEventListener('htmx:xhr:progress', function(evt) {
            const form = evt.target;
            if (form.id && typeof form.id === 'string' ) {
                const progressId = form.id.replace('-upload-form', '').replace('-', '-');
                const progressElement = document.getElementById('progress-' + progressId);
                if (progressElement) {
                    progressElement.setAttribute('value', evt.detail.loaded/evt.detail.total * 100);
                    progressElement.style.display = 'block';
                }
            }
        });
    });
    window.userSettings = /*[[${userSettings}]]*/ {}
</script>
</body>