{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
    #map {
        height: 600px;
        width: 100%;
        border-radius: 8px;
    }

    .candidate-card {
        cursor: pointer;
        transition: transform 0.2s;
    }

    .candidate-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .candidate-card.active {
        border-color: #0d6efd;
        background-color: #f8f9fa;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h2>Segment Discovery</h2>
        <p class="text-muted">Find frequent routes in your activity history.</p>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" id="discoveryTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="global-tab" data-bs-toggle="tab" data-bs-target="#global-pane"
                    type="button" role="tab">Global Discovery</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="single-tab" data-bs-toggle="tab" data-bs-target="#single-pane"
                    type="button" role="tab">Single Activity</button>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="discoveryTabContent">
            <!-- Global Discovery Pane -->
            <div class="tab-pane fade show active" id="global-pane" role="tabpanel">
                <form id="discoveryForm" class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="activityType" class="form-label">Activity Type</label>
                        <select id="activityType" class="form-select">
                            <option value="cycling">Cycling</option>
                            <option value="running">Running</option>
                            <option value="hiking">Hiking</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="startDate" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="startDate"
                            value="{{ (now - timedelta(days=90)).strftime('%Y-%m-%d') }}">
                    </div>
                    <div class="col-md-2 d-flex align-items-end mb-2">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="showDebugLayer">
                            <label class="form-check-label small" for="showDebugLayer">Show All</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100" id="searchBtn">
                            <span class="spinner-border spinner-border-sm d-none" role="status"
                                aria-hidden="true"></span>
                            Discover
                        </button>
                    </div>
                </form>
            </div>

            <!-- Single Activity Pane -->
            <div class="tab-pane fade" id="single-pane" role="tabpanel">
                <form id="singleForm" class="row g-3 align-items-end">
                    <div class="col-md-8">
                        <label for="activityId" class="form-label">Activity ID</label>
                        <input type="number" class="form-control" id="activityId" placeholder="e.g. 12345" required>
                        <div class="form-text">Enter the ID of the activity to slice into segments.</div>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary w-100" id="singleSearchBtn">
                            <span class="spinner-border spinner-border-sm d-none" role="status"
                                aria-hidden="true"></span>
                            Analyze Activity
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Save Modal -->
<div class="modal fade" id="saveSegmentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Save Segment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="segmentName" class="form-label">Segment Name</label>
                    <input type="text" class="form-control" id="segmentName" required>
                </div>
                <div class="mb-3">
                    <label for="segmentDesc" class="form-label">Description (Optional)</label>
                    <textarea class="form-control" id="segmentDesc" rows="2"></textarea>
                </div>
                <input type="hidden" id="saveCandidateIndex">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="confirmSave()">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- List Column -->
    <div class="col-md-5">
        <div id="resultsArea" class="row">
            <!-- Results will be injected here -->
            <div class="col-12 text-center text-muted" id="placeholder">
                Run a search to see recommendations.
            </div>
        </div>
    </div>

    <!-- Map Column -->
    <div class="col-md-7">
        <div class="sticky-top" style="top: 20px; z-index: 0;">
            <div id="map"></div>
        </div>
    </div>
</div>

<script>
    // Initialize Map
    const map = L.map('map').setView([0, 0], 2);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    let currentLayers = [];
    let debugLayerGroup = L.layerGroup().addTo(map);
    let debugPathsData = [];
    let currentCandidates = []; // Store data for saving


    // Results DOM
    const resultsArea = document.getElementById('resultsArea');

    // Toggle listener
    document.getElementById('showDebugLayer').addEventListener('change', function (e) {
        if (e.target.checked) {
            renderDebugLayer();
        } else {
            debugLayerGroup.clearLayers();
        }
    });

    function renderDebugLayer() {
        debugLayerGroup.clearLayers();
        if (!debugPathsData || debugPathsData.length === 0) return;

        debugPathsData.forEach(path => {
            const latlngs = path.map(p => [p[1], p[0]]);
            L.polyline(latlngs, {
                color: '#999',
                weight: 1,
                opacity: 0.3,
                dashArray: '5, 10'
            }).addTo(debugLayerGroup);
        });
    }

    function renderCandidates(candidates, append = false) {
        if (!append) {
            resultsArea.innerHTML = '';
            currentCandidates = candidates;
        } else {
            currentCandidates = currentCandidates.concat(candidates);
        }

        const bounds = L.latLngBounds();

        if (!candidates || candidates.length === 0) {
            resultsArea.innerHTML = '<div class="col-12 text-center">No segments found matching criteria.</div>';
            return;
        }

        candidates.forEach((cand, index) => {
            // Check if bounds valid
            let latlngs;
            try {
                latlngs = cand.points.map(p => [p[1], p[0]]);
            } catch (e) { return; }

            if (latlngs.length < 2) return;

            const polyline = L.polyline(latlngs, {
                color: 'blue',
                weight: 4,
                opacity: 0.7
            }).addTo(map);

            polyline.bindPopup(`<strong>Matches: ${cand.frequency}</strong><br>Dist: ${(cand.distance / 1000).toFixed(2)}km`);

            // Add interactions
            polyline.on('mouseover', function () {
                this.setStyle({ color: 'red', weight: 6 });
                highlightCard(index);
            });
            polyline.on('mouseout', function () {
                this.setStyle({ color: 'blue', weight: 4 });
                unhighlightCard(index);
            });

            currentLayers.push(polyline);
            bounds.extend(latlngs);

            const card = `
                <div class="col-12 mb-2">
                    <div class="card candidate-card" id="card-${index}" 
                         onmouseover="highlightMap(${index})" 
                         onmouseout="unhighlightMap(${index})"
                         onclick="focusMap(${index})">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Candidate #${index + 1}</h6>
                                <span class="badge bg-success">${cand.frequency} Runs</span>
                            </div>
                            <small class="text-muted">Distance: ${(cand.distance / 1000).toFixed(2)} km</small>
                            <div class="mt-2">
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-primary w-100" onclick="openSaveModal(${index})">Save to Library</button>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                `;
            resultsArea.insertAdjacentHTML('beforeend', card);
            const cardEl = document.getElementById(`card-${index}`);
            if (cardEl) cardEl.dataset.layerId = currentLayers.length - 1;
        });

        if (currentLayers.length > 0) {
            map.fitBounds(bounds, { padding: [50, 50] });
        }
    }

    document.getElementById('discoveryForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const btn = document.getElementById('searchBtn');
        const spinner = btn.querySelector('.spinner-border');

        btn.disabled = true;
        spinner.classList.remove('d-none');

        const type = document.getElementById('activityType').value;
        const start = document.getElementById('startDate').value;

        try {
            const response = await fetch('/api/discovery/segments', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    activity_type: type,
                    start_date: start ? new Date(start).toISOString() : null
                })
            });

            if (!response.ok) throw new Error('Discovery failed');

            const data = await response.json();

            // Clear map
            currentLayers.forEach(l => map.removeLayer(l));
            currentLayers = [];

            debugLayerGroup.clearLayers();
            debugPathsData = data.debug_paths || [];
            if (document.getElementById('showDebugLayer').checked) {
                renderDebugLayer();
            }

            renderCandidates(data.candidates);

        } catch (err) {
            console.error(err);
            resultsArea.innerHTML = `<div class="alert alert-danger">Error: ${err.message}</div>`;
        } finally {
            btn.disabled = false;
            spinner.classList.add('d-none');
        }
    });

    document.getElementById('singleForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const btn = document.getElementById('singleSearchBtn');
        const spinner = btn.querySelector('.spinner-border');
        const actId = document.getElementById('activityId').value;

        btn.disabled = true;
        spinner.classList.remove('d-none');

        try {
            const response = await fetch('/api/discovery/single', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ activity_id: parseInt(actId) })
            });

            if (!response.ok) throw new Error('Single Analysis failed');
            const data = await response.json();

            // Clear map
            currentLayers.forEach(l => map.removeLayer(l));
            currentLayers = [];
            debugLayerGroup.clearLayers();

            renderCandidates(data.candidates);

        } catch (err) {
            console.error(err);
            resultsArea.innerHTML = `<div class="alert alert-danger">Error: ${err.message}</div>`;
        } finally {
            btn.disabled = false;
            spinner.classList.add('d-none');
        }
    });

    // Helper functions for interaction
    function highlightMap(index) {
        const layer = currentLayers[index];
        if (layer) {
            layer.setStyle({ color: 'red', weight: 6 }).bringToFront();
        }
    }

    function unhighlightMap(index) {
        const layer = currentLayers[index];
        if (layer) {
            layer.setStyle({ color: 'blue', weight: 4 });
        }
    }

    function focusMap(index) {
        const layer = currentLayers[index];
        if (layer) {
            map.fitBounds(layer.getBounds(), { maxZoom: 14 });
        }
    }

    function highlightCard(index) {
        const card = document.getElementById(`card-${index}`);
        if (card) card.classList.add('active');
    }

    function unhighlightCard(index) {
        const card = document.getElementById(`card-${index}`);
        if (card) card.classList.remove('active');
    }

    // Save Logic
    let saveModal = null;

    function openSaveModal(index) {
        if (!saveModal) {
            saveModal = new bootstrap.Modal(document.getElementById('saveSegmentModal'));
        }
        document.getElementById('saveCandidateIndex').value = index;
        document.getElementById('segmentName').value = `New Segment #${index + 1}`;
        document.getElementById('segmentDesc').value = 'Discovered from activity analysis';
        saveModal.show();
    }

    async function confirmSave() {
        const index = document.getElementById('saveCandidateIndex').value;
        const name = document.getElementById('segmentName').value;
        const desc = document.getElementById('segmentDesc').value;
        const cand = currentCandidates[index];

        if (!name) {
            alert("Name is required");
            return;
        }

        try {
            // Determine activity type (from form or candidate if we stored it? 
            // Candidate doesn't strictly have type, but we can infer or pass it.
            // For now, let's grab from the global form or default to 'cycling'.
            // Single Mode: We don't have type selector easily accessible if tab switched?
            // Actually Activity ID analysis implies we know the activity... 
            // but the candidate obj doesn't have type.
            // Let's assume 'cycling' or try to grab from UI.

            let actType = document.getElementById('activityType').value;
            // If single tab active, we might not know.

            const payload = {
                name: name,
                description: desc,
                activity_type: actType, // Best guess
                points: cand.points
            };

            const response = await fetch('/api/segments/save_custom', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            if (!response.ok) throw new Error('Save failed');
            const data = await response.json();

            alert('Segment saved successfully!');
            saveModal.hide();
        } catch (err) {
            console.error(err);
            alert('Error saving segment: ' + err.message);
        }
    }
    // Handle Query Params
    document.addEventListener('DOMContentLoaded', () => {
        const urlParams = new URLSearchParams(window.location.search);
        const actId = urlParams.get('activity_id');
        
        if (actId) {
            // Switch to single tab
            const tabEl = document.getElementById('single-tab');
            const tab = new bootstrap.Tab(tabEl);
            tab.show();
            
            // Fill ID
            document.getElementById('activityId').value = actId;
            
            // Trigger search
            document.getElementById('singleSearchBtn').click();
        }
    });
</script>
{% endblock %}