{% extends "base.html" %}

{% block title %}Project Dashboard - Terra-View{% endblock %}

{% block content %}
<!-- Breadcrumb Navigation -->
<div class="mb-6">
    <nav class="flex items-center space-x-2 text-sm">
        <a href="/projects" class="text-seismo-orange hover:text-seismo-navy flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            Projects
        </a>
        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <span class="text-gray-900 dark:text-white font-medium" id="project-name-breadcrumb">Project</span>
    </nav>
</div>

<!-- Header (loads dynamically) -->
<div id="project-header" hx-get="/api/projects/{{ project_id }}/header" hx-trigger="load" hx-swap="innerHTML">
    <div class="mb-8 animate-pulse">
        <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
    </div>
</div>

<!-- Tab Navigation -->
<div class="mb-6 border-b border-gray-200 dark:border-gray-700">
    <nav class="flex space-x-6 overflow-x-auto">
        <button onclick="switchTab('overview')"
                data-tab="overview"
                class="tab-button px-4 py-3 border-b-2 font-medium text-sm transition-colors border-seismo-orange text-seismo-orange whitespace-nowrap">
            Overview
        </button>
        <button onclick="switchTab('locations')"
                data-tab="locations"
                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
            <span id="locations-tab-label">Locations</span>
        </button>
        <button onclick="switchTab('units')"
                data-tab="units"
                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
            Assigned Units
        </button>
        <button onclick="switchTab('schedules')"
                data-tab="schedules"
                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
            Schedules
        </button>
        <button onclick="switchTab('sessions')"
                data-tab="sessions"
                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
            Recording Sessions
        </button>
        <button onclick="switchTab('data')"
                data-tab="data"
                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
            Data Files
        </button>
        <button onclick="switchTab('settings')"
                data-tab="settings"
                class="tab-button px-4 py-3 border-b-2 border-transparent font-medium text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600 transition-colors whitespace-nowrap">
            Settings
        </button>
    </nav>
</div>

<!-- Tab Content -->
<div id="tab-content">
    <!-- Overview Tab -->
    <div id="overview-tab" class="tab-panel">
        <div id="project-dashboard"
             hx-get="/api/projects/{{ project_id }}/dashboard"
             hx-trigger="load, every 30s"
             hx-swap="innerHTML">
            <div class="animate-pulse space-y-4">
                <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                    <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Locations Tab -->
    <div id="locations-tab" class="tab-panel hidden">
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
                    <span id="locations-header">Locations</span>
                </h2>
                <button onclick="openLocationModal()" id="add-location-btn"
                        class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
                    <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    <span id="add-location-label">Add Location</span>
                </button>
            </div>

            <div id="project-locations"
                 hx-get="/api/projects/{{ project_id }}/locations"
                 hx-trigger="load"
                 hx-swap="innerHTML">
                <div class="text-center py-8 text-gray-500">Loading locations...</div>
            </div>
        </div>
    </div>

    <!-- Units Tab -->
    <div id="units-tab" class="tab-panel hidden">
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Assigned Units</h2>
                <div class="text-sm text-gray-500">
                    Units currently assigned to this project's locations
                </div>
            </div>

            <div id="project-units"
                 hx-get="/api/projects/{{ project_id }}/units"
                 hx-trigger="load, every 30s"
                 hx-swap="innerHTML">
                <div class="text-center py-8 text-gray-500">Loading units...</div>
            </div>
        </div>
    </div>

    <!-- Schedules Tab -->
    <div id="schedules-tab" class="tab-panel hidden">
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Scheduled Actions</h2>
                <button onclick="openScheduleModal()"
                        class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
                    <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    Schedule Action
                </button>
            </div>

            <div id="project-schedules"
                 hx-get="/api/projects/{{ project_id }}/schedules"
                 hx-trigger="load, every 30s"
                 hx-swap="innerHTML">
                <div class="text-center py-8 text-gray-500">Loading schedules...</div>
            </div>
        </div>
    </div>

    <!-- Recording Sessions Tab -->
    <div id="sessions-tab" class="tab-panel hidden">
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recording Sessions</h2>
                <div class="flex items-center gap-4">
                    <select id="sessions-filter" onchange="filterSessions()"
                            class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
                        <option value="all">All Sessions</option>
                        <option value="recording">Recording</option>
                        <option value="completed">Completed</option>
                        <option value="failed">Failed</option>
                    </select>
                </div>
            </div>

            <div id="project-sessions"
                 hx-get="/api/projects/{{ project_id }}/sessions"
                 hx-trigger="load, every 30s"
                 hx-swap="innerHTML">
                <div class="text-center py-8 text-gray-500">Loading sessions...</div>
            </div>
        </div>
    </div>

    <!-- Data Files Tab -->
    <div id="data-tab" class="tab-panel hidden">
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Data Files</h2>
                <div class="flex items-center gap-4">
                    <select id="files-filter" onchange="filterFiles()"
                            class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
                        <option value="all">All Files</option>
                        <option value="audio">Audio</option>
                        <option value="data">Data</option>
                        <option value="log">Logs</option>
                    </select>
                    <button onclick="exportProjectData()"
                            class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                        <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                        Export All
                    </button>
                </div>
            </div>

            <div id="project-files"
                 hx-get="/api/projects/{{ project_id }}/files"
                 hx-trigger="load"
                 hx-swap="innerHTML">
                <div class="text-center py-8 text-gray-500">Loading data files...</div>
            </div>
        </div>
    </div>

    <!-- Settings Tab -->
    <div id="settings-tab" class="tab-panel hidden">
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Project Settings</h2>

            <form id="project-settings-form" class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Name</label>
                    <input type="text" name="name" id="settings-name"
                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
                    <textarea name="description" id="settings-description" rows="3"
                              class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Name</label>
                        <input type="text" name="client_name" id="settings-client-name"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
                        <select name="status" id="settings-status"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            <option value="active">Active</option>
                            <option value="completed">Completed</option>
                            <option value="archived">Archived</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Site Address</label>
                    <input type="text" name="site_address" id="settings-site-address"
                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Site Coordinates</label>
                    <input type="text" name="site_coordinates" id="settings-site-coordinates" placeholder="40.7128,-74.0060"
                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <p class="text-xs text-gray-500 mt-1">Format: latitude,longitude</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
                        <input type="date" name="start_date" id="settings-start-date"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
                        <input type="date" name="end_date" id="settings-end-date"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                </div>

                <div id="settings-error" class="hidden text-sm text-red-600"></div>

                <div class="flex justify-end gap-3 pt-2">
                    <button type="button" onclick="loadProjectDetails()"
                            class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                        Reset
                    </button>
                    <button type="submit"
                            class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
                        Save Changes
                    </button>
                </div>
            </form>

            <!-- Danger Zone -->
            <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-red-600 dark:text-red-400 mb-4">Danger Zone</h3>
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                    <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
                        Archive this project to remove it from active listings. All data will be preserved.
                    </p>
                    <button onclick="archiveProject()"
                            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                        Archive Project
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Location Modal -->
<div id="location-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto m-4">
        <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <div>
                <h2 id="location-modal-title" class="text-2xl font-bold text-gray-900 dark:text-white">Add Location</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">Create or update a monitoring location</p>
            </div>
            <button onclick="closeLocationModal()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <form id="location-form" class="p-6 space-y-4">
            <input type="hidden" id="location-id">

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
                <input type="text" name="name" id="location-name"
                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
                <textarea name="description" id="location-description" rows="3"
                          class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type</label>
                    <select name="location_type" id="location-type"
                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <option value="sound">Sound</option>
                        <option value="vibration">Vibration</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Coordinates</label>
                    <input type="text" name="coordinates" id="location-coordinates" placeholder="40.7128,-74.0060"
                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
                <input type="text" name="address" id="location-address"
                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>

            <div id="location-error" class="hidden text-sm text-red-600"></div>

            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeLocationModal()"
                        class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </button>
                <button type="submit"
                        class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
                    Save Location
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Assign Unit Modal -->
<div id="assign-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
        <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Assign Unit</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">Attach a device to this location</p>
            </div>
            <button onclick="closeAssignModal()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <form id="assign-form" class="p-6 space-y-4">
            <input type="hidden" id="assign-location-id">
            <input type="hidden" id="assign-location-type">

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Available Units</label>
                <select id="assign-unit-id" name="unit_id"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
                    <option value="">Select a unit</option>
                </select>
                <p id="assign-empty" class="hidden text-xs text-gray-500 mt-2">No available units match this location type.</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
                <textarea id="assign-notes" name="notes" rows="2"
                          class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
            </div>

            <div id="assign-error" class="hidden text-sm text-red-600"></div>

            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeAssignModal()"
                        class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </button>
                <button type="submit"
                        class="px-6 py-2 bg-seismo-orange hover:bg-seismo-navy text-white rounded-lg font-medium">
                    Assign Unit
                </button>
            </div>
        </form>
    </div>
</div>

<script>
const projectId = "{{ project_id }}";
let editingLocationId = null;
let projectTypeId = null;

// Tab switching
function switchTab(tabName) {
    // Hide all tab panels
    document.querySelectorAll('.tab-panel').forEach(panel => {
        panel.classList.add('hidden');
    });

    // Reset all tab buttons
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('border-seismo-orange', 'text-seismo-orange');
        button.classList.add('border-transparent', 'text-gray-600', 'dark:text-gray-400');
    });

    // Show selected tab panel
    const panel = document.getElementById(`${tabName}-tab`);
    if (panel) {
        panel.classList.remove('hidden');
    }

    // Highlight selected tab button
    const button = document.querySelector(`[data-tab="${tabName}"]`);
    if (button) {
        button.classList.remove('border-transparent', 'text-gray-600', 'dark:text-gray-400');
        button.classList.add('border-seismo-orange', 'text-seismo-orange');
    }
}

// Load project details
async function loadProjectDetails() {
    try {
        const response = await fetch(`/api/projects/${projectId}`);
        if (!response.ok) {
            throw new Error('Failed to load project details');
        }
        const data = await response.json();
        projectTypeId = data.project_type_id || null;

        // Update breadcrumb
        document.getElementById('project-name-breadcrumb').textContent = data.name || 'Project';

        // Update settings form
        document.getElementById('settings-name').value = data.name || '';
        document.getElementById('settings-description').value = data.description || '';
        document.getElementById('settings-client-name').value = data.client_name || '';
        document.getElementById('settings-status').value = data.status || 'active';
        document.getElementById('settings-site-address').value = data.site_address || '';
        document.getElementById('settings-site-coordinates').value = data.site_coordinates || '';
        document.getElementById('settings-start-date').value = formatDate(data.start_date);
        document.getElementById('settings-end-date').value = formatDate(data.end_date);

        // Update tab labels based on project type
        if (projectTypeId === 'sound_monitoring') {
            document.getElementById('locations-tab-label').textContent = 'NRLs';
            document.getElementById('locations-header').textContent = 'Noise Recording Locations';
            document.getElementById('add-location-label').textContent = 'Add NRL';
        }

        document.getElementById('settings-error').classList.add('hidden');
    } catch (err) {
        console.error('Failed to load project details:', err);
    }
}

function formatDate(value) {
    if (!value) return '';
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return '';
    return date.toISOString().slice(0, 10);
}

// Project settings form submission
document.getElementById('project-settings-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const payload = {
        name: document.getElementById('settings-name').value.trim(),
        description: document.getElementById('settings-description').value.trim() || null,
        client_name: document.getElementById('settings-client-name').value.trim() || null,
        status: document.getElementById('settings-status').value,
        site_address: document.getElementById('settings-site-address').value.trim() || null,
        site_coordinates: document.getElementById('settings-site-coordinates').value.trim() || null,
        start_date: document.getElementById('settings-start-date').value || null,
        end_date: document.getElementById('settings-end-date').value || null
    };

    try {
        const response = await fetch(`/api/projects/${projectId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });

        if (!response.ok) {
            throw new Error('Failed to update project');
        }

        // Reload page to show updated data
        window.location.reload();
    } catch (err) {
        const errorEl = document.getElementById('settings-error');
        errorEl.textContent = err.message || 'Failed to update project.';
        errorEl.classList.remove('hidden');
    }
});

function refreshProjectDashboard() {
    htmx.ajax('GET', `/api/projects/${projectId}/dashboard`, {
        target: '#project-dashboard',
        swap: 'innerHTML'
    });
    htmx.ajax('GET', `/api/projects/${projectId}/header`, {
        target: '#project-header',
        swap: 'innerHTML'
    });
}

// Location modal functions
function openLocationModal(defaultType) {
    editingLocationId = null;
    document.getElementById('location-modal-title').textContent = 'Add Location';
    document.getElementById('location-id').value = '';
    document.getElementById('location-name').value = '';
    document.getElementById('location-description').value = '';
    document.getElementById('location-address').value = '';
    document.getElementById('location-coordinates').value = '';
    const locationTypeSelect = document.getElementById('location-type');
    const locationTypeWrapper = locationTypeSelect.closest('div');
    if (projectTypeId === 'sound_monitoring') {
        locationTypeSelect.value = 'sound';
        locationTypeSelect.disabled = true;
        if (locationTypeWrapper) locationTypeWrapper.classList.add('hidden');
    } else {
        locationTypeSelect.disabled = false;
        if (locationTypeWrapper) locationTypeWrapper.classList.remove('hidden');
        locationTypeSelect.value = defaultType || 'sound';
    }
    document.getElementById('location-error').classList.add('hidden');
    document.getElementById('location-modal').classList.remove('hidden');
}

function openEditLocationModal(button) {
    const data = JSON.parse(button.dataset.location);
    editingLocationId = data.id;
    document.getElementById('location-modal-title').textContent = 'Edit Location';
    document.getElementById('location-id').value = data.id;
    document.getElementById('location-name').value = data.name || '';
    document.getElementById('location-description').value = data.description || '';
    document.getElementById('location-address').value = data.address || '';
    document.getElementById('location-coordinates').value = data.coordinates || '';
    const locationTypeSelect = document.getElementById('location-type');
    const locationTypeWrapper = locationTypeSelect.closest('div');
    if (projectTypeId === 'sound_monitoring') {
        locationTypeSelect.value = 'sound';
        locationTypeSelect.disabled = true;
        if (locationTypeWrapper) locationTypeWrapper.classList.add('hidden');
    } else {
        locationTypeSelect.disabled = false;
        if (locationTypeWrapper) locationTypeWrapper.classList.remove('hidden');
        locationTypeSelect.value = data.location_type || 'sound';
    }
    document.getElementById('location-error').classList.add('hidden');
    document.getElementById('location-modal').classList.remove('hidden');
}

function closeLocationModal() {
    document.getElementById('location-modal').classList.add('hidden');
}

document.getElementById('location-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const name = document.getElementById('location-name').value.trim();
    const description = document.getElementById('location-description').value.trim();
    const address = document.getElementById('location-address').value.trim();
    const coordinates = document.getElementById('location-coordinates').value.trim();
    let locationType = document.getElementById('location-type').value;
    if (projectTypeId === 'sound_monitoring') {
        locationType = 'sound';
    }

    try {
        if (editingLocationId) {
            const payload = {
                name,
                description: description || null,
                address: address || null,
                coordinates: coordinates || null,
                location_type: locationType
            };
            const response = await fetch(`/api/projects/${projectId}/locations/${editingLocationId}`, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(payload)
            });
            if (!response.ok) {
                const data = await response.json().catch(() => ({}));
                throw new Error(data.detail || 'Failed to update location');
            }
        } else {
            const formData = new FormData();
            formData.append('name', name);
            formData.append('description', description);
            formData.append('address', address);
            formData.append('coordinates', coordinates);
            formData.append('location_type', locationType);
            const response = await fetch(`/api/projects/${projectId}/locations/create`, {
                method: 'POST',
                body: formData
            });
            if (!response.ok) {
                const data = await response.json().catch(() => ({}));
                throw new Error(data.detail || 'Failed to create location');
            }
        }

        closeLocationModal();
        refreshProjectDashboard();
        // Refresh locations tab if visible
        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
            target: '#project-locations',
            swap: 'innerHTML'
        });
    } catch (err) {
        const errorEl = document.getElementById('location-error');
        errorEl.textContent = err.message || 'Failed to save location.';
        errorEl.classList.remove('hidden');
    }
});

async function deleteLocation(locationId) {
    if (!confirm('Delete this location?')) return;

    try {
        const response = await fetch(`/api/projects/${projectId}/locations/${locationId}`, {
            method: 'DELETE'
        });
        if (!response.ok) {
            const data = await response.json().catch(() => ({}));
            throw new Error(data.detail || 'Failed to delete location');
        }
        refreshProjectDashboard();
        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
            target: '#project-locations',
            swap: 'innerHTML'
        });
    } catch (err) {
        alert(err.message || 'Failed to delete location.');
    }
}

// Assign modal functions
function openAssignModal(locationId, locationType) {
    const safeType = locationType || 'sound';
    document.getElementById('assign-location-id').value = locationId;
    document.getElementById('assign-location-type').value = safeType;
    document.getElementById('assign-unit-id').innerHTML = '<option value="">Loading units...</option>';
    document.getElementById('assign-empty').classList.add('hidden');
    document.getElementById('assign-error').classList.add('hidden');
    document.getElementById('assign-modal').classList.remove('hidden');
    loadAvailableUnits(safeType);
}

function closeAssignModal() {
    document.getElementById('assign-modal').classList.add('hidden');
}

async function loadAvailableUnits(locationType) {
    try {
        const response = await fetch(`/api/projects/${projectId}/available-units?location_type=${locationType}`);
        if (!response.ok) {
            throw new Error('Failed to load available units');
        }
        const data = await response.json();
        const select = document.getElementById('assign-unit-id');
        select.innerHTML = '<option value="">Select a unit</option>';
        if (!data.length) {
            document.getElementById('assign-empty').classList.remove('hidden');
            return;
        }
        data.forEach(unit => {
            const option = document.createElement('option');
            option.value = unit.id;
            option.textContent = `${unit.id} • ${unit.model || unit.device_type}`;
            select.appendChild(option);
        });
    } catch (err) {
        const errorEl = document.getElementById('assign-error');
        errorEl.textContent = err.message || 'Failed to load units.';
        errorEl.classList.remove('hidden');
    }
}

document.getElementById('assign-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const locationId = document.getElementById('assign-location-id').value;
    const unitId = document.getElementById('assign-unit-id').value;
    const notes = document.getElementById('assign-notes').value.trim();

    if (!unitId) {
        document.getElementById('assign-error').textContent = 'Select a unit to assign.';
        document.getElementById('assign-error').classList.remove('hidden');
        return;
    }

    try {
        const formData = new FormData();
        formData.append('unit_id', unitId);
        formData.append('notes', notes);
        const response = await fetch(`/api/projects/${projectId}/locations/${locationId}/assign`, {
            method: 'POST',
            body: formData
        });
        if (!response.ok) {
            const data = await response.json().catch(() => ({}));
            throw new Error(data.detail || 'Failed to assign unit');
        }
        closeAssignModal();
        refreshProjectDashboard();
        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
            target: '#project-locations',
            swap: 'innerHTML'
        });
    } catch (err) {
        const errorEl = document.getElementById('assign-error');
        errorEl.textContent = err.message || 'Failed to assign unit.';
        errorEl.classList.remove('hidden');
    }
});

async function unassignUnit(assignmentId) {
    if (!confirm('Unassign this unit?')) return;

    try {
        const response = await fetch(`/api/projects/${projectId}/assignments/${assignmentId}/unassign`, {
            method: 'POST'
        });
        if (!response.ok) {
            const data = await response.json().catch(() => ({}));
            throw new Error(data.detail || 'Failed to unassign unit');
        }
        refreshProjectDashboard();
        htmx.ajax('GET', `/api/projects/${projectId}/locations`, {
            target: '#project-locations',
            swap: 'innerHTML'
        });
    } catch (err) {
        alert(err.message || 'Failed to unassign unit.');
    }
}

// Filter functions
function filterSessions() {
    const filter = document.getElementById('sessions-filter').value;
    const url = filter === 'all'
        ? `/api/projects/${projectId}/sessions`
        : `/api/projects/${projectId}/sessions?status=${filter}`;

    htmx.ajax('GET', url, {
        target: '#project-sessions',
        swap: 'innerHTML'
    });
}

function filterFiles() {
    const filter = document.getElementById('files-filter').value;
    const url = filter === 'all'
        ? `/api/projects/${projectId}/files`
        : `/api/projects/${projectId}/files?type=${filter}`;

    htmx.ajax('GET', url, {
        target: '#project-files',
        swap: 'innerHTML'
    });
}

// Utility functions
function openScheduleModal() {
    alert('Schedule modal coming soon');
}

function exportProjectData() {
    window.location.href = `/api/projects/${projectId}/export`;
}

function archiveProject() {
    if (!confirm('Archive this project? You can restore it later from the archived projects list.')) return;

    document.getElementById('settings-status').value = 'archived';
    document.getElementById('project-settings-form').dispatchEvent(new Event('submit'));
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeLocationModal();
        closeAssignModal();
    }
});

// Click outside to close modals
document.getElementById('location-modal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeLocationModal();
    }
});

document.getElementById('assign-modal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeAssignModal();
    }
});

// Load project details on page load
document.addEventListener('DOMContentLoaded', function() {
    loadProjectDetails();
});
</script>
{% endblock %}