<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uploaded Images</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { background:#f4f7fc; font-family:'Inter',sans-serif; color:#0a2540; }

        .topbar {
            background:#fff; border-bottom:1px solid #e2e8f0;
            padding:14px 28px; display:flex; align-items:center;
            justify-content:space-between; position:sticky; top:0; z-index:100;
            box-shadow:0 2px 8px rgba(0,0,0,0.04);
        }
        .topbar-title { font-size:18px; font-weight:800; color:#0f172a; }
        .topbar-right { display:flex; align-items:center; gap:12px; }
        .back-btn {
            padding:8px 18px; border-radius:40px; border:1.5px solid #cbd5e1;
            background:#fff; font-weight:600; font-size:13px; cursor:pointer;
            text-decoration:none; color:#334155; transition:all 0.2s;
        }
        .back-btn:hover { background:#f1f5f9; border-color:#94a3b8; }
        .logout-btn {
            padding:8px 18px; border-radius:40px; border:1.5px solid rgba(239,68,68,0.3);
            background:#fee2e2; color:#dc2626; font-weight:700; font-size:13px;
            cursor:pointer; transition:all 0.2s;
        }
        .logout-btn:hover { background:#fecaca; }

        .main { max-width:1200px; margin:0 auto; padding:28px 24px; }

        .page-head { margin-bottom:24px; }
        .page-head h1 { font-size:1.8rem; font-weight:800; color:#0f172a; }
        .page-head p { color:#64748b; font-size:14px; margin-top:4px; }

        /* Controls */
        .controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
        .ctrl-left { font-size:14px; font-weight:600; color:#475569; }
        .ctrl-right { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#475569; }
        .ctrl-right select { padding:7px 12px; border:1.5px solid #cbd5e1; border-radius:10px; background:#fff; font-size:13px; cursor:pointer; }

        /* Day block */
        .day-block { border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; margin-bottom:16px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
        .day-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; background:linear-gradient(135deg,#0f2b3d,#1b5e7a); user-select:none; }
        .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:#fff; width:24px; text-align:center; }
        .day-title { font-size:15px; font-weight:700; color:#fff; }
        .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:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; }
        .day-body { display:none; }
        .day-body.open { display:block; }

        /* Event */
        .event-section { border-top:1px solid #f1f5f9; }
        .event-section:first-child { border-top:none; }
        .event-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px 12px 32px; cursor:pointer; background:#f8fafc; 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; }
        .event-name { font-size:14px; font-weight:700; color:#0f2b3d; }
        .event-count { font-size:12px; color:#64748b; background:#e2e8f0; padding:3px 10px; border-radius:12px; font-weight:600; }
        .event-images { display:none; padding:16px 20px 16px 32px; }
        .event-images.open { display:block; }

        /* 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; }
        .img-slno { font-size:13px; font-weight:700; color:#94a3b8; }
        .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); }
        .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; }
        .img-user-avatar:hover { border-color:#2c7da0; transform:scale(1.08); }
        .img-no-match { font-size:12px; color:#cbd5e1; font-style:italic; }
        .event-empty { padding:20px; color:#94a3b8; font-size:13px; font-style:italic; }

        /* Pagination */
        .pagination { display:flex; gap:8px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
        .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; }
        .page-link:hover { background:#f8fafc; border-color:#2c7da0; }
        .page-link.active { background:#0f2b3d; border-color:#0f2b3d; color:#fff; }
        .page-footer { text-align:center; padding:12px 0 4px; font-size:13px; color:#64748b; }

        /* Empty */
        .no-data { text-align:center; padding:60px 20px; color:#94a3b8; }
        .no-data p:first-child { font-size:18px; margin-bottom:8px; }
        .no-data p:last-child { font-size:14px; }

        /* Lightbox */
        .lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:2000; align-items:center; justify-content:center; }
        .lightbox.active { display:flex; }
        .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; }
        .lb-close:hover { background:rgba(255,255,255,0.3); }
        .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); }
    </style>
</head>
<body>

<div class="topbar">
    <div class="topbar-title">📸 Uploaded Images</div>
    <div class="topbar-right">
        <a href="/upload" class="back-btn">← Back to Upload</a>
        <form method="post" action="/logout" id="logoutForm" style="display:none;"></form>
        <button class="logout-btn" onclick="document.getElementById('logoutForm').submit()">Logout</button>
    </div>
</div>

<div class="main">
    <div class="page-head">
        <h1>Uploaded Images</h1>
        <p>All event images grouped by day and session</p>
    </div>

    <div class="controls">
        <span class="ctrl-left">Showing {{ days_data|length }} of {{ total_days }} days</span>
        <form method="GET" action="/photographer/images" class="ctrl-right">
            <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">
            <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 }}</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>
            <div class="day-body" id="day-{{ day.day_num }}">
                {% for event in day.events %}
                <div class="event-section">
                    <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-count">{{ event.count }} image{{ 's' if event.count != 1 }}</span>
                    </div>
                    <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>
                                <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>
                                <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 %}

        {% if total_pages > 1 %}
        <div class="pagination">
            {% if page > 1 %}<a href="/photographer/images?page={{ page-1 }}&limit={{ limit }}" class="page-link">&laquo; Prev</a>{% endif %}
            {% for p in range(1, total_pages+1) %}
                {% if p == page %}<span class="page-link active">{{ p }}</span>
                {% elif p <= 2 or p > total_pages-2 or (p >= page-1 and p <= page+1) %}<a href="/photographer/images?page={{ p }}&limit={{ limit }}" class="page-link">{{ p }}</a>
                {% endif %}
            {% endfor %}
            {% if page < total_pages %}<a href="/photographer/images?page={{ page+1 }}&limit={{ limit }}" class="page-link">Next &raquo;</a>{% endif %}
        </div>
        {% endif %}
        <div class="page-footer">Page {{ page }} of {{ total_pages }} ({{ total_days }} total days)</div>

    {% else %}
    <div class="no-data">
        <p>No day events found</p>
        <p>Add day events first, then upload images via the Upload page.</p>
    </div>
    {% endif %}
</div>

<!-- Lightbox -->
<div id="lightbox" class="lightbox">
    <button class="lb-close" onclick="closeLightbox()">&times;</button>
    <img id="lbImg" class="lb-img" src="" alt="">
</div>

<script>
    function toggleDay(id) {
        const body = document.getElementById(id);
        const toggle = document.getElementById(id + '-toggle');
        if(!body) return;
        const open = body.classList.contains('open');
        body.classList.toggle('open', !open);
        toggle.textContent = open ? '+' : '−';
    }
    function toggleEvent(id) {
        const grid = document.getElementById(id);
        const toggle = document.getElementById(id + '-toggle');
        if(!grid) return;
        const open = grid.classList.contains('open');
        grid.classList.toggle('open', !open);
        toggle.textContent = open ? '+' : '−';
    }
    function openLightbox(url, caption) {
        if(!url) return;
        document.getElementById('lbImg').src = url;
        document.getElementById('lightbox').classList.add('active');
    }
    function closeLightbox() {
        document.getElementById('lightbox').classList.remove('active');
        document.getElementById('lbImg').src = '';
    }
    document.getElementById('lightbox').addEventListener('click', function(e) { if(e.target===this) closeLightbox(); });
    document.addEventListener('keydown', e => { if(e.key==='Escape') closeLightbox(); });
</script>
</body>
</html>