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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0"><i class="bi bi-heart-fill me-2 text-danger"></i>Pet &amp; Wildlife Monitor</h5>
    <div class="d-flex gap-2">
        <button class="btn btn-sm btn-outline-secondary" id="btn-train" title="Train model">
            <i class="bi bi-cpu me-1"></i>Train Model
        </button>
        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#registerPetModal">
            <i class="bi bi-plus-lg me-1"></i>Register Pet
        </button>
    </div>
</div>

<!-- Per-pet status cards -->
<div class="row g-3 mb-3" id="pet-cards">
    {% for pet in pets %}
    <div class="col-sm-6 col-lg-4 col-xl-3">
        <div class="card bg-dark border-secondary h-100 pet-card" data-pet-id="{{ pet.id }}">
            <div class="card-body d-flex flex-column gap-1">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <span class="fs-4 me-2">{{ '🐈\u200d⬛' if pet.species == 'cat' else '🐕' if pet.species == 'dog' else '🐾' }}</span>
                        <span class="fw-semibold">{{ pet.name }}</span>
                        {% if pet.breed %}
                        <small class="text-muted ms-1">{{ pet.breed }}</small>
                        {% endif %}
                    </div>
                    <span class="badge pet-status-badge bg-secondary" id="status-{{ pet.id }}">
                        <i class="bi bi-circle-fill me-1"></i>—
                    </span>
                </div>
                <div class="small text-muted mt-1">
                    <div><i class="bi bi-camera me-1"></i><span class="pet-location" id="loc-{{ pet.id }}">—</span></div>
                    <div><i class="bi bi-clock me-1"></i><span class="pet-last-seen" id="seen-{{ pet.id }}">—</span></div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="card bg-dark border-secondary">
            <div class="card-body text-center text-muted py-4">
                <i class="bi bi-heart me-2"></i>No pets registered yet.
                <a href="#" class="ms-2" data-bs-toggle="modal" data-bs-target="#registerPetModal">Register your first pet</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Wildlife summary bar -->
<div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary d-flex justify-content-between align-items-center py-2">
        <span class="small fw-semibold"><i class="bi bi-binoculars me-2"></i>Wildlife Today</span>
        <small class="text-muted" id="wildlife-updated">—</small>
    </div>
    <div class="card-body py-2">
        <div class="d-flex flex-wrap gap-3" id="wildlife-summary">
            <span class="text-muted small">Loading…</span>
        </div>
    </div>
</div>

<!-- Activity timeline -->
<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-line me-2"></i>24-Hour Activity</span>
    </div>
    <div class="card-body p-2" id="activity-timeline">
        {% for pet in pets %}
        <div class="mb-2 activity-row" data-pet-id="{{ pet.id }}">
            <div class="d-flex align-items-center mb-1">
                <span class="small text-muted" style="min-width:8rem">
                    {{ '🐈\u200d⬛' if pet.species == 'cat' else '🐕' if pet.species == 'dog' else '🐾' }}
                    {{ pet.name }}
                </span>
                <div class="flex-grow-1 position-relative" style="height:20px;background:rgba(255,255,255,.05);border-radius:3px;">
                    <canvas class="activity-canvas w-100 h-100" data-pet-id="{{ pet.id }}" style="display:block;"></canvas>
                </div>
            </div>
        </div>
        {% else %}
        <div class="text-muted small text-center py-2">No pets registered</div>
        {% endfor %}
        <!-- Hour labels -->
        {% if pets %}
        <div class="d-flex justify-content-between small text-muted px-1" style="margin-left:8rem;">
            <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span>
        </div>
        {% endif %}
    </div>
</div>

<!-- Unlabeled detection queue -->
<div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary d-flex justify-content-between align-items-center py-2">
        <span class="small fw-semibold"><i class="bi bi-question-circle me-2"></i>Unlabeled Detections</span>
        <span class="badge bg-secondary" id="unlabeled-count">0</span>
    </div>
    <div class="card-body">
        <div class="row g-2" id="unlabeled-grid">
            <div class="col-12 text-muted small text-center py-2">Loading…</div>
        </div>
    </div>
</div>

<!-- Highlight reel -->
<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-stars me-2"></i>Today's Highlights</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0 small">
                <thead>
                    <tr>
                        <th>Pet</th>
                        <th>Camera</th>
                        <th>Time</th>
                        <th>Description</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="highlights-list">
                    <tr><td colspan="5" class="text-center text-muted py-3">Loading…</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Register Pet Modal -->
<div class="modal fade" id="registerPetModal" tabindex="-1" aria-labelledby="registerPetLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark border-secondary">
            <div class="modal-header border-secondary">
                <h6 class="modal-title" id="registerPetLabel">
                    <i class="bi bi-plus-circle me-2"></i>Register Pet
                </h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="register-pet-form">
                    <div class="mb-3">
                        <label class="form-label small">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-sm bg-dark text-light border-secondary"
                               id="pet-name" name="name" required placeholder="e.g. Mochi">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small">Species <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm bg-dark text-light border-secondary"
                                id="pet-species" name="species" required>
                            <option value="">Select…</option>
                            <option value="cat">Cat</option>
                            <option value="dog">Dog</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small">Breed <span class="text-muted">(optional)</span></label>
                        <input type="text" class="form-control form-control-sm bg-dark text-light border-secondary"
                               id="pet-breed" name="breed" placeholder="e.g. Tabby">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small">Color / Description <span class="text-muted">(optional)</span></label>
                        <input type="text" class="form-control form-control-sm bg-dark text-light border-secondary"
                               id="pet-color" name="color_description" placeholder="e.g. orange with white socks">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small">Upload Photos <span class="text-muted">(optional)</span></label>
                        <input type="file" class="form-control form-control-sm bg-dark text-light border-secondary"
                               id="pet-photos" name="photos" accept="image/*" multiple>
                        <div class="form-text text-muted small">Upload clear photos to improve detection accuracy.</div>
                    </div>
                    <div id="register-error" class="alert alert-danger py-2 small d-none"></div>
                </form>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btn-register-submit">
                    <i class="bi bi-check-lg me-1"></i>Register
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Label crop modal -->
<div class="modal fade" id="labelModal" tabindex="-1" aria-labelledby="labelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content bg-dark border-secondary">
            <div class="modal-header border-secondary">
                <h6 class="modal-title" id="labelModalLabel">Label Detection</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="label-crop-img" src="" alt="Detection crop"
                     class="img-fluid rounded mb-3" style="max-height:200px;">
                <div class="d-grid gap-2" id="label-pet-buttons">
                    <!-- Populated by JS -->
                </div>
                <button class="btn btn-sm btn-outline-secondary mt-2 w-100" id="btn-label-unknown">
                    Not a registered pet
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

    const PET_SPECIES_ICON = { cat: '🐈\u200d⬛', dog: '🐕' };
    const THREAT_COLORS = { low: 'success', medium: 'warning', high: 'danger' };

    // ---- pet status -------------------------------------------------------
    function relativeTime(isoStr) {
        if (!isoStr) return '—';
        const diff = Math.floor((Date.now() - new Date(isoStr)) / 1000);
        if (diff < 60) return `${diff}s ago`;
        if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
        if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
        return new Date(isoStr).toLocaleDateString();
    }

    function statusBadgeClass(status) {
        if (!status) return 'bg-secondary';
        const s = status.toLowerCase();
        if (s === 'safe' || s === 'interior') return 'bg-success';
        if (s === 'check' || s === 'transition') return 'bg-warning text-dark';
        if (s === 'alert' || s === 'exterior') return 'bg-danger';
        return 'bg-secondary';
    }

    function loadPetStatus() {
        fetch('/pets/api/status')
            .then(r => r.ok ? r.json() : Promise.reject(r.status))
            .then(data => {
                (data.pets || []).forEach(pet => {
                    const badge = document.getElementById('status-' + pet.id);
                    const loc   = document.getElementById('loc-'    + pet.id);
                    const seen  = document.getElementById('seen-'   + pet.id);
                    if (badge) {
                        badge.className = 'badge pet-status-badge ' + statusBadgeClass(pet.status);
                        badge.innerHTML = `<i class="bi bi-circle-fill me-1"></i>${pet.status || '—'}`;
                    }
                    if (loc)  loc.textContent  = pet.last_camera || '—';
                    if (seen) seen.textContent = relativeTime(pet.last_seen);
                });
            })
            .catch(() => {});
    }

    // ---- wildlife summary -------------------------------------------------
    function loadWildlife() {
        fetch('/pets/api/wildlife')
            .then(r => r.ok ? r.json() : Promise.reject(r.status))
            .then(data => {
                const bar = document.getElementById('wildlife-summary');
                const upd = document.getElementById('wildlife-updated');
                const counts = {};
                (data.sightings || []).forEach(s => {
                    const key = s.species || 'unknown';
                    if (!counts[key]) counts[key] = { total: 0, tier: s.threat_tier || 'low' };
                    counts[key].total++;
                });
                if (Object.keys(counts).length === 0) {
                    bar.innerHTML = '<span class="text-muted small">No wildlife detected today</span>';
                } else {
                    bar.innerHTML = Object.entries(counts).map(([sp, v]) =>
                        `<span class="badge bg-${THREAT_COLORS[v.tier] || 'secondary'}">
                            ${sp} <span class="fw-bold">${v.total}</span>
                        </span>`
                    ).join('');
                }
                upd.textContent = 'Updated ' + new Date().toLocaleTimeString();
            })
            .catch(() => {
                document.getElementById('wildlife-summary').innerHTML =
                    '<span class="text-muted small">Unavailable</span>';
            });
    }

    // ---- activity timeline ------------------------------------------------
    function loadActivityTimeline() {
        fetch('/pets/api/sightings')
            .then(r => r.ok ? r.json() : Promise.reject(r.status))
            .then(data => {
                const sightings = data.sightings || [];
                document.querySelectorAll('.activity-canvas').forEach(canvas => {
                    const petId = canvas.dataset.petId;
                    const petSightings = sightings.filter(s => String(s.pet_id) === String(petId));
                    drawActivityBar(canvas, petSightings);
                });
            })
            .catch(() => {});
    }

    function drawActivityBar(canvas, sightings) {
        const ctx = canvas.getContext('2d');
        const W = canvas.offsetWidth || 400;
        const H = canvas.offsetHeight || 20;
        canvas.width  = W;
        canvas.height = H;
        ctx.clearRect(0, 0, W, H);

        const now = new Date();
        const dayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
        const dayMs = 86400000;

        sightings.forEach(s => {
            const t = new Date(s.ts).getTime();
            const x = Math.floor(((t - dayStart) / dayMs) * W);
            const w = Math.max(2, Math.floor(((s.duration_s || 60) * 1000 / dayMs) * W));
            ctx.fillStyle = s.location === 'exterior' ? '#dc3545' :
                            s.location === 'transition' ? '#ffc107' : '#198754';
            ctx.fillRect(x, 1, w, H - 2);
        });
    }

    // ---- unlabeled crops --------------------------------------------------
    let pendingLabelCropId = null;

    function loadUnlabeled() {
        fetch('/pets/api/unlabeled')
            .then(r => r.ok ? r.json() : Promise.reject(r.status))
            .then(data => {
                const crops = data.crops || [];
                const grid  = document.getElementById('unlabeled-grid');
                const badge = document.getElementById('unlabeled-count');
                badge.textContent = crops.length;

                if (crops.length === 0) {
                    grid.innerHTML = '<div class="col-12 text-muted small text-center py-2">No unlabeled detections</div>';
                    return;
                }

                grid.innerHTML = crops.map(crop =>
                    `<div class="col-6 col-sm-4 col-md-3 col-lg-2">
                        <div class="card bg-dark border-secondary h-100 crop-thumb" data-crop-id="${crop.id}"
                             style="cursor:pointer;" data-img="${crop.thumb_url || ''}">
                            <img src="${crop.thumb_url || ''}" class="card-img-top" alt="Detection crop"
                                 style="object-fit:cover;height:80px;"
                                 onerror="this.src='/static/img/no-preview.svg'">
                            <div class="card-body p-1 small text-muted text-center">
                                ${crop.camera_id || '?'}<br>
                                <span class="x-small">${relativeTime(crop.ts)}</span>
                            </div>
                        </div>
                    </div>`
                ).join('');

                grid.querySelectorAll('.crop-thumb').forEach(el => {
                    el.addEventListener('click', () => openLabelModal(el.dataset.cropId, el.dataset.img));
                });
            })
            .catch(() => {
                document.getElementById('unlabeled-grid').innerHTML =
                    '<div class="col-12 text-muted small text-center py-2">Unavailable</div>';
            });
    }

    function openLabelModal(cropId, imgUrl) {
        pendingLabelCropId = cropId;
        document.getElementById('label-crop-img').src = imgUrl;

        const btnContainer = document.getElementById('label-pet-buttons');
        const petCards = document.querySelectorAll('.pet-card');
        btnContainer.innerHTML = '';
        petCards.forEach(card => {
            const petId = card.dataset.petId;
            const name  = card.querySelector('.fw-semibold')?.textContent?.trim() || petId;
            const btn   = document.createElement('button');
            btn.className = 'btn btn-sm btn-outline-primary w-100';
            btn.textContent = name;
            btn.addEventListener('click', () => submitLabel(petId));
            btnContainer.appendChild(btn);
        });

        if (petCards.length === 0) {
            btnContainer.innerHTML = '<p class="text-muted small">No pets registered.</p>';
        }

        bootstrap.Modal.getOrCreateInstance(document.getElementById('labelModal')).show();
    }

    function submitLabel(petId) {
        if (!pendingLabelCropId) return;
        fetch(`/pets/${pendingLabelCropId}/label`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ sighting_id: pendingLabelCropId, pet_id: petId }),
        }).finally(() => {
            bootstrap.Modal.getOrCreateInstance(document.getElementById('labelModal')).hide();
            loadUnlabeled();
        });
    }

    document.getElementById('btn-label-unknown')?.addEventListener('click', () => {
        submitLabel(null);
    });

    // ---- highlights -------------------------------------------------------
    function loadHighlights() {
        fetch('/pets/api/highlights')
            .then(r => r.ok ? r.json() : Promise.reject(r.status))
            .then(data => {
                const list = document.getElementById('highlights-list');
                const rows = data.highlights || [];
                if (rows.length === 0) {
                    list.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">No highlights yet today</td></tr>';
                    return;
                }
                list.innerHTML = rows.map(h =>
                    `<tr>
                        <td>${h.pet_name || '—'}</td>
                        <td>${h.camera_id || '—'}</td>
                        <td>${relativeTime(h.ts)}</td>
                        <td>${h.description || '—'}</td>
                        <td>
                            ${h.recording_id
                                ? `<a href="/recordings/${h.recording_id}/download"
                                      class="btn btn-sm btn-outline-light" title="Download">
                                       <i class="bi bi-play-circle"></i>
                                   </a>`
                                : ''}
                        </td>
                    </tr>`
                ).join('');
            })
            .catch(() => {
                document.getElementById('highlights-list').innerHTML =
                    '<tr><td colspan="5" class="text-center text-muted py-3">Unavailable</td></tr>';
            });
    }

    // ---- register pet form ------------------------------------------------
    document.getElementById('btn-register-submit').addEventListener('click', () => {
        const form = document.getElementById('register-pet-form');
        const errBox = document.getElementById('register-error');
        errBox.classList.add('d-none');

        const name    = document.getElementById('pet-name').value.trim();
        const species = document.getElementById('pet-species').value;
        if (!name || !species) {
            errBox.textContent = 'Name and species are required.';
            errBox.classList.remove('d-none');
            return;
        }

        const body = { name, species };
        const breed = document.getElementById('pet-breed').value.trim();
        const color = document.getElementById('pet-color').value.trim();
        if (breed) body.breed = breed;
        if (color) body.color_description = color;

        fetch('/pets/register', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
        })
            .then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e.error || 'Error')))
            .then(() => {
                bootstrap.Modal.getOrCreateInstance(document.getElementById('registerPetModal')).hide();
                form.reset();
                window.location.reload();
            })
            .catch(err => {
                errBox.textContent = typeof err === 'string' ? err : 'Registration failed.';
                errBox.classList.remove('d-none');
            });
    });

    // ---- train model button -----------------------------------------------
    document.getElementById('btn-train').addEventListener('click', () => {
        const btn = document.getElementById('btn-train');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Training…';
        fetch('/pets/train', { method: 'POST' })
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(() => {
                btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>Queued';
                setTimeout(() => {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-cpu me-1"></i>Train Model';
                }, 3000);
            })
            .catch(() => {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-cpu me-1"></i>Train Model';
            });
    });

    // ---- initial load + polling ------------------------------------------
    function refreshAll() {
        loadPetStatus();
        loadWildlife();
        loadActivityTimeline();
        loadUnlabeled();
        loadHighlights();
    }

    refreshAll();
    setInterval(refreshAll, 30000);
})();
</script>
{% endblock %}