{% extends "base.html" %}
{% block title %}Wildlife Journal — Vigilar{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0"><i class="bi bi-binoculars-fill me-2 text-success"></i>Wildlife Journal</h5>
    <div class="d-flex gap-2">
        <a href="/wildlife/api/export" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-download me-1"></i>Export CSV
        </a>
    </div>
</div>

<!-- Summary cards -->
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center py-3">
                <div class="fs-3 fw-bold text-success" id="stat-total">—</div>
                <div class="small text-muted">Total Sightings</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center py-3">
                <div class="fs-3 fw-bold text-info" id="stat-species">—</div>
                <div class="small text-muted">Species Observed</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center py-3">
                <div class="fs-3 fw-bold text-warning" id="stat-top-species">—</div>
                <div class="small text-muted">Most Frequent</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center py-3">
                <div class="fs-3 fw-bold text-danger" id="stat-predators">—</div>
                <div class="small text-muted">Predator Sightings</div>
            </div>
        </div>
    </div>
</div>

<!-- Species breakdown -->
<div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary py-2">
        <span class="small fw-semibold"><i class="bi bi-bar-chart-fill me-2"></i>Species Breakdown</span>
    </div>
    <div class="card-body py-2">
        <div class="d-flex flex-wrap gap-2" id="species-bars">
            <span class="text-muted small">Loading…</span>
        </div>
    </div>
</div>

<!-- Activity by time of day -->
<div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary py-2">
        <span class="small fw-semibold"><i class="bi bi-clock-history me-2"></i>Activity by Time of Day</span>
    </div>
    <div class="card-body py-2">
        <div class="row g-2" id="frequency-grid">
            <div class="col-12 text-muted small text-center py-2">Loading…</div>
        </div>
    </div>
</div>

<!-- Filters + sighting table -->
<div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary py-2 d-flex justify-content-between align-items-center">
        <span class="small fw-semibold"><i class="bi bi-table me-2"></i>Sighting Log</span>
        <div class="d-flex gap-2">
            <select class="form-select form-select-sm bg-dark text-light border-secondary" id="filter-species"
                    style="width:auto;">
                <option value="">All species</option>
            </select>
            <select class="form-select form-select-sm bg-dark text-light border-secondary" id="filter-threat"
                    style="width:auto;">
                <option value="">All threat levels</option>
                <option value="PASSIVE">Passive</option>
                <option value="NUISANCE">Nuisance</option>
                <option value="PREDATOR">Predator</option>
            </select>
            <select class="form-select form-select-sm bg-dark text-light border-secondary" id="filter-camera"
                    style="width:auto;">
                <option value="">All cameras</option>
            </select>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0 small">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Species</th>
                        <th>Threat</th>
                        <th>Camera</th>
                        <th>Confidence</th>
                        <th>Conditions</th>
                    </tr>
                </thead>
                <tbody id="sightings-tbody">
                    <tr><td colspan="6" class="text-center text-muted py-3">Loading…</td></tr>
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-top border-secondary">
            <span class="small text-muted" id="page-info">—</span>
            <div class="d-flex gap-2">
                <button class="btn btn-sm btn-outline-secondary" id="btn-prev" disabled>
                    <i class="bi bi-chevron-left"></i> Prev
                </button>
                <button class="btn btn-sm btn-outline-secondary" id="btn-next" disabled>
                    Next <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';

    const THREAT_BADGE = {
        PASSIVE:  'bg-success',
        NUISANCE: 'bg-warning text-dark',
        PREDATOR: 'bg-danger',
    };

    const PAGE_SIZE = 50;
    let currentOffset = 0;
    let totalShown = 0;

    // ---- utility ------------------------------------------------------------
    function fmtTs(ts) {
        if (!ts) return '—';
        return new Date(ts * 1000).toLocaleString();
    }

    function fmtPct(v) {
        if (v == null) return '—';
        return (v * 100).toFixed(1) + '%';
    }

    // ---- stats --------------------------------------------------------------
    function loadStats() {
        fetch('/wildlife/api/stats')
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(data => {
                document.getElementById('stat-total').textContent = data.total ?? '—';
                document.getElementById('stat-species').textContent = data.species_count ?? '—';

                const per = data.per_species || {};
                const entries = Object.entries(per).sort((a, b) => b[1] - a[1]);
                document.getElementById('stat-top-species').textContent =
                    entries.length > 0 ? entries[0][0] : '—';

                // Populate species filter
                const sel = document.getElementById('filter-species');
                entries.forEach(([sp]) => {
                    if (!sel.querySelector(`option[value="${sp}"]`)) {
                        const opt = document.createElement('option');
                        opt.value = sp;
                        opt.textContent = sp.charAt(0).toUpperCase() + sp.slice(1);
                        sel.appendChild(opt);
                    }
                });

                // Species bars
                const barsEl = document.getElementById('species-bars');
                if (entries.length === 0) {
                    barsEl.innerHTML = '<span class="text-muted small">No sightings recorded</span>';
                } else {
                    const maxCnt = entries[0][1];
                    barsEl.innerHTML = entries.map(([sp, cnt]) => {
                        const pct = Math.round((cnt / maxCnt) * 100);
                        return `<div style="min-width:12rem;flex:1 1 12rem;">
                            <div class="d-flex justify-content-between small mb-1">
                                <span class="fw-semibold">${sp}</span>
                                <span class="text-muted">${cnt}</span>
                            </div>
                            <div class="progress" style="height:8px;background:rgba(255,255,255,.1);">
                                <div class="progress-bar bg-success" style="width:${pct}%"></div>
                            </div>
                        </div>`;
                    }).join('');
                }
            })
            .catch(() => {});
    }

    // ---- frequency ----------------------------------------------------------
    function loadFrequency() {
        fetch('/wildlife/api/frequency')
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(data => {
                const grid = document.getElementById('frequency-grid');
                const buckets = Object.entries(data);
                if (buckets.length === 0) {
                    grid.innerHTML = '<div class="col-12 text-muted small text-center py-2">No data</div>';
                    return;
                }
                // find max value across all buckets
                let maxVal = 1;
                buckets.forEach(([, counts]) => {
                    const total = Object.values(counts).reduce((a, b) => a + b, 0);
                    if (total > maxVal) maxVal = total;
                });
                grid.innerHTML = buckets.map(([label, counts]) => {
                    const total = Object.values(counts).reduce((a, b) => a + b, 0);
                    const pct = Math.round((total / maxVal) * 100);
                    const species = Object.entries(counts)
                        .sort((a, b) => b[1] - a[1])
                        .map(([sp, n]) => `${sp} (${n})`)
                        .join(', ');
                    return `<div class="col-6 col-md-4 col-lg-2">
                        <div class="text-center small text-muted mb-1">${label}</div>
                        <div class="progress mb-1" style="height:20px;background:rgba(255,255,255,.1);">
                            <div class="progress-bar bg-info" style="width:${pct}%;" title="${species}">
                                ${total > 0 ? total : ''}
                            </div>
                        </div>
                        <div class="text-center x-small text-muted" style="font-size:.7rem;">${species || 'none'}</div>
                    </div>`;
                }).join('');
            })
            .catch(() => {
                document.getElementById('frequency-grid').innerHTML =
                    '<div class="col-12 text-muted small text-center py-2">Unavailable</div>';
            });
    }

    // ---- sightings table ----------------------------------------------------
    function buildParams(offset) {
        const params = new URLSearchParams();
        const species = document.getElementById('filter-species').value;
        const threat  = document.getElementById('filter-threat').value;
        const camera  = document.getElementById('filter-camera').value;
        if (species) params.set('species', species);
        if (threat)  params.set('threat_level', threat);
        if (camera)  params.set('camera_id', camera);
        params.set('limit', PAGE_SIZE);
        params.set('offset', offset);
        return params;
    }

    function loadSightings(offset) {
        const tbody = document.getElementById('sightings-tbody');
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">Loading…</td></tr>';

        fetch('/wildlife/api/sightings?' + buildParams(offset))
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(data => {
                const rows = data.sightings || [];
                totalShown = rows.length;
                currentOffset = offset;

                if (rows.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">No sightings found</td></tr>';
                } else {
                    tbody.innerHTML = rows.map(s => {
                        const badgeCls = THREAT_BADGE[s.threat_level] || 'bg-secondary';
                        return `<tr>
                            <td class="text-nowrap">${fmtTs(s.ts)}</td>
                            <td class="fw-semibold">${s.species || '—'}</td>
                            <td><span class="badge ${badgeCls}">${s.threat_level || '—'}</span></td>
                            <td>${s.camera_id || '—'}</td>
                            <td>${fmtPct(s.confidence)}</td>
                            <td class="text-muted">${s.conditions || '—'}</td>
                        </tr>`;
                    }).join('');

                    // Populate camera filter from data
                    const camSel = document.getElementById('filter-camera');
                    rows.forEach(s => {
                        if (s.camera_id && !camSel.querySelector(`option[value="${s.camera_id}"]`)) {
                            const opt = document.createElement('option');
                            opt.value = s.camera_id;
                            opt.textContent = s.camera_id;
                            camSel.appendChild(opt);
                        }
                    });
                }

                const pageInfo = document.getElementById('page-info');
                pageInfo.textContent = rows.length === 0
                    ? 'No results'
                    : `Showing ${offset + 1}–${offset + rows.length}`;

                document.getElementById('btn-prev').disabled = offset === 0;
                document.getElementById('btn-next').disabled = rows.length < PAGE_SIZE;
            })
            .catch(() => {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">Failed to load sightings</td></tr>';
            });
    }

    // ---- stats predator count -----------------------------------------------
    function loadPredatorCount() {
        fetch('/wildlife/api/sightings?threat_level=PREDATOR&limit=500&offset=0')
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(data => {
                document.getElementById('stat-predators').textContent =
                    (data.sightings || []).length;
            })
            .catch(() => {});
    }

    // ---- events -------------------------------------------------------------
    document.getElementById('btn-prev').addEventListener('click', () => {
        loadSightings(Math.max(0, currentOffset - PAGE_SIZE));
    });
    document.getElementById('btn-next').addEventListener('click', () => {
        loadSightings(currentOffset + PAGE_SIZE);
    });

    ['filter-species', 'filter-threat', 'filter-camera'].forEach(id => {
        document.getElementById(id).addEventListener('change', () => {
            currentOffset = 0;
            loadSightings(0);
        });
    });

    // ---- initial load -------------------------------------------------------
    loadStats();
    loadFrequency();
    loadSightings(0);
    loadPredatorCount();
    setInterval(() => { loadStats(); loadFrequency(); loadSightings(currentOffset); }, 60000);
})();
</script>
{% endblock %}