{% extends "base.html" %}

{% block title %}Unit Detail - Seismo Fleet Manager{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy inline-flex items-center mb-4">
        <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>
        Back to Fleet Roster
    </a>
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white" id="pageTitle">Loading...</h1>
        <button onclick="deleteUnit()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
            </svg>
            Delete Unit
        </button>
    </div>
</div>

<!-- Loading state -->
<div id="loadingState" class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-12 text-center">
    <div class="animate-pulse">
        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto mb-4"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mx-auto"></div>
    </div>
</div>

<!-- Main content (hidden until loaded) -->
<div id="mainContent" class="hidden space-y-6">
    <!-- Status Card -->
    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
        <div class="flex justify-between items-start mb-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Status</h2>
            <div class="flex items-center space-x-2">
                <span id="statusIndicator" class="w-3 h-3 rounded-full"></span>
                <span id="statusText" class="font-semibold"></span>
            </div>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
                <span class="text-sm text-gray-500 dark:text-gray-400">Last Seen</span>
                <p id="lastSeen" class="font-medium text-gray-900 dark:text-white">--</p>
            </div>
            <div>
                <span class="text-sm text-gray-500 dark:text-gray-400">Age</span>
                <p id="age" class="font-medium text-gray-900 dark:text-white">--</p>
            </div>
            <div>
                <span class="text-sm text-gray-500 dark:text-gray-400">Deployed</span>
                <p id="deployedStatus" class="font-medium text-gray-900 dark:text-white">--</p>
            </div>
            <div>
                <span class="text-sm text-gray-500 dark:text-gray-400">Retired</span>
                <p id="retiredStatus" class="font-medium text-gray-900 dark:text-white">--</p>
            </div>
        </div>
    </div>

    <!-- Location Map -->
    <div id="mapCard" class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Location</h2>
        <div id="unit-map" class="w-full h-64 rounded-lg mb-4"></div>
        <p id="locationText" class="text-sm text-gray-500 dark:text-gray-400"></p>
    </div>

    <!-- Edit Unit Form -->
    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Unit Information</h2>
        <form id="editForm" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Device Type -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Device Type</label>
                    <select name="device_type" id="deviceType" onchange="toggleDetailFields()"
                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                        <option value="seismograph">Seismograph</option>
                        <option value="modem">Modem</option>
                    </select>
                </div>

                <!-- Unit Type -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Unit Type</label>
                    <input type="text" name="unit_type" id="unitType"
                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                </div>

                <!-- Project ID -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project ID</label>
                    <input type="text" name="project_id" id="projectId"
                        class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                </div>

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

            <!-- Seismograph Fields -->
            <div id="seismographFields" class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Seismograph Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Calibrated</label>
                        <input type="date" name="last_calibrated" id="lastCalibrated"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Next Calibration Due</label>
                        <input type="date" name="next_calibration_due" id="nextCalibrationDue"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Deployed With Modem</label>
                        <input type="text" name="deployed_with_modem_id" id="deployedWithModemId" placeholder="Modem ID"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                    </div>
                </div>
            </div>

            <!-- Modem Fields -->
            <div id="modemFields" class="hidden space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Modem Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">IP Address</label>
                        <input type="text" name="ip_address" id="ipAddress" placeholder="192.168.1.100"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
                        <input type="text" name="phone_number" id="phoneNumber" placeholder="+1-555-0123"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Hardware Model</label>
                        <input type="text" name="hardware_model" id="hardwareModel" placeholder="e.g., Raven XTV"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-seismo-orange">
                    </div>
                </div>
            </div>

            <!-- Checkboxes -->
            <div class="flex items-center gap-6 border-t border-gray-200 dark:border-gray-700 pt-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="deployed" id="deployed" value="true"
                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Deployed</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="retired" id="retired" value="true"
                        class="w-4 h-4 text-seismo-orange focus:ring-seismo-orange rounded">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Retired</span>
                </label>
            </div>

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

            <!-- Save Button -->
            <div class="flex gap-3">
                <button type="submit" class="flex-1 px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors">
                    Save Changes
                </button>
                <a href="/roster" class="px-6 py-3 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-700 dark:text-white rounded-lg font-medium transition-colors">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<script>
const unitId = "{{ unit_id }}";
let currentUnit = null;

// Load unit data on page load
async function loadUnitData() {
    try {
        const response = await fetch(`/api/roster/${unitId}`);
        if (!response.ok) {
            throw new Error('Unit not found');
        }

        currentUnit = await response.json();
        populateForm();

        // Hide loading, show content
        document.getElementById('loadingState').classList.add('hidden');
        document.getElementById('mainContent').classList.remove('hidden');
    } catch (error) {
        alert(`Error loading unit: ${error.message}`);
        window.location.href = '/roster';
    }
}

// Populate form with unit data
function populateForm() {
    // Update page title
    document.getElementById('pageTitle').textContent = `Unit ${currentUnit.id}`;

    // Status info
    const statusColors = {
        'OK': 'bg-green-500',
        'Pending': 'bg-yellow-500',
        'Missing': 'bg-red-500'
    };
    document.getElementById('statusIndicator').className = `w-3 h-3 rounded-full ${statusColors.OK || 'bg-gray-400'}`;
    document.getElementById('statusText').textContent = 'No status data';
    document.getElementById('lastSeen').textContent = '--';
    document.getElementById('age').textContent = '--';
    document.getElementById('deployedStatus').textContent = currentUnit.deployed ? 'Yes' : 'No';
    document.getElementById('retiredStatus').textContent = currentUnit.retired ? 'Yes' : 'No';

    // Form fields
    document.getElementById('deviceType').value = currentUnit.device_type;
    document.getElementById('unitType').value = currentUnit.unit_type;
    document.getElementById('projectId').value = currentUnit.project_id;
    document.getElementById('location').value = currentUnit.location;
    document.getElementById('deployed').checked = currentUnit.deployed;
    document.getElementById('retired').checked = currentUnit.retired;
    document.getElementById('note').value = currentUnit.note;

    // Seismograph fields
    document.getElementById('lastCalibrated').value = currentUnit.last_calibrated;
    document.getElementById('nextCalibrationDue').value = currentUnit.next_calibration_due;
    document.getElementById('deployedWithModemId').value = currentUnit.deployed_with_modem_id;

    // Modem fields
    document.getElementById('ipAddress').value = currentUnit.ip_address;
    document.getElementById('phoneNumber').value = currentUnit.phone_number;
    document.getElementById('hardwareModel').value = currentUnit.hardware_model;

    // Show/hide fields based on device type
    toggleDetailFields();

    // Update map with unit location
    updateUnitMap(currentUnit);
}

// Toggle device-specific fields
function toggleDetailFields() {
    const deviceType = document.getElementById('deviceType').value;
    const seismoFields = document.getElementById('seismographFields');
    const modemFields = document.getElementById('modemFields');

    if (deviceType === 'seismograph') {
        seismoFields.classList.remove('hidden');
        modemFields.classList.add('hidden');
    } else {
        seismoFields.classList.add('hidden');
        modemFields.classList.remove('hidden');
    }
}

// Handle form submission
document.getElementById('editForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData(this);

    try {
        const response = await fetch(`/api/roster/edit/${unitId}`, {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            alert('Unit updated successfully!');
            loadUnitData(); // Reload data
        } else {
            const result = await response.json();
            alert(`Error: ${result.detail || 'Unknown error'}`);
        }
    } catch (error) {
        alert(`Error: ${error.message}`);
    }
});

// Delete unit
async function deleteUnit() {
    if (!confirm(`Are you sure you want to PERMANENTLY delete unit ${unitId}?\n\nThis action cannot be undone!`)) {
        return;
    }

    try {
        const response = await fetch(`/api/roster/${unitId}`, {
            method: 'DELETE'
        });

        if (response.ok) {
            alert('Unit deleted successfully');
            window.location.href = '/roster';
        } else {
            const result = await response.json();
            alert(`Error: ${result.detail || 'Unknown error'}`);
        }
    } catch (error) {
        alert(`Error: ${error.message}`);
    }
}

// Initialize unit location map
let unitMap = null;

function initUnitMap() {
    // Default center (will be updated when location is loaded)
    unitMap = L.map('unit-map').setView([39.8283, -98.5795], 4);

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 18
    }).addTo(unitMap);
}

function updateUnitMap(unit) {
    if (!unit.location || !unitMap) {
        document.getElementById('mapCard').classList.add('hidden');
        return;
    }

    const coords = parseLocation(unit.location);
    if (coords) {
        const [lat, lon] = coords;

        // Show the map card
        document.getElementById('mapCard').classList.remove('hidden');

        // Center map on unit location
        unitMap.setView([lat, lon], 13);

        // Add marker with unit info
        const statusColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'orange' : 'red';

        L.circleMarker([lat, lon], {
            radius: 10,
            fillColor: statusColor,
            color: '#fff',
            weight: 3,
            opacity: 1,
            fillOpacity: 0.8
        }).addTo(unitMap).bindPopup(`
            <div class="p-2">
                <h3 class="font-bold text-lg">${unit.id}</h3>
                <p class="text-sm">Status: <span style="color: ${statusColor}">${unit.status || 'Unknown'}</span></p>
                <p class="text-sm">Type: ${unit.device_type}</p>
            </div>
        `).openPopup();

        // Update location text
        document.getElementById('locationText').textContent = `Coordinates: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;
    } else {
        // Show map card but indicate location not mappable
        document.getElementById('mapCard').classList.remove('hidden');
        document.getElementById('locationText').textContent = `Location: ${unit.location} (coordinates not available)`;
    }
}

function parseLocation(location) {
    if (!location) return null;

    // Try to parse as "lat,lon" format
    const parts = location.split(',').map(s => s.trim());
    if (parts.length === 2) {
        const lat = parseFloat(parts[0]);
        const lon = parseFloat(parts[1]);
        if (!isNaN(lat) && !isNaN(lon)) {
            return [lat, lon];
        }
    }

    // TODO: Add geocoding support for address strings
    return null;
}

// Load data when page loads
initUnitMap();
loadUnitData();
</script>
{% endblock %}