{% extends "base.html" %}
{% block title %}Uploaded Images{% endblock %}
{% block page_id %}uploaded-images{% endblock %}
{% block page_title %}Uploaded Images{% endblock %}
{% block eyebrow %}Camera Man{% endblock %}

{% block head %}
<style>
    /* Controls */
    .ui-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
    .ui-show { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#475569; }
    .ui-show select { padding:8px 12px; border:1.5px solid #cbd5e1; border-radius:10px; background:#fff; font-size:14px; cursor:pointer; }
    .ui-total { font-size:14px; font-weight:600; color:#475569; }

    /* Day block */
    .day-block { border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; margin-bottom:16px; background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,0.04); }

    /* Day header */
    .day-header {
        display:flex; align-items:center; justify-content:space-between;
        padding:14px 20px; cursor:pointer;
        background:linear-gradient(135deg,#0f2b3d,#1b5e7a);
        user-select:none; transition:all 0.2s;
    }
    .day-header:hover { background:linear-gradient(135deg,#1b5e7a,#2c7da0); }
    .day-header-left { display:flex; align-items:center; gap:12px; }
    .day-toggle { font-size:18px; font-weight:700; color:#ffffff; width:24px; text-align:center; flex-shrink:0; transition:transform 0.2s; }
    .day-title { font-size:15px; font-weight:700; color:#ffffff; }
    .day-meta { font-size:12px; color:rgba(255,255,255,0.7); margin-top:2px; }
    .day-badge { background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); color:#ffffff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; white-space:nowrap; }

    /* Day body */
    .day-body { display:none; padding:0; }
    .day-body.open { display:block; }

    /* Event section */
    .event-section { border-top:1px solid #f1f5f9; }
    .event-section:first-child { border-top:none; }

    /* Event header */
    .event-header {
        display:flex; align-items:center; justify-content:space-between;
        padding:12px 20px 12px 32px; cursor:pointer;
        background:#f8fafc; transition:background 0.2s;
        user-select:none;
    }
    .event-header:hover { background:#f0f7ff; }
    .event-header-left { display:flex; align-items:center; gap:10px; }
    .event-toggle { font-size:14px; color:#2c7da0; width:18px; flex-shrink:0; }
    .event-name { font-size:14px; font-weight:700; color:#0f2b3d; }
    .event-img-count { font-size:12px; color:#64748b; background:#e2e8f0; padding:3px 10px; border-radius:12px; font-weight:600; }

    /* Event images grid */
    .event-images { display:none; padding:16px 20px 16px 32px; background:#ffffff; }
    .event-images.open { display:block; }

    /* Image table */
    .img-table { width:100%; border-collapse:collapse; }
    .img-table thead tr { background:#f1f5f9; border-bottom:2px solid #e2e8f0; }
    .img-table th { padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#475569; text-align:left; }
    .img-table td { padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
    .img-table tbody tr:last-child td { border-bottom:none; }
    .img-table tbody tr:hover td { background:#f8fafc; }

    /* Sl No */
    .img-slno { font-size:13px; font-weight:700; color:#94a3b8; width:48px; }

    /* Event image */
    .img-thumb {
        width:80px; height:80px; border-radius:10px; object-fit:cover;
        border:2px solid #e2e8f0; cursor:pointer; transition:all 0.2s;
        display:block;
    }
    .img-thumb:hover { border-color:#2c7da0; transform:scale(1.05); }

    /* Matched users cell - photos only */
    .img-user-cell { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
    .img-user-avatar {
        width:52px; height:52px; border-radius:50%; object-fit:cover;
        border:2px solid #cbd5e1; cursor:pointer; transition:all 0.2s; flex-shrink:0;
    }
    .img-user-avatar:hover { border-color:#2c7da0; transform:scale(1.08); box-shadow:0 4px 12px rgba(44,125,160,0.3); }
    .img-no-match { font-size:12px; color:#cbd5e1; font-style:italic; }

    /* Empty state */
    .event-empty { padding:20px 32px; color:#94a3b8; font-size:13px; font-style:italic; }

    /* Pagination */
    .ui-pagination { display:flex; gap:8px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
    .ui-page-link { padding:9px 16px; border:1.5px solid #cbd5e1; border-radius:10px; background:#fff; color:#334155; text-decoration:none; font-size:14px; font-weight:600; transition:all 0.2s; }
    .ui-page-link:hover { background:#f8fafc; border-color:#2c7da0; }
    .ui-page-link.active { background:#0f2b3d; border-color:#0f2b3d; color:#fff; }
    .ui-footer { text-align:center; padding:12px 0 4px; font-size:13px; color:#64748b; }

    /* Lightbox */
    .ui-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:2000; align-items:center; justify-content:center; }
    .ui-lightbox.active { display:flex; }
    .ui-lb-close { position:fixed; top:20px; right:20px; background:rgba(255,255,255,0.15); border:1.5px solid rgba(255,255,255,0.3); color:#fff; font-size:22px; width:42px; height:42px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2003; }
    .ui-lb-close:hover { background:rgba(255,255,255,0.3); }
    .ui-lb-img { max-width:85vw; max-height:80vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
    .ui-lb-caption { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.8); font-size:13px; font-weight:600; background:rgba(0,0,0,0.4); padding:8px 20px; border-radius:20px; white-space:nowrap; }

    @media (max-width:640px) {
        .img-thumb { width:70px; height:70px; }
        .day-header { padding:12px 14px; }
        .event-header { padding:10px 14px 10px 20px; }
        .event-images { padding:12px 14px 12px 20px; }
    }
</style>
{% endblock %}

{% block content %}
<section class="panel-stack">
    <article class="glass-card panel-card">
        <div class="panel-header">
            <div>
                <p class="eyebrow">Camera Man</p>
                <h3>Uploaded Images</h3>
            </div>
            <span class="pill">{{ total_days }} days</span>
        </div>

        <div class="panel-body">
            <!-- Controls -->
            <div class="ui-controls">
                <span class="ui-total">Showing {{ days_data|length }} of {{ total_days }} days</span>
                <form method="GET" action="{{ url_for('admin.uploaded_images_page') }}" class="ui-show">
                    <label>Days per page</label>
                    <select name="limit" onchange="this.form.submit()">
                        <option value="10" {% if limit==10 %}selected{% endif %}>10</option>
                        <option value="25" {% if limit==25 %}selected{% endif %}>25</option>
                        <option value="50" {% if limit==50 %}selected{% endif %}>50</option>
                    </select>
                    <input type="hidden" name="page" value="1">
                </form>
            </div>

            {% if days_data %}
                {% for day in days_data %}
                <div class="day-block">
                    <!-- Day Header (click to expand/collapse) -->
                    <div class="day-header" onclick="toggleDay('day-{{ day.day_num }}')">
                        <div class="day-header-left">
                            <span class="day-toggle" id="day-{{ day.day_num }}-toggle">+</span>
                            <div>
                                <div class="day-title">Day {{ day.day_num }}{% if day.date %} &nbsp;·&nbsp; {{ day.date }}{% endif %}</div>
                                <div class="day-meta">{{ day.events|length }} event{{ 's' if day.events|length != 1 }} &nbsp;·&nbsp; {{ day.total_images }} image{{ 's' if day.total_images != 1 }}</div>
                            </div>
                        </div>
                        <span class="day-badge">{{ day.total_images }} imgs</span>
                    </div>

                    <!-- Day Body -->
                    <div class="day-body" id="day-{{ day.day_num }}">
                        {% for event in day.events %}
                        <div class="event-section">
                            <!-- Event Header -->
                            <div class="event-header" onclick="toggleEvent('event-{{ day.day_num }}-{{ loop.index0 }}')">
                                <div class="event-header-left">
                                    <span class="event-toggle" id="event-{{ day.day_num }}-{{ loop.index0 }}-toggle">+</span>
                                    <span class="event-name">{{ event.name }}</span>
                                </div>
                                <span class="event-img-count">{{ event.count }} image{{ 's' if event.count != 1 }}</span>
                            </div>

                            <!-- Event Images -->
                            <div class="event-images" id="event-{{ day.day_num }}-{{ loop.index0 }}">
                                {% if event.images %}
                                <table class="img-table">
                                    <thead>
                                        <tr>
                                            <th style="width:48px;">No</th>
                                            <th>Event Image</th>
                                            <th>Matched User</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for img in event.images %}
                                    <tr>
                                        <td class="img-slno">{{ loop.index }}</td>

                                        <!-- Event image -->
                                        <td>
                                            <img
                                                class="img-thumb"
                                                src="{{ img.original_url or img.processed_url }}"
                                                alt="Event image"
                                                onerror="this.src='/admin/static/no photo.png'"
                                                onclick="openLightbox('{{ img.original_url or img.processed_url }}', '{{ event.name }}', '')">
                                        </td>

                                        <!-- Matched users - photos only -->
                                        <td>
                                            {% if img.matched_users %}
                                            <div class="img-user-cell">
                                                {% for mu in img.matched_users %}
                                                <img
                                                    class="img-user-avatar"
                                                    src="{{ mu.user_photo or '/admin/static/no photo.png' }}"
                                                    alt="Matched user"
                                                    onerror="this.src='/admin/static/no photo.png'"
                                                    onclick="openLightbox('{{ mu.user_photo or '/admin/static/no photo.png' }}', 'Matched User', '')">
                                                {% endfor %}
                                            </div>
                                            {% else %}
                                            <span class="img-no-match">No match found</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                {% else %}
                                <div class="event-empty">No images uploaded for this event yet.</div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}

                <!-- Pagination -->
                {% if total_pages > 1 %}
                <div class="ui-pagination">
                    {% if page > 1 %}
                        <a href="{{ url_for('admin.uploaded_images_page', page=page-1, limit=limit) }}" class="ui-page-link">&laquo; Prev</a>
                    {% endif %}
                    {% for p in range(1, total_pages+1) %}
                        {% if p == page %}
                            <span class="ui-page-link active">{{ p }}</span>
                        {% elif p <= 2 or p > total_pages-2 or (p >= page-1 and p <= page+1) %}
                            <a href="{{ url_for('admin.uploaded_images_page', page=p, limit=limit) }}" class="ui-page-link">{{ p }}</a>
                        {% endif %}
                    {% endfor %}
                    {% if page < total_pages %}
                        <a href="{{ url_for('admin.uploaded_images_page', page=page+1, limit=limit) }}" class="ui-page-link">Next &raquo;</a>
                    {% endif %}
                </div>
                {% endif %}

                <div class="ui-footer">Showing page {{ page }} of {{ total_pages }} ({{ total_days }} total days)</div>

            {% else %}
            <div style="text-align:center;padding:60px 20px;color:#94a3b8;">
                <p style="font-size:18px;margin-bottom:8px;">No day events found</p>
                <p style="font-size:14px;">Add day events first, then upload images via the Upload page.</p>
            </div>
            {% endif %}
        </div>
    </article>
</section>

<!-- LIGHTBOX -->
<div id="uiLightbox" class="ui-lightbox">
    <button class="ui-lb-close" onclick="closeLightbox()">&times;</button>
    <img id="uiLbImg" class="ui-lb-img" src="" alt="">
    <div id="uiLbCaption" class="ui-lb-caption"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // ── Day expand/collapse ───────────────────────────────────────────────
    function toggleDay(id) {
        const body   = document.getElementById(id);
        const toggle = document.getElementById(id + '-toggle');
        if (!body) return;
        const isOpen = body.classList.contains('open');
        body.classList.toggle('open', !isOpen);
        toggle.textContent = isOpen ? '+' : '−';
    }

    // ── Event expand/collapse ─────────────────────────────────────────────
    function toggleEvent(id) {
        const grid   = document.getElementById(id);
        const toggle = document.getElementById(id + '-toggle');
        if (!grid) return;
        const isOpen = grid.classList.contains('open');
        grid.classList.toggle('open', !isOpen);
        toggle.textContent = isOpen ? '+' : '−';
    }

    // ── Lightbox ──────────────────────────────────────────────────────────
    function openLightbox(url, eventName, userName) {
        if (!url) return;
        document.getElementById('uiLbImg').src = url;
        const cap = [eventName, userName].filter(Boolean).join(' — ');
        document.getElementById('uiLbCaption').textContent = cap;
        document.getElementById('uiLightbox').classList.add('active');
    }

    function closeLightbox() {
        document.getElementById('uiLightbox').classList.remove('active');
        document.getElementById('uiLbImg').src = '';
    }

    document.getElementById('uiLightbox').addEventListener('click', function(e) {
        if (e.target === this) closeLightbox();
    });

    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') closeLightbox();
    });
</script>
{% endblock %}