script.js

'use strict';

/* ── Constants ───────────────────────────────────────────── */
const DEFAULT_CATEGORIES = [
    { name: 'Arts & Entertainment', slug: 'arts-entertainment', color: '#7c4ea8' },
    { name: 'Community & Civic',    slug: 'community-civic',    color: '#1e5c9a' },
    { name: 'Food & Markets',       slug: 'food-markets',       color: '#b86018' },
    { name: 'Sports & Recreation',  slug: 'sports-recreation',  color: '#2a7a42' },
];

let categoriesCache = [...DEFAULT_CATEGORIES];

/** @returns {{ name: string, slug: string, color: string }[]} */
function loadCategories() {
    return categoriesCache;
}

function saveCategories(cats) {
    categoriesCache = cats;
    fetch(`${API_BASE}/api/categories`, {
        method:  'PUT',
        headers: {
            'Content-Type':     'application/json',
            'X-Admin-Password': sessionStorage.getItem('albionAdminPw') || '',
        },
        body: JSON.stringify(cats),
    }).catch(e => console.error('[API] saveCategories failed:', e));
}

/** @returns {Object.<string,string>} name → slug */
function getCategorySlugs() {
    return Object.fromEntries(loadCategories().map(c => [c.name, c.slug]));
}

/** @returns {Object.<string,string>} name → color */
function getCategoryColors() {
    return Object.fromEntries(loadCategories().map(c => [c.name, c.color]));
}

// Keep module-level aliases updated via functions so existing call sites work
const CATEGORY_SLUGS = new Proxy({}, { get: (_, k) => getCategorySlugs()[k] });
const CAT_COLORS     = new Proxy({}, { get: (_, k) => getCategoryColors()[k] });

function slugify(name) {
    return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
}

function randomCatColor() {
    const colors = ['#7c4ea8','#1e5c9a','#b86018','#2a7a42','#b84444','#2a6e7a','#7a6a2a','#a85e7c'];
    return colors[Math.floor(Math.random() * colors.length)];
}

function rebuildCategoryUI() {
    const cats = loadCategories();

    // Rebuild filter nav buttons (keep All + Near Me + Print)
    const nav = document.querySelector('.filter-inner');
    nav.querySelectorAll('.filter-btn[data-cat-slug]:not([data-cat-slug="all"])').forEach(b => b.remove());
    const divider  = nav.querySelector('.filter-divider');
    cats.forEach(cat => {
        const btn = document.createElement('button');
        btn.className = 'filter-btn';
        btn.dataset.catSlug = cat.slug;
        btn.textContent = cat.name;
        nav.insertBefore(btn, divider);
    });
    if (currentCategory !== 'all' && !cats.find(c => c.slug === currentCategory)) {
        currentCategory = 'all';
        nav.querySelector('[data-cat-slug="all"]').classList.add('active');
    }

    // Rebuild form category select
    const sel = document.getElementById('event-category');
    const current = sel.value;
    sel.innerHTML = cats.map(c =>
        `<option value="${c.name}"${c.name === current ? ' selected' : ''}>${c.name}</option>`
    ).join('');

    // Rebuild admin category manager if open
    renderAdminCategoryManager();
}

function renderAdminCategoryManager() {
    const container = document.getElementById('admin-category-manager');
    if (!container) return;
    const cats = loadCategories();
    container.innerHTML = `
        <div class="admin-cat-list">
            ${cats.map(c => `
            <div class="admin-cat-row">
                <span class="admin-cat-dot" style="background:${c.color}"></span>
                <span class="admin-cat-name">${sanitize(c.name)}</span>
                ${DEFAULT_CATEGORIES.find(d => d.slug === c.slug) ? '' :
                    `<button class="btn-admin-del-cat" data-slug="${c.slug}" aria-label="Remove category">&#10005;</button>`}
            </div>`).join('')}
        </div>
        <div class="admin-cat-add">
            <input type="text" id="admin-new-cat-name" placeholder="New category name\u2026" class="admin-cat-input">
            <input type="color" id="admin-new-cat-color" value="#2a7a42" class="admin-cat-color-pick" title="Pick a color">
            <button id="btn-admin-add-cat" class="btn-admin-action">Add</button>
        </div>`;
}

const defaultEvents = [
    {
        id: 1,
        name: "Farmers Market",
        date: "2026-04-05",
        time: "08:00",
        location: "Town Square, Albion IN",
        description: "Weekly farmers market with fresh local produce, baked goods, and handmade crafts from Noble County farmers and artisans.",
        category: "Food & Markets",
        organizer: "albionfarmers@example.com",
        recurring: "weekly",
        featured: true,
        status: "active",
        going: 14, maybe: 6, went: 0,
        comments: ["Can't wait for the strawberries this season!", "Will the honey vendor be there?"],
        image: null,
    },
    {
        id: 2,
        name: "Spring Town Hall Meeting",
        date: "2026-04-08",
        time: "19:00",
        location: "Albion Town Hall, 101 N Orange St",
        description: "Quarterly town hall open to all residents. Agenda includes road improvements on SR-9, park renovation updates, and plans for a community garden.",
        category: "Community & Civic",
        organizer: "townhall@albion.in.gov",
        recurring: "none",
        featured: true,
        status: "active",
        going: 22, maybe: 8, went: 0,
        comments: [],
        image: null,
    },
    {
        id: 3,
        name: "Albion Parks 5K Fun Run",
        date: "2026-04-12",
        time: "09:00",
        location: "Albion City Park",
        description: "Annual 5K fun run through the park. All ages welcome — walkers included. Pre-registration appreciated but walk-ins accepted at the trailhead.",
        category: "Sports & Recreation",
        organizer: "parks@albion.in.gov",
        recurring: "none",
        featured: false,
        status: "active",
        going: 31, maybe: 12, went: 0,
        comments: ["Is there a kids division?", "Will there be water stations along the route?"],
        image: null,
    },
    {
        id: 4,
        name: "Noble County Art Show",
        date: "2026-04-18",
        time: "10:00",
        location: "Albion Public Library, 108 W Main St",
        description: "Annual juried art show featuring works by Noble County artists. Opening reception Friday 5–7 PM. Free admission all weekend.",
        category: "Arts & Entertainment",
        organizer: "artshow@albionlibrary.org",
        recurring: "none",
        featured: false,
        status: "active",
        going: 18, maybe: 9, went: 0,
        comments: [],
        image: null,
    },
    {
        id: 5,
        name: "Spring Softball League",
        date: "2026-04-03",
        time: "18:00",
        location: "Albion Athletic Complex",
        description: "Spring recreational softball league — season runs April through June. Games every Friday evening. All skill levels welcome.",
        category: "Sports & Recreation",
        organizer: "softball@albion.com",
        recurring: "weekly",
        featured: false,
        status: "active",
        going: 24, maybe: 5, went: 0,
        comments: ["Go Tigers!"],
        image: null,
    },
    {
        id: 6,
        name: "Easter Egg Hunt",
        date: "2026-04-04",
        time: "10:00",
        location: "City Park, Albion IN",
        description: "Annual Easter egg hunt for children ages 2–12. Bring a basket! New date TBD — follow the Albion Parks Facebook page for updates.",
        category: "Community & Civic",
        organizer: "community@albion.in.gov",
        recurring: "none",
        featured: false,
        status: "postponed",
        going: 0, maybe: 0, went: 0,
        comments: [],
        image: null,
    },
];

/* ── API ─────────────────────────────────────────────────── */
const API_BASE = ''; // same origin — Worker handles /api/* routes

/* ── State ───────────────────────────────────────────────── */
let currentQuery    = '';
let currentCategory = 'all';
let currentView     = 'list'; // 'list' | 'calendar'
let calendarYear    = new Date().getFullYear();
let calendarMonth   = new Date().getMonth();
let map             = null;
let mapLoaded       = false;
let modalMap        = null;
let nearMeActive    = false;
let userLocation    = null;
let pastEventsOpen  = false;
let eventsPage = 1;
const PAGE_SIZE = 12;
let editingEventId  = null;

/* ── Geocoding ───────────────────────────────────────────── */
let geocodeCache   = {};
let geocodeQueue   = [];
let geocodeRunning = false;

function loadGeoCache() {
    try { geocodeCache = JSON.parse(localStorage.getItem('albionGeoCache') || '{}'); }
    catch (e) { geocodeCache = {}; }
}

function saveGeoCache() {
    try { localStorage.setItem('albionGeoCache', JSON.stringify(geocodeCache)); }
    catch (e) { /* quota exceeded — ignore */ }
}

function geocodeAddress(address, callback) {
    if (!address) { callback(null); return; }
    if (geocodeCache[address]) { callback(geocodeCache[address]); return; }
    geocodeQueue.push({ address, callback });
    if (!geocodeRunning) processGeocodeQueue();
}

function processGeocodeQueue() {
    if (geocodeQueue.length === 0) { geocodeRunning = false; return; }
    geocodeRunning = true;
    const { address, callback } = geocodeQueue.shift();
    const url = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address + ', Noble County, Indiana')}&format=json&limit=1`;
    fetch(url)
        .then(r => r.json())
        .then(data => {
            const coords = data && data.length > 0
                ? { lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon) }
                : null;
            if (coords) {
                geocodeCache[address] = coords;
                saveGeoCache();
            }
            callback(coords);
        })
        .catch(() => callback(null))
        .finally(() => setTimeout(processGeocodeQueue, 1200)); // Nominatim: max 1 req/sec
}

/* ── Helpers ─────────────────────────────────────────────── */
function sanitize(str) {
    const el = document.createElement('div');
    el.textContent = String(str == null ? '' : str);
    return el.innerHTML;
}

/** @param {string} raw @returns {string} safe HTML with basic markdown */
function renderMarkdown(raw) {
    if (!raw) return '';
    const esc = raw
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
    const withInline = esc
        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.+?)\*/g, '<em>$1</em>')
        .replace(/\[([^\]]{1,200})\]\((https?:\/\/[^)\s]{1,500})\)/g,
            '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
    // List items
    const withLists = withInline.replace(/^[-•]\s(.+)$/gm, '<li>$1</li>');
    const withUl    = withLists.replace(/(<li>.*?)(?=\n(?!<li>)|$)/gs,
        (m) => m.endsWith('</li>') ? m : m);
    // Wrap consecutive li blocks
    const wrapped = withUl.replace(/(<li>[\s\S]*?<\/li>)(?:\n(<li>[\s\S]*?<\/li>))*/g,
        m => `<ul>${m}</ul>`);
    // Paragraphs
    return wrapped
        .split(/\n{2,}/)
        .map(b => b.trim())
        .filter(Boolean)
        .map(b => (b.startsWith('<ul>') || b.startsWith('<li>')) ? b : `<p>${b.replace(/\n/g, '<br>')}</p>`)
        .join('');
}

function formatDate(dateStr, timeStr) {
    const dt = new Date(dateStr + 'T' + (timeStr || '00:00') + ':00');
    const datePart = dt.toLocaleDateString('en-US', {
        weekday: 'short', month: 'short', day: 'numeric', year: 'numeric'
    });
    if (!timeStr) return datePart;
    const timePart = dt.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
    return `${datePart} \u00b7 ${timePart}`;
}

function haversineDistance(lat1, lon1, lat2, lon2) {
    const R = 3959; // miles
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = Math.sin(dLat / 2) ** 2
        + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) ** 2;
    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}

/* ── ICS Generation ──────────────────────────────────────── */
function generateICS(event, reminderMinutes = 1440) {
    const pad   = n => String(n).padStart(2, '0');
    const esc   = s => (s || '').replace(/[\\;,]/g, '\\$&').replace(/\n/g, '\\n');
    const [y, m, d] = event.date.split('-');
    const [hh, mm]  = (event.time || '00:00').split(':');
    const startDt   = `${y}${m}${d}T${hh}${mm}00`;
    const eParts    = (event.endTime || '').split(':').filter(Boolean);
    const endHour   = eParts[0] || pad((parseInt(hh, 10) + 1) % 24);
    const endMin    = eParts[1] || mm;
    const endDt     = `${y}${m}${d}T${endHour}${endMin}00`;

    const alarm = reminderMinutes > 0 ? [
        'BEGIN:VALARM',
        `TRIGGER:-PT${reminderMinutes}M`,
        'ACTION:DISPLAY',
        `DESCRIPTION:Reminder: ${esc(event.name)}`,
        'END:VALARM',
    ].join('\r\n') : '';

    const lines = [
        'BEGIN:VCALENDAR',
        'VERSION:2.0',
        'PRODID:-//Albion Community Events//EN',
        'BEGIN:VEVENT',
        `DTSTART:${startDt}`,
        `DTEND:${endDt}`,
        `SUMMARY:${esc(event.name)}`,
        `DESCRIPTION:${esc(event.description)}`,
        `LOCATION:${esc(event.location)}`,
    ];
    if (alarm) lines.push(alarm);
    lines.push('END:VEVENT', 'END:VCALENDAR');

    const blob = new Blob([lines.join('\r\n')], { type: 'text/calendar;charset=utf-8' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href     = url;
    a.download = `${(event.name || 'event').replace(/\s+/g, '_')}.ics`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

/** @param {Object} event @returns {string} Google Calendar URL */
function buildGoogleCalURL(event) {
    const pad   = n => String(n).padStart(2, '0');
    const [y, m, d]   = event.date.split('-');
    const [hh, mm]    = (event.time    || '00:00').split(':');
    const eParts      = (event.endTime || '').split(':').filter(Boolean);
    const endH  = eParts[0] || pad((parseInt(hh, 10) + 1) % 24);
    const endM  = eParts[1] || mm;
    const start = `${y}${m}${d}T${hh}${mm}00`;
    const end   = `${y}${m}${d}T${endH}${endM}00`;
    const p = new URLSearchParams({
        action:   'TEMPLATE',
        text:     event.name        || '',
        dates:    `${start}/${end}`,
        details:  event.description || '',
        location: event.location    || '',
    });
    return `https://calendar.google.com/calendar/render?${p.toString()}`;
}

/* ── Share Image (Canvas) ────────────────────────────────── */
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
    const words = String(text).split(' ');
    let line = '';
    for (const word of words) {
        const test = line ? line + ' ' + word : word;
        if (ctx.measureText(test).width > maxWidth && line) {
            ctx.fillText(line, x, y);
            line = word;
            y += lineHeight;
        } else {
            line = test;
        }
    }
    ctx.fillText(line, x, y);
    return y + lineHeight;
}

function generateShareImage(event) {
    const canvas = document.createElement('canvas');
    canvas.width  = 1200;
    canvas.height = 630;
    const ctx = canvas.getContext('2d');

    const color = CAT_COLORS[event.category] || '#2c4a30';

    // Background gradient
    const grad = ctx.createLinearGradient(0, 0, 1200, 630);
    grad.addColorStop(0, color);
    grad.addColorStop(1, '#1a2e1c');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 1200, 630);

    // Subtle overlay pattern (horizontal lines)
    ctx.fillStyle = 'rgba(255,255,255,0.03)';
    for (let i = 0; i < 630; i += 12) ctx.fillRect(0, i, 1200, 6);

    // Category pill
    const pillText = (event.category || '').toUpperCase();
    ctx.font = 'bold 18px Inter, -apple-system, sans-serif';
    const pillW = ctx.measureText(pillText).width + 32;
    ctx.fillStyle = 'rgba(255,255,255,0.18)';
    ctx.beginPath();
    ctx.roundRect(60, 60, pillW, 36, 18);
    ctx.fill();
    ctx.fillStyle = '#ffffff';
    ctx.fillText(pillText, 76, 84);

    // Featured star
    if (event.featured) {
        ctx.font = 'bold 18px Inter, sans-serif';
        ctx.fillStyle = '#f0c060';
        ctx.fillText('\u2605 FEATURED', pillW + 80, 84);
    }

    // Event name
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 66px Lora, Georgia, serif';
    const titleY = wrapText(ctx, event.name || '', 60, 165, 1080, 78);

    // Date
    ctx.fillStyle = 'rgba(255,255,255,0.85)';
    ctx.font = '30px Inter, sans-serif';
    ctx.fillText(formatDate(event.date, event.time), 60, Math.max(titleY + 10, 320));

    // Location
    if (event.location) {
        ctx.fillStyle = 'rgba(255,255,255,0.65)';
        ctx.font = '26px Inter, sans-serif';
        ctx.fillText(event.location, 60, Math.max(titleY + 55, 365));
    }

    // Footer bar
    ctx.fillStyle = 'rgba(0,0,0,0.25)';
    ctx.fillRect(0, 570, 1200, 60);
    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.font = '20px Inter, sans-serif';
    ctx.fillText('Albion, Indiana \u2014 Community Events Board', 60, 606);

    canvas.toBlob(blob => {
        const filename = `${(event.name || 'event').replace(/\s+/g, '_')}_share.png`;
        if (navigator.canShare && navigator.canShare({ files: [new File([blob], filename, { type: 'image/png' })] })) {
            navigator.share({ files: [new File([blob], filename, { type: 'image/png' })] }).catch(() => {});
        } else {
            const url = URL.createObjectURL(blob);
            const a   = document.createElement('a');
            a.href    = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    }, 'image/png');
}

/* ── Image Resize ────────────────────────────────────────── */
function resizeImage(file, maxWidth, callback) {
    const reader = new FileReader();
    reader.onload = e => {
        const img = new Image();
        img.onload = () => {
            const scale  = Math.min(1, maxWidth / img.width);
            const canvas = document.createElement('canvas');
            canvas.width  = img.width * scale;
            canvas.height = img.height * scale;
            canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
            callback(canvas.toDataURL('image/jpeg', 0.78));
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

/* ── Creator Tokens ──────────────────────────────────────── */
function getCreatorToken(id) {
    try {
        const tokens = JSON.parse(localStorage.getItem('albionCreatorTokens') || '{}');
        return tokens[String(id)] || null;
    } catch { return null; }
}

function saveCreatorToken(id, token) {
    try {
        const tokens = JSON.parse(localStorage.getItem('albionCreatorTokens') || '{}');
        tokens[String(id)] = token;
        localStorage.setItem('albionCreatorTokens', JSON.stringify(tokens));
    } catch {}
}

function isCreator(id) {
    return !!getCreatorToken(id);
}

/* ── Events Cache + API ──────────────────────────────────── */
let eventsCache        = [];
let pendingEventsCache = [];

function loadEvents() { return eventsCache; }

async function refreshEvents() {
    try {
        const r = await fetch(`${API_BASE}/api/events`);
        if (r.ok) eventsCache = await r.json();
    } catch (e) { console.error('[API] refreshEvents failed:', e); }
}

async function refreshPendingEvents() {
    if (!isAdminMode()) { pendingEventsCache = []; return; }
    try {
        const r = await fetch(`${API_BASE}/api/events/pending`, {
            headers: { 'X-Admin-Password': sessionStorage.getItem('albionAdminPw') || '' },
        });
        pendingEventsCache = r.ok ? await r.json() : [];
    } catch { pendingEventsCache = []; }
}

async function refreshCategories() {
    try {
        const r = await fetch(`${API_BASE}/api/categories`);
        if (r.ok) categoriesCache = await r.json();
    } catch (e) { console.error('[API] refreshCategories failed:', e); }
}

/* ── Weather ─────────────────────────────────────────────── */
const ALBION_LAT = 41.3959;
const ALBION_LNG = -85.4258;

/** @type {Object|null} */
let weatherData = null;

/** @param {number} code @returns {{emoji:string,label:string}} */
function wmoCodeInfo(code) {
    const map = {
        0:  ['☀️','Clear'],    1:  ['🌤️','Mainly clear'],  2:  ['⛅','Partly cloudy'],
        3:  ['☁️','Overcast'], 45: ['🌫️','Fog'],           48: ['🌫️','Icy fog'],
        51: ['🌦️','Drizzle'],  53: ['🌦️','Drizzle'],       55: ['🌧️','Heavy drizzle'],
        61: ['🌧️','Rain'],     63: ['🌧️','Rain'],           65: ['🌧️','Heavy rain'],
        71: ['❄️','Snow'],     73: ['❄️','Snow'],            75: ['❄️','Heavy snow'],
        77: ['🌨️','Snow grains'], 80: ['🌦️','Showers'],   81: ['🌧️','Showers'],
        82: ['🌧️','Heavy showers'], 85: ['🌨️','Snow showers'], 86: ['🌨️','Snow showers'],
        95: ['⛈️','Thunderstorm'], 96: ['⛈️','Thunderstorm'], 99: ['⛈️','Thunderstorm'],
    };
    const entry = map[code] || ['🌡️','Weather'];
    return { emoji: entry[0], label: entry[1] };
}

async function fetchWeather() {
    const key = 'albionWeatherV1';
    const cached = sessionStorage.getItem(key);
    if (cached) { weatherData = JSON.parse(cached); return weatherData; }
    try {
        const url = `https://api.open-meteo.com/v1/forecast?latitude=${ALBION_LAT}&longitude=${ALBION_LNG}&daily=weather_code,temperature_2m_max,temperature_2m_min&temperature_unit=fahrenheit&timezone=America%2FIndiana%2FIndianapolis&forecast_days=16`;
        const r = await fetch(url);
        weatherData = await r.json();
        sessionStorage.setItem(key, JSON.stringify(weatherData));
    } catch (e) { weatherData = null; }
    return weatherData;
}

function injectWeather() {
    if (!weatherData?.daily) return;
    const { time, weather_code, temperature_2m_max, temperature_2m_min } = weatherData.daily;
    const byDate = {};
    time.forEach((d, i) => {
        byDate[d] = {
            code: weather_code[i],
            max:  Math.round(temperature_2m_max[i]),
            min:  Math.round(temperature_2m_min[i]),
        };
    });
    document.querySelectorAll('.event-card[data-event-date]').forEach(card => {
        const w = byDate[card.dataset.eventDate];
        const badge = card.querySelector('.weather-badge');
        if (!w || !badge) return;
        const { emoji } = wmoCodeInfo(w.code);
        badge.innerHTML = `<span class="weather-icon">${emoji}</span><span class="weather-temp">${w.max}°<span class="weather-temp-low">/${w.min}°F</span></span>`;
        badge.hidden = false;
    });
}

function isAdminMode() {
    return sessionStorage.getItem('albionAdminSession') === '1';
}

function setAdminMode(on) {
    if (on) {
        sessionStorage.setItem('albionAdminSession', '1');
    } else {
        sessionStorage.removeItem('albionAdminSession');
        sessionStorage.removeItem('albionAdminPw');
        pendingEventsCache = [];
    }
}

function adminHeaders(extra = {}) {
    return {
        'X-Admin-Password': sessionStorage.getItem('albionAdminPw') || '',
        ...extra,
    };
}

/* ── Dark Mode ───────────────────────────────────────────── */
function applyDarkMode(dark) {
    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
    localStorage.setItem('albionDarkMode', dark ? '1' : '0');
    const btn = document.getElementById('btn-dark-mode');
    if (btn) {
        btn.innerHTML = dark ? '&#9728;' : '&#9790;';
        btn.title = dark ? 'Switch to light mode' : 'Switch to dark mode';
    }
}

function toggleDarkMode() {
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    applyDarkMode(!isDark);
}

/* ── Data Processing ─────────────────────────────────────── */
const today = new Date(new Date().toDateString()); // midnight local

// Advance a date by one recurring interval
function advanceDate(date, recurring) {
    const d = new Date(date);
    if (recurring === 'weekly')  d.setDate(d.getDate() + 7);
    else                         d.setMonth(d.getMonth() + 1);
    return d;
}

// Next upcoming instance of a recurring event (or the event itself if still future)
function getNextInstance(event) {
    let date = new Date(event.date + 'T00:00:00');
    if (date >= today) return event; // original date is still upcoming
    while (date < today) date = advanceDate(date, event.recurring);
    const dateStr = date.toISOString().split('T')[0];
    return { ...event, date: dateStr, _instanceDate: dateStr };
}

// Most recent past instance of a recurring event
function getLastPastInstance(event) {
    let date = new Date(event.date + 'T00:00:00');
    if (date >= today) return null;
    let last = date;
    while (true) {
        const next = advanceDate(date, event.recurring);
        if (next >= today) break;
        last = next;
        date = next;
    }
    const dateStr = last.toISOString().split('T')[0];
    return { ...event, date: dateStr, _instanceDate: dateStr };
}

// All instances of a recurring event within a given month (for calendar)
function getInstancesInMonth(event, year, month) {
    const until = new Date(Date.now() + 366 * 24 * 60 * 60 * 1000);
    const results = [];
    let date = new Date(event.date + 'T00:00:00');

    // Fast-forward to start of target month if needed
    const monthStart = new Date(year, month, 1);
    while (date < monthStart) date = advanceDate(date, event.recurring);

    const monthEnd = new Date(year, month + 1, 1);
    while (date < monthEnd && date < until) {
        const dateStr = date.toISOString().split('T')[0];
        results.push({ ...event, date: dateStr, _instanceDate: dateStr });
        date = advanceDate(date, event.recurring);
    }
    return results;
}

// List view: one entry per event (next occurrence for recurring)
function getAllEvents() {
    const events = loadEvents();
    const all = [];
    events.forEach(ev => {
        if (ev.recurring && ev.recurring !== 'none') {
            const next = getNextInstance(ev);
            if (next) all.push(next);
        } else {
            all.push(ev);
        }
    });
    return all;
}

// Calendar view: all instances within the given month
function getAllEventsForMonth(year, month) {
    const events = loadEvents();
    const all = [];
    const seen = new Set();
    events.forEach(ev => {
        if (ev.recurring && ev.recurring !== 'none') {
            getInstancesInMonth(ev, year, month).forEach(inst => {
                const key = `${inst.id}-${inst.date}`;
                if (!seen.has(key)) { seen.add(key); all.push(inst); }
            });
        } else {
            const d = new Date(ev.date + 'T00:00:00');
            if (d.getFullYear() === year && d.getMonth() === month) all.push(ev);
        }
    });
    return all;
}

function getUpcomingEvents() {
    return getAllEvents().filter(ev => new Date(ev.date + 'T00:00:00') >= today);
}

function getPastEvents() {
    const events = loadEvents();
    const past = [];
    events.forEach(ev => {
        if (ev.recurring && ev.recurring !== 'none') {
            const last = getLastPastInstance(ev);
            if (last) past.push(last);
        } else {
            if (new Date(ev.date + 'T00:00:00') < today) past.push(ev);
        }
    });
    return past.sort((a, b) => new Date(b.date) - new Date(a.date)).slice(0, 10);
}

function sortEvents(events) {
    if (nearMeActive && userLocation) {
        return [...events].sort((a, b) => {
            const ca = geocodeCache[a.location];
            const cb = geocodeCache[b.location];
            const da = ca ? haversineDistance(userLocation.lat, userLocation.lng, ca.lat, ca.lng) : Infinity;
            const db = cb ? haversineDistance(userLocation.lat, userLocation.lng, cb.lat, cb.lng) : Infinity;
            return da - db;
        });
    }
    return [...events].sort((a, b) => {
        if (a.featured && !b.featured) return -1;
        if (!a.featured && b.featured) return 1;
        return new Date(a.date) - new Date(b.date);
    });
}

function getFilteredEvents() {
    const upcoming = getUpcomingEvents();
    const filtered = upcoming.filter(ev => {
        const q = currentQuery.toLowerCase();
        const matchSearch = !q
            || ev.name.toLowerCase().includes(q)
            || (ev.description || '').toLowerCase().includes(q)
            || ev.category.toLowerCase().includes(q)
            || (ev.location || '').toLowerCase().includes(q);
        const matchCat = currentCategory === 'all'
            || CATEGORY_SLUGS[ev.category] === currentCategory;
        return matchSearch && matchCat;
    });
    return sortEvents(filtered);
}

/* ── Rendering ───────────────────────────────────────────── */
function renderEventCard(event) {
    const catSlug   = CATEGORY_SLUGS[event.category] || 'community-civic';
    const domId     = event._instanceDate ? `${event.id}-${event._instanceDate}` : String(event.id);
    const baseId    = event.id;
    const comments     = event.comments || [];
    const commentCount = comments.length;
    const creatorControls = !isAdminMode() && isCreator(baseId) ? `
        <div class="creator-controls">
            <button class="btn-creator-edit" data-id="${baseId}">&#9998; Edit your event</button>
        </div>` : '';

    let distanceBadge = '';
    if (nearMeActive && userLocation && geocodeCache[event.location]) {
        const coords = geocodeCache[event.location];
        const d = haversineDistance(userLocation.lat, userLocation.lng, coords.lat, coords.lng);
        distanceBadge = `<span class="distance-badge">${d < 10 ? d.toFixed(1) : Math.round(d)} mi</span>`;
    }

    const adminControls = isAdminMode() ? `
        <div class="admin-controls">
            <span class="admin-label">Admin:</span>
            <div class="admin-status-group">
                <button class="btn-admin-set-status${event.status === 'active'    ? ' current-status' : ''}" data-id="${baseId}" data-status="active">Active</button>
                <button class="btn-admin-set-status${event.status === 'postponed' ? ' current-status' : ''}" data-id="${baseId}" data-status="postponed">Postpone</button>
                <button class="btn-admin-set-status${event.status === 'cancelled' ? ' current-status' : ''}" data-id="${baseId}" data-status="cancelled">Cancel</button>
            </div>
            <button class="btn-admin-action btn-admin-toggle-featured" data-id="${baseId}">${event.featured ? '&#9733; Unpin' : '&#9734; Pin'}</button>
            <button class="btn-admin-action btn-admin-delete" data-id="${baseId}">Delete</button>
        </div>` : '';

    const commentsHtml = comments.map(c => {
        if (typeof c === 'string') return `<div class="comment"><span class="comment-anon">Anonymous</span> ${sanitize(c)}</div>`;
        return `<div class="comment"><span class="comment-author">${sanitize(c.name || 'Anonymous')}</span> ${sanitize(c.text)}</div>`;
    }).join('');

    const dateDisplay = event.endTime
        ? `${sanitize(formatDate(event.date, event.time))} – ${sanitize(formatTime(event.endTime))}`
        : sanitize(formatDate(event.date, event.time));

    return `
<article class="event-card${event.featured ? ' featured' : ''}${event.status !== 'active' ? ' status-' + event.status : ''}" data-cat-slug="${catSlug}" data-event-date="${event.date}">
  <div class="card-inner">
    ${adminControls}
    ${creatorControls}
    ${event.image ? `<img src="${event.image}" class="event-image" alt="${sanitize(event.name)}" loading="lazy">` : ''}
    <div class="card-top">
      <div class="card-badges">
        <span class="cat-pill">${sanitize(event.category)}</span>
        ${event.recurring !== 'none' ? `<span class="recurring-tag">${event.recurring === 'weekly' ? 'Weekly' : 'Monthly'}</span>` : ''}
        ${event.featured ? `<span class="featured-tag">&#9733; Featured</span>` : ''}
        ${distanceBadge}
        <div class="weather-badge" hidden></div>
      </div>
      <span class="event-date-str">${dateDisplay}</span>
    </div>
    <h3 class="event-title" data-modal-id="${baseId}" tabindex="0" role="button" aria-label="View details for ${sanitize(event.name)}">${sanitize(event.name)}</h3>
    <div class="event-meta">
      ${event.location  ? `<span class="meta-item"><span class="meta-label">Where:</span> ${sanitize(event.location)}</span>` : ''}
      ${event.organizer ? `<span class="meta-item"><span class="meta-label">Contact:</span> ${sanitize(event.organizer)}</span>` : ''}
    </div>
    ${event.description ? `<div class="event-desc">${renderMarkdown(event.description)}</div>` : ''}
    ${event.status === 'cancelled' ? `<div class="status-banner status-cancelled">This event has been cancelled.</div>` : ''}
    ${event.status === 'postponed' ? `<div class="status-banner status-postponed">This event has been postponed \u2014 check back for updates.</div>` : ''}
    <div class="card-actions">
      <div class="attend-group">
        <button class="btn-attend going"  data-id="${baseId}">&#10003; Going <span class="attend-count">${event.going}</span></button>
        <button class="btn-attend maybe"  data-id="${baseId}">? Maybe <span class="attend-count">${event.maybe}</span></button>
        <button class="btn-attend went"   data-id="${baseId}">&#9733; I Went <span class="attend-count">${event.went}</span></button>
      </div>
      <div class="util-group">
        <button class="btn-util share"     data-id="${baseId}">Share</button>
        <button class="btn-util calendar"  data-id="${baseId}">+ ICS</button>
        <a class="btn-util gcal" href="${buildGoogleCalURL(event)}" target="_blank" rel="noopener">+ Google Cal</a>
        <button class="btn-util share-img" data-id="${baseId}">Get Image</button>
        <button class="btn-util report"    data-id="${baseId}">Report</button>
      </div>
    </div>
    <details class="comments-wrap">
      <summary class="comments-toggle">Comments (${commentCount})</summary>
      <div class="comments-list" id="comments-${domId}">${commentsHtml}</div>
      <div class="comment-row">
        <input type="text" class="comment-name-input" placeholder="Your name\u2026" aria-label="Your name">
        <div class="comment-row-inputs">
          <input type="text" class="comment-input" id="comment-input-${domId}"
                 placeholder="Add a comment\u2026" aria-label="Add a comment to ${sanitize(event.name)}">
          <button class="btn-post-comment add-comment" data-id="${baseId}" data-dom-id="${domId}">Post</button>
        </div>
      </div>
    </details>
  </div>
</article>`;
}

function displayEvents(events, resetPage = true) {
    const list     = document.getElementById('event-list');
    const noEvents = document.getElementById('no-events');
    const count    = document.getElementById('event-count');

    if (resetPage) eventsPage = 1;
    const visible = events.slice(0, eventsPage * PAGE_SIZE);
    const hasMore = events.length > visible.length;

    list.innerHTML = visible.length === 0 ? '' : visible.map(ev => renderEventCard(ev)).join('');

    let loadMoreRow = document.getElementById('load-more-row');
    if (hasMore) {
        if (!loadMoreRow) {
            loadMoreRow = document.createElement('div');
            loadMoreRow.id = 'load-more-row';
            loadMoreRow.className = 'load-more-row';
            list.after(loadMoreRow);
        }
        loadMoreRow.hidden = false;
        loadMoreRow.innerHTML = `<button class="btn-load-more" id="btn-load-more">Load more (${events.length - visible.length} remaining)</button>`;
        loadMoreRow.dataset.allIds = JSON.stringify(events.map(e => e.id));
    } else if (loadMoreRow) {
        loadMoreRow.hidden = true;
    }

    noEvents.hidden = events.length > 0;
    count.textContent = events.length > 0 ? `${events.length} event${events.length !== 1 ? 's' : ''}` : '';

    if (map) updateMap(events);

    if (!weatherData) {
        fetchWeather().then(() => injectWeather());
    } else {
        injectWeather();
    }
}

function displayPastEvents() {
    const past = getPastEvents();
    const sec  = document.getElementById('past-events-section');
    const list = document.getElementById('past-event-list');
    if (past.length === 0) { sec.hidden = true; return; }
    sec.hidden = false;
    list.innerHTML = past.map(ev => renderEventCard(ev, true)).join('');
}

function displayPendingEvents() {
    const sec   = document.getElementById('pending-section');
    const list  = document.getElementById('pending-list');
    const count = document.getElementById('pending-count');
    if (!sec) return;
    if (!isAdminMode() || pendingEventsCache.length === 0) {
        sec.hidden = true;
        return;
    }
    sec.hidden = false;
    if (count) count.textContent = `${pendingEventsCache.length} awaiting approval`;
    list.innerHTML = pendingEventsCache.map(ev => {
        const catSlug = CATEGORY_SLUGS[ev.category] || 'community-civic';
        return `
<article class="event-card pending-card" data-cat-slug="${catSlug}">
  <div class="card-inner">
    <div class="pending-badge">&#9679; Pending Review</div>
    <div class="card-top">
      <div class="card-badges">
        <span class="cat-pill">${sanitize(ev.category)}</span>
      </div>
      <span class="event-date-str">${sanitize(formatDate(ev.date, ev.time))}</span>
    </div>
    <h3 class="event-title-plain">${sanitize(ev.name)}</h3>
    <div class="event-meta">
      ${ev.location  ? `<span class="meta-item"><span class="meta-label">Where:</span> ${sanitize(ev.location)}</span>` : ''}
      ${ev.organizer ? `<span class="meta-item"><span class="meta-label">Contact:</span> ${sanitize(ev.organizer)}</span>` : ''}
    </div>
    ${ev.description ? `<div class="event-desc">${renderMarkdown(ev.description)}</div>` : ''}
    <div class="pending-actions">
      <button class="btn-approve-event" data-id="${ev.id}">&#10003; Approve</button>
      <button class="btn-reject-event"  data-id="${ev.id}">&#10005; Reject</button>
    </div>
  </div>
</article>`;
    }).join('');
}

function displayTodayBanner() {
    const banner   = document.getElementById('today-banner');
    if (!banner) return;
    const todayStr = new Date().toISOString().split('T')[0];
    const events   = getAllEvents().filter(ev => ev.date === todayStr && ev.status !== 'cancelled');
    if (events.length === 0) { banner.hidden = true; return; }
    banner.hidden = false;
    const rows = events.map(ev => {
        const color = getCategoryColors()[ev.category] || '#4f7c5a';
        return `<div class="today-event-row" data-modal-id="${ev.id}">
            <span class="today-event-dot" style="background:${color}"></span>
            <span class="today-event-name">${sanitize(ev.name)}</span>
            ${ev.time     ? `<span class="today-event-time">${formatTime(ev.time)}</span>` : ''}
            ${ev.location ? `<span class="today-event-loc">${sanitize(ev.location)}</span>` : ''}
        </div>`;
    }).join('');
    banner.innerHTML = `<div class="today-banner-heading">📌 Happening Today</div><div class="today-event-list">${rows}</div>`;
}

/* ── View Switching ──────────────────────────────────────── */
function switchView(view) {
    currentView = view;
    const listEl    = document.getElementById('event-list');
    const noEvents  = document.getElementById('no-events');
    const calView   = document.getElementById('calendar-view');
    const btnList   = document.getElementById('btn-view-list');
    const btnCal    = document.getElementById('btn-view-calendar');

    if (view === 'calendar') {
        listEl.hidden   = true;
        noEvents.hidden = true;
        calView.hidden  = false;
        btnList.classList.remove('active'); btnList.setAttribute('aria-pressed', 'false');
        btnCal.classList.add('active');     btnCal.setAttribute('aria-pressed', 'true');
        renderCalendar(calendarYear, calendarMonth);
    } else {
        calView.hidden = true;
        listEl.hidden  = false;
        btnList.classList.add('active');    btnList.setAttribute('aria-pressed', 'true');
        btnCal.classList.remove('active');  btnCal.setAttribute('aria-pressed', 'false');
        displayEvents(getFilteredEvents());
    }
}

/* ── Calendar Rendering ──────────────────────────────────── */
function renderCalendar(year, month) {
    const grid  = document.getElementById('calendar-grid');
    const label = document.getElementById('cal-month-label');
    if (!grid) return;

    label.textContent = new Date(year, month, 1)
        .toLocaleDateString('en-US', { month: 'long', year: 'numeric' });

    const monthEvents = getAllEventsForMonth(year, month);
    const q = currentQuery.toLowerCase();
    const filtered = monthEvents.filter(ev => {
        const matchSearch = !q
            || ev.name.toLowerCase().includes(q)
            || (ev.description || '').toLowerCase().includes(q)
            || ev.category.toLowerCase().includes(q);
        const matchCat = currentCategory === 'all' || CATEGORY_SLUGS[ev.category] === currentCategory;
        return matchSearch && matchCat;
    });

    const byDay = {};
    filtered.forEach(ev => {
        const d = new Date(ev.date + 'T00:00:00').getDate();
        (byDay[d] = byDay[d] || []).push(ev);
    });

    const firstDow    = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const todayObj    = new Date(new Date().toDateString());

    let html = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
        .map(d => `<div class="cal-day-header">${d}</div>`).join('');

    for (let i = 0; i < firstDow; i++) {
        html += `<div class="cal-cell cal-cell--empty"></div>`;
    }

    for (let day = 1; day <= daysInMonth; day++) {
        const isToday = new Date(year, month, day).getTime() === todayObj.getTime();
        const evs     = byDay[day] || [];
        const dateStr = `${year}-${String(month + 1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;

        const chips = evs.slice(0, 3).map(ev => {
            const color = CAT_COLORS[ev.category] || '#2c4a30';
            const time  = ev.time ? `<span class="cal-chip-time">${formatTime(ev.time)}</span>` : '';
            return `<div class="cal-event-chip" style="--chip-color:${color}" data-date="${dateStr}" tabindex="-1">${time}${sanitize(ev.name)}</div>`;
        }).join('');
        const more = evs.length > 3
            ? `<div class="cal-more-chip" data-date="${dateStr}">+${evs.length - 3} more</div>`
            : '';

        html += `
<div class="cal-cell${isToday ? ' cal-cell--today' : ''}${evs.length ? ' cal-cell--has-events' : ''}"
     data-date="${dateStr}" role="gridcell"
     ${evs.length ? `tabindex="0" aria-label="${day}, ${evs.length} event${evs.length !== 1 ? 's' : ''}"` : `aria-label="${day}"`}>
    <span class="cal-day-num">${day}</span>
    <div class="cal-chips">${chips}${more}</div>
</div>`;
    }

    grid.innerHTML = html;

    // Render upcoming list for this month below the grid
    renderCalendarUpcomingList(filtered.sort((a, b) => new Date(a.date) - new Date(b.date)));
}

function formatTime(timeStr) {
    if (!timeStr) return '';
    const [hh, mm] = timeStr.split(':');
    const h = parseInt(hh, 10);
    const suffix = h >= 12 ? 'pm' : 'am';
    const h12 = h % 12 || 12;
    return mm === '00' ? `${h12}${suffix}` : `${h12}:${mm}${suffix}`;
}

function renderCalendarUpcomingList(events) {
    let panel = document.getElementById('cal-upcoming-list');
    if (!panel) {
        panel = document.createElement('div');
        panel.id = 'cal-upcoming-list';
        panel.className = 'cal-upcoming-list';
        document.getElementById('calendar-view').appendChild(panel);
    }

    if (events.length === 0) {
        panel.innerHTML = '<p class="cal-upcoming-empty">No events this month.</p>';
        return;
    }

    let lastDate = '';
    const rows = events.map(ev => {
        const color   = CAT_COLORS[ev.category] || '#2c4a30';
        const dateObj = new Date(ev.date + 'T00:00:00');
        const dateLabel = dateObj.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
        const heading = ev.date !== lastDate
            ? `<div class="cal-list-date">${sanitize(dateLabel)}</div>`
            : '';
        lastDate = ev.date;
        return `${heading}<div class="cal-list-row" data-modal-id="${ev.id}">
            <span class="cal-list-dot" style="background:${color}"></span>
            <span class="cal-list-name">${sanitize(ev.name)}</span>
            ${ev.time ? `<span class="cal-list-time">${formatTime(ev.time)}</span>` : ''}
            ${ev.location ? `<span class="cal-list-loc">${sanitize(ev.location)}</span>` : ''}
        </div>`;
    }).join('');

    panel.innerHTML = `<h4 class="cal-upcoming-heading">Events This Month</h4>${rows}`;
}

function showCalendarDayPanel(dateStr) {
    const panel  = document.getElementById('calendar-day-panel');
    const date   = new Date(dateStr + 'T00:00:00');
    const label  = date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
    const events = getAllEventsForMonth(date.getFullYear(), date.getMonth())
        .filter(ev => ev.date === dateStr);

    if (events.length === 0) { panel.hidden = true; return; }

    panel.hidden = false;
    panel.innerHTML = `
        <div class="cal-day-panel-header">
            <h4>${sanitize(label)}</h4>
            <button class="btn-cal-panel-close" id="btn-cal-panel-close" aria-label="Close day panel">&times;</button>
        </div>
        ${events.map(ev => renderEventCard(ev)).join('')}`;
}

/* ── Map ─────────────────────────────────────────────────── */
function initMap() {
    map = L.map('map').setView([41.3959, -85.4258], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
    updateMap(getFilteredEvents());

    // Geocode all event locations in background for Near Me feature
    const events = loadEvents();
    events.forEach(ev => {
        if (ev.location && !geocodeCache[ev.location]) {
            geocodeAddress(ev.location, () => {});
        }
    });
}

function updateMap(events) {
    if (!map) return;
    map.eachLayer(layer => { if (layer instanceof L.Marker) map.removeLayer(layer); });
    const seen = {};
    events.forEach(ev => {
        if (!ev.location) return;
        seen[ev.location] = (seen[ev.location] || 0) + 1;
        const jitter = (seen[ev.location] - 1) * 0.0018;
        const coords = geocodeCache[ev.location];
        const lat = coords ? coords.lat : 41.3959 + jitter;
        const lng = coords ? coords.lng : -85.4258 + jitter;
        L.marker([lat, lng]).addTo(map)
            .bindPopup(`<strong>${ev.name}</strong><br>${formatDate(ev.date, ev.time)}<br>${ev.location}`);
    });
}

/* ── Event Detail Modal ──────────────────────────────────── */
function openEventModal(eventId) {
    const events = loadEvents();
    const event  = events.find(ev => String(ev.id) === String(eventId));
    if (!event) return;

    history.pushState({ albionEventId: String(eventId) }, '', `?event=${eventId}`);

    const content = document.getElementById('modal-content');
    content.innerHTML = `
        ${event.image ? `<img src="${event.image}" class="modal-event-image" alt="${sanitize(event.name)}">` : ''}
        <div class="card-badges" style="margin-bottom:0.6rem;">
            <span class="cat-pill">${sanitize(event.category)}</span>
            ${event.featured ? `<span class="featured-tag">&#9733; Featured</span>` : ''}
            ${event.status !== 'active' ? `<span class="status-banner status-${event.status}" style="display:inline-block;margin:0;">${sanitize(event.status.toUpperCase())}</span>` : ''}
        </div>
        <h2 class="modal-event-title" id="modal-event-title">${sanitize(event.name)}</h2>
        <div class="modal-event-meta">
            <div class="modal-meta-row"><strong>Date:</strong> ${event.endTime ? `${sanitize(formatDate(event.date, event.time))} – ${sanitize(formatTime(event.endTime))}` : sanitize(formatDate(event.date, event.time))}</div>
            ${event.location  ? `<div class="modal-meta-row"><strong>Where:</strong> ${sanitize(event.location)}</div>` : ''}
            ${event.organizer ? `<div class="modal-meta-row"><strong>Contact:</strong> ${sanitize(event.organizer)}</div>` : ''}
            ${event.recurring !== 'none' ? `<div class="modal-meta-row"><strong>Recurring:</strong> ${sanitize(event.recurring)}</div>` : ''}
        </div>
        ${event.description ? `<div class="modal-event-desc">${renderMarkdown(event.description)}</div>` : ''}
        <div class="modal-attendance">
            <div class="modal-attend-item"><span class="modal-attend-count">${event.going}</span><span class="modal-attend-label">Going</span></div>
            <div class="modal-attend-item"><span class="modal-attend-count">${event.maybe}</span><span class="modal-attend-label">Maybe</span></div>
            <div class="modal-attend-item"><span class="modal-attend-count">${event.went}</span><span class="modal-attend-label">Attended</span></div>
            <div class="modal-attend-item"><span class="modal-attend-count">${(event.comments || []).length}</span><span class="modal-attend-label">Comments</span></div>
        </div>`;

    const modal = document.getElementById('event-modal');
    modal.hidden = false;
    document.body.style.overflow = 'hidden';
    document.getElementById('modal-close-btn').focus();

    // Initialize modal map
    if (modalMap) { modalMap.remove(); modalMap = null; }
    const mapEl = document.getElementById('modal-map');
    mapEl.style.display = event.location ? '' : 'none';
    if (!event.location) return;

    setTimeout(() => {
        modalMap = L.map('modal-map').setView([41.3959, -85.4258], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(modalMap);
        geocodeAddress(event.location, coords => {
            if (!modalMap) return;
            const lat = coords ? coords.lat : 41.3959;
            const lng = coords ? coords.lng : -85.4258;
            modalMap.setView([lat, lng], coords ? 15 : 13);
            L.marker([lat, lng]).addTo(modalMap)
                .bindPopup(`<strong>${event.name}</strong><br>${event.location}`)
                .openPopup();
        });
    }, 80);
}

function closeEventModal() {
    if (window.location.search.includes('event=')) {
        history.pushState(null, '', window.location.pathname);
    }
    const modal = document.getElementById('event-modal');
    if (!modal.hidden) {
        modal.hidden = true;
        document.body.style.overflow = '';
        if (modalMap) { modalMap.remove(); modalMap = null; }
    }
}

/* ── Admin Modal ─────────────────────────────────────────── */
function openAdminModal() {
    const modal = document.getElementById('admin-modal');
    modal.hidden = false;
    document.body.style.overflow = 'hidden';
    updateAdminModalView();
}

function closeAdminModal() {
    document.getElementById('admin-modal').hidden = true;
    document.body.style.overflow = '';
}

function updateAdminModalView() {
    const loginView  = document.getElementById('admin-login-view');
    const activeView = document.getElementById('admin-active-view');
    const error      = document.getElementById('admin-error');

    loginView.hidden  = true;
    activeView.hidden = true;
    if (error) error.hidden = true;

    if (isAdminMode()) {
        activeView.hidden = false;
        renderAdminCategoryManager();
    } else {
        loginView.hidden = false;
        setTimeout(() => document.getElementById('admin-password-input')?.focus(), 50);
    }
}

async function doAdminLogin() {
    const pw  = document.getElementById('admin-password-input')?.value || '';
    const err = document.getElementById('admin-error');
    const btn = document.getElementById('btn-do-admin-login');
    if (btn) { btn.disabled = true; btn.textContent = 'Checking\u2026'; }
    try {
        const r = await fetch(`${API_BASE}/api/events/pending`, {
            headers: { 'X-Admin-Password': pw },
        });
        if (r.ok) {
            sessionStorage.setItem('albionAdminSession', '1');
            sessionStorage.setItem('albionAdminPw', pw);
            if (err) err.hidden = true;
            document.getElementById('admin-password-input').value = '';
            pendingEventsCache = await r.json();
            closeAdminModal();
            displayEvents(getFilteredEvents());
            displayPendingEvents();
            displayPastEvents();
            displayTodayBanner();
        } else {
            if (err) err.hidden = false;
        }
    } catch {
        if (err) err.hidden = false;
    } finally {
        if (btn) { btn.disabled = false; btn.textContent = 'Login'; }
    }
}

function doAdminLogout() {
    setAdminMode(false);
    closeAdminModal();
    displayEvents(getFilteredEvents());
    displayPendingEvents();
    displayPastEvents();
    displayTodayBanner();
}

/* ── Near Me ─────────────────────────────────────────────── */
function toggleNearMe() {
    const btn = document.getElementById('btn-near-me');
    if (nearMeActive) {
        nearMeActive = false;
        userLocation = null;
        btn.classList.remove('near-me-active');
        btn.innerHTML = '&#9906; Near Me';
        displayEvents(getFilteredEvents());
        return;
    }
    if (!navigator.geolocation) {
        alert('Geolocation is not supported by your browser.');
        return;
    }
    btn.textContent = 'Locating\u2026';
    navigator.geolocation.getCurrentPosition(
        pos => {
            userLocation  = { lat: pos.coords.latitude, lng: pos.coords.longitude };
            nearMeActive  = true;
            btn.classList.add('near-me-active');
            btn.innerHTML = '&#9906; Near Me &#10003;';
            // Trigger geocoding of all locations so distances can be calculated
            loadEvents().forEach(ev => {
                if (ev.location && !geocodeCache[ev.location]) {
                    geocodeAddress(ev.location, () => displayEvents(getFilteredEvents()));
                }
            });
            displayEvents(getFilteredEvents());
        },
        () => {
            btn.innerHTML = '&#9906; Near Me';
            alert('Could not get your location. Please allow location access and try again.');
        }
    );
}

/* ── Share Sheet ─────────────────────────────────────────── */
function openShareSheet(ev) {
    const base    = window.location.origin + window.location.pathname;
    const pageUrl = `${base}?event=${ev.id}`;
    const text    = `${ev.name} — ${formatDate(ev.date, ev.time)}${ev.location ? ' @ ' + ev.location : ''}`;
    const encodedUrl  = encodeURIComponent(pageUrl);
    const encodedText = encodeURIComponent(text);

    document.getElementById('share-sheet-title').textContent = ev.name;
    document.getElementById('share-facebook').href =
        `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&quote=${encodedText}`;
    document.getElementById('share-twitter').href =
        `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
    document.getElementById('share-whatsapp').href =
        `https://wa.me/?text=${encodeURIComponent(text + '\n' + pageUrl)}`;
    document.getElementById('share-linkedin').href =
        `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
    document.getElementById('share-email').href =
        `mailto:?subject=${encodeURIComponent(ev.name)}&body=${encodeURIComponent(text + '\n\n' + pageUrl)}`;
    document.getElementById('share-copy-label').textContent = 'Copy Link';

    document.getElementById('share-sheet').dataset.eventUrl = pageUrl;
    document.getElementById('share-sheet').classList.add('is-open');
    document.body.style.overflow = 'hidden';
}

function closeShareSheet() {
    document.getElementById('share-sheet').classList.remove('is-open');
    document.body.style.overflow = '';
}

/* ── Event Delegation ────────────────────────────────────── */
document.addEventListener('click', e => {
    // Today banner row
    const todayRow = e.target.closest('.today-event-row');
    if (todayRow?.dataset.modalId) { openEventModal(todayRow.dataset.modalId); return; }

    // Load more
    if (e.target.closest('#btn-load-more')) {
        eventsPage++;
        displayEvents(getFilteredEvents(), false);
        return;
    }

    // Header
    if (e.target.closest('#btn-dark-mode'))      { toggleDarkMode(); return; }
    if (e.target.closest('#btn-admin-toggle'))   { openAdminModal(); return; }
    if (e.target.closest('#btn-near-me'))        { toggleNearMe(); return; }
    if (e.target.closest('#btn-print'))          { window.print(); return; }

    // Event modal
    if (e.target.closest('#modal-close-btn'))    { closeEventModal(); return; }
    if (e.target.id === 'event-modal')           { closeEventModal(); return; }

    // Admin modal
    if (e.target.closest('#admin-modal-close'))       { closeAdminModal(); return; }
    if (e.target.id === 'admin-modal')                { closeAdminModal(); return; }
    if (e.target.closest('#btn-do-admin-login'))      { doAdminLogin(); return; }
    if (e.target.closest('#btn-admin-logout'))        { doAdminLogout(); return; }

    // View toggle
    if (e.target.closest('#btn-view-list'))     { switchView('list'); return; }
    if (e.target.closest('#btn-view-calendar')) { switchView('calendar'); return; }

    // Calendar navigation
    if (e.target.closest('#btn-cal-prev')) {
        calendarMonth--;
        if (calendarMonth < 0) { calendarMonth = 11; calendarYear--; }
        renderCalendar(calendarYear, calendarMonth);
        document.getElementById('calendar-day-panel').hidden = true;
        return;
    }
    if (e.target.closest('#btn-cal-next')) {
        calendarMonth++;
        if (calendarMonth > 11) { calendarMonth = 0; calendarYear++; }
        renderCalendar(calendarYear, calendarMonth);
        document.getElementById('calendar-day-panel').hidden = true;
        return;
    }

    // Calendar day cell
    const calCell = e.target.closest('.cal-cell--has-events');
    if (calCell) {
        document.querySelectorAll('.cal-cell.cal-selected').forEach(c => c.classList.remove('cal-selected'));
        calCell.classList.add('cal-selected');
        showCalendarDayPanel(calCell.dataset.date);
        return;
    }

    // Calendar day panel close
    if (e.target.closest('#btn-cal-panel-close')) {
        document.getElementById('calendar-day-panel').hidden = true;
        document.querySelectorAll('.cal-cell.cal-selected').forEach(c => c.classList.remove('cal-selected'));
        return;
    }

    // Category filter
    const filterBtn = e.target.closest('.filter-btn:not(#btn-near-me):not(#btn-print)');
    if (filterBtn && filterBtn.dataset.catSlug !== undefined) {
        document.querySelectorAll('.filter-btn[data-cat-slug]').forEach(b => b.classList.remove('active'));
        filterBtn.classList.add('active');
        currentCategory = filterBtn.dataset.catSlug;
        if (currentView === 'calendar') renderCalendar(calendarYear, calendarMonth);
        else displayEvents(getFilteredEvents());
        return;
    }

    // Past events toggle
    if (e.target.closest('#toggle-past-events')) {
        pastEventsOpen = !pastEventsOpen;
        const list = document.getElementById('past-event-list');
        const btn  = document.getElementById('toggle-past-events');
        list.hidden    = !pastEventsOpen;
        btn.innerHTML  = pastEventsOpen ? 'Hide &#9650;' : 'Show &#9656;';
        btn.setAttribute('aria-expanded', String(pastEventsOpen));
        return;
    }

    // Cancel edit mode
    if (e.target.closest('#btn-cancel-edit')) { exitEditMode(); return; }

    // Creator edit button
    const creatorEditBtn = e.target.closest('.btn-creator-edit');
    if (creatorEditBtn) { enterEditMode(creatorEditBtn.dataset.id); return; }

    // Calendar upcoming list row → open modal
    const calListRow = e.target.closest('.cal-list-row');
    if (calListRow && calListRow.dataset.modalId) { openEventModal(calListRow.dataset.modalId); return; }

    // Card title → open modal
    const titleLink = e.target.closest('.event-title');
    if (titleLink && titleLink.dataset.modalId) { openEventModal(titleLink.dataset.modalId); return; }

    // Attendance (optimistic update + fire API)
    const attendBtn = e.target.closest('.btn-attend');
    if (attendBtn) {
        const id    = attendBtn.dataset.id;
        const ev    = eventsCache.find(e => String(e.id) === String(id));
        if (!ev) return;
        const field = attendBtn.classList.contains('going') ? 'going'
                    : attendBtn.classList.contains('maybe') ? 'maybe' : 'went';
        ev[field]++;
        displayEvents(getFilteredEvents());
        displayPastEvents();
        fetch(`${API_BASE}/api/events/${id}/attend`, {
            method:  'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ field }),
        }).catch(err => console.error('[API] attend failed:', err));
        return;
    }

    // Share sheet
    const shareBtn = e.target.closest('.btn-util.share');
    if (shareBtn) {
        const ev = loadEvents().find(e => String(e.id) === String(shareBtn.dataset.id));
        if (ev) openShareSheet(ev);
        return;
    }

    // Share sheet close
    if (e.target.closest('#share-sheet-close') || e.target.id === 'share-sheet') {
        closeShareSheet();
        return;
    }

    // Share sheet copy button
    if (e.target.closest('#share-copy')) {
        const label = document.getElementById('share-copy-label');
        const url   = document.getElementById('share-sheet').dataset.eventUrl || window.location.href;
        navigator.clipboard.writeText(url).then(() => {
            label.textContent = 'Copied!';
            setTimeout(() => { label.textContent = 'Copy Link'; }, 2000);
        });
        return;
    }

    // Calendar
    const calBtn = e.target.closest('.btn-util.calendar');
    if (calBtn) {
        const ev = loadEvents().find(e => String(e.id) === String(calBtn.dataset.id));
        if (!ev) return;
        const reminderEl = document.getElementById('event-reminder');
        generateICS(ev, reminderEl ? parseInt(reminderEl.value, 10) : 1440);
        return;
    }

    // Share image
    const shareImgBtn = e.target.closest('.btn-util.share-img');
    if (shareImgBtn) {
        const ev = loadEvents().find(e => String(e.id) === String(shareImgBtn.dataset.id));
        if (!ev) return;
        generateShareImage(ev);
        return;
    }

    // Report
    const reportBtn = e.target.closest('.btn-util.report');
    if (reportBtn) {
        const ev = loadEvents().find(e => String(e.id) === String(reportBtn.dataset.id));
        if (!ev) return;
        const s = encodeURIComponent(`Report Event: ${ev.name}`);
        const b = encodeURIComponent(`Event: ${ev.name}\nDate: ${ev.date}\nLocation: ${ev.location}\n\nReason for report:\n`);
        window.location.href = `mailto:report@albion.in.gov?subject=${s}&body=${b}`;
        return;
    }

    // Add comment (optimistic update + fire API)
    const commentBtn = e.target.closest('.add-comment');
    if (commentBtn) {
        const domId     = commentBtn.dataset.domId;
        const input     = document.getElementById(`comment-input-${domId}`);
        const nameInput = input?.closest('.comment-row')?.querySelector('.comment-name-input');
        if (!input) return;
        const text = input.value.trim();
        if (!text) return;
        const name = nameInput?.value.trim() || '';
        const ev   = eventsCache.find(e => String(e.id) === String(commentBtn.dataset.id));
        if (!ev) return;
        ev.comments = ev.comments || [];
        ev.comments.push(name ? { name, text } : text);
        input.value = '';
        if (nameInput) nameInput.value = '';
        displayEvents(getFilteredEvents());
        displayPastEvents();
        fetch(`${API_BASE}/api/events/${commentBtn.dataset.id}/comment`, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ name, text }),
        }).catch(err => console.error('[API] comment failed:', err));
        return;
    }

    // Admin: approve pending
    const approveBtn = e.target.closest('.btn-approve-event');
    if (approveBtn && isAdminMode()) {
        (async () => {
            const r = await fetch(`${API_BASE}/api/events/${approveBtn.dataset.id}/approve`, {
                method: 'PATCH', headers: adminHeaders(),
            });
            if (r.ok) {
                await Promise.all([refreshEvents(), refreshPendingEvents()]);
                displayEvents(getFilteredEvents());
                displayPendingEvents();
                displayPastEvents();
            }
        })();
        return;
    }

    // Admin: reject pending
    const rejectBtn = e.target.closest('.btn-reject-event');
    if (rejectBtn && isAdminMode()) {
        if (!confirm('Reject and delete this submission?')) return;
        (async () => {
            const r = await fetch(`${API_BASE}/api/events/${rejectBtn.dataset.id}/reject`, {
                method: 'PATCH', headers: adminHeaders(),
            });
            if (r.ok) {
                await refreshPendingEvents();
                displayPendingEvents();
            }
        })();
        return;
    }

    // Admin: set status
    const adminStatusBtn = e.target.closest('.btn-admin-set-status');
    if (adminStatusBtn && isAdminMode()) {
        (async () => {
            const r = await fetch(`${API_BASE}/api/events/${adminStatusBtn.dataset.id}/status`, {
                method:  'PATCH',
                headers: adminHeaders({ 'Content-Type': 'application/json' }),
                body:    JSON.stringify({ status: adminStatusBtn.dataset.status }),
            });
            if (r.ok) {
                await refreshEvents();
                displayEvents(getFilteredEvents());
                displayPastEvents();
            }
        })();
        return;
    }

    // Admin: toggle featured
    const adminFeatBtn = e.target.closest('.btn-admin-toggle-featured');
    if (adminFeatBtn && isAdminMode()) {
        (async () => {
            const r = await fetch(`${API_BASE}/api/events/${adminFeatBtn.dataset.id}/featured`, {
                method: 'PATCH', headers: adminHeaders(),
            });
            if (r.ok) {
                await refreshEvents();
                displayEvents(getFilteredEvents());
                displayPastEvents();
            }
        })();
        return;
    }

    // Admin: add category
    if (e.target.closest('#btn-admin-add-cat') && isAdminMode()) {
        const nameInput  = document.getElementById('admin-new-cat-name');
        const colorInput = document.getElementById('admin-new-cat-color');
        const name = nameInput?.value.trim();
        if (!name) { nameInput?.focus(); return; }
        const cats = loadCategories();
        if (cats.find(c => c.name.toLowerCase() === name.toLowerCase())) {
            nameInput.value = '';
            return;
        }
        cats.push({ name, slug: slugify(name), color: colorInput?.value || randomCatColor() });
        saveCategories(cats);
        if (nameInput) nameInput.value = '';
        rebuildCategoryUI();
        return;
    }

    // Admin: delete category
    const adminDelCatBtn = e.target.closest('.btn-admin-del-cat');
    if (adminDelCatBtn && isAdminMode()) {
        const slug = adminDelCatBtn.dataset.slug;
        const cats = loadCategories().filter(c => c.slug !== slug);
        saveCategories(cats);
        rebuildCategoryUI();
        return;
    }

    // Admin: delete event
    const adminDelBtn = e.target.closest('.btn-admin-delete');
    if (adminDelBtn && isAdminMode()) {
        if (!confirm('Delete this event? This cannot be undone.')) return;
        (async () => {
            const r = await fetch(`${API_BASE}/api/events/${adminDelBtn.dataset.id}`, {
                method: 'DELETE', headers: adminHeaders(),
            });
            if (r.ok) {
                await refreshEvents();
                displayEvents(getFilteredEvents());
                displayPastEvents();
            }
        })();
        return;
    }
});

/* ── Keyboard Handling ───────────────────────────────────── */
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') { closeEventModal(); closeAdminModal(); closeShareSheet(); }
    if (e.key === 'Enter') {
        if (e.target.id === 'admin-password-input') { doAdminLogin(); return; }
        if (e.target.classList.contains('comment-input')) {
            e.target.closest('.comment-row')?.querySelector('.add-comment')?.click();
        }
        if (e.target.classList.contains('event-title')) { openEventModal(e.target.dataset.modalId); }
        if (e.target.classList.contains('cal-cell--has-events')) { e.target.click(); }
    }
});

/* ── Calendar Keyboard Navigation ───────────────────────── */
document.addEventListener('keydown', e => {
    if (currentView !== 'calendar') return;
    const focused = document.activeElement;
    if (!focused?.classList.contains('cal-cell')) return;
    const cells = [...document.querySelectorAll('#calendar-grid .cal-cell')];
    const idx   = cells.indexOf(focused);
    if (idx === -1) return;

    let next = null;
    if (e.key === 'ArrowRight') next = cells[idx + 1];
    if (e.key === 'ArrowLeft')  next = cells[idx - 1];
    if (e.key === 'ArrowDown')  next = cells[idx + 7];
    if (e.key === 'ArrowUp')    next = cells[idx - 7];

    if (next) {
        e.preventDefault();
        next.setAttribute('tabindex', '0');
        next.focus();
    }
    if (e.key === 'Enter' && focused.classList.contains('cal-cell--has-events')) {
        focused.click();
    }
});

/* ── Search ──────────────────────────────────────────────── */
document.getElementById('search').addEventListener('input', e => {
    currentQuery = e.target.value.trim();
    if (currentView === 'calendar') renderCalendar(calendarYear, calendarMonth);
    else displayEvents(getFilteredEvents());
});

/* ── Creator Edit Mode ───────────────────────────────────── */
function enterEditMode(id) {
    const events = loadEvents();
    const ev     = events.find(e => String(e.id) === String(id));
    if (!ev) return;

    editingEventId = String(id);

    document.getElementById('event-name').value        = ev.name || '';
    document.getElementById('event-date').value        = ev.date || '';
    document.getElementById('event-time').value        = ev.time || '';
    document.getElementById('event-location').value    = ev.location || '';
    document.getElementById('event-organizer').value   = ev.organizer || '';
    document.getElementById('event-description').value = ev.description || '';
    document.getElementById('event-category').value    = ev.category || 'Community & Civic';
    document.getElementById('event-recurring').value   = ev.recurring || 'none';
    document.getElementById('event-featured').checked  = !!ev.featured;
    document.getElementById('event-end-time').value   = ev.endTime || '';
    document.getElementById('event-image-url').value  = (ev.image && ev.image.startsWith('http')) ? ev.image : '';

    document.getElementById('submit-intro').hidden        = true;
    document.getElementById('edit-mode-notice').hidden    = false;
    document.getElementById('btn-form-submit').textContent = 'Save Changes';

    document.getElementById('submit').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function exitEditMode() {
    editingEventId = null;
    document.getElementById('event-form').reset();
    document.getElementById('submit-intro').hidden        = false;
    document.getElementById('edit-mode-notice').hidden    = true;
    document.getElementById('btn-form-submit').textContent = 'Submit Event';
}

/* ── Form Submission ─────────────────────────────────────── */
document.getElementById('event-form').addEventListener('submit', e => {
    e.preventDefault();
    const nameEl = document.getElementById('event-name');
    if (!nameEl.value.trim()) { nameEl.focus(); return; }

    // Duplicate detection (new events only)
    if (editingEventId === null) {
        const dupName = document.getElementById('event-name').value.trim();
        const dupDate = document.getElementById('event-date').value;
        const dupExisting = loadEvents().find(ev =>
            ev.date === dupDate && ev.name.toLowerCase() === dupName.toLowerCase()
        );
        if (dupExisting && !document.getElementById('btn-form-submit').dataset.forceSubmit) {
            let warn = document.getElementById('duplicate-warning');
            if (!warn) {
                warn = document.createElement('div');
                warn.id = 'duplicate-warning';
                warn.className = 'duplicate-warning';
                document.getElementById('btn-form-submit').before(warn);
            }
            warn.innerHTML = `<strong>Possible duplicate:</strong> "${sanitize(dupExisting.name)}" on ${sanitize(dupExisting.date)} already exists. <button class="btn-submit-anyway" id="btn-force-submit">Submit anyway</button>`;
            document.getElementById('btn-force-submit').addEventListener('click', () => {
                document.getElementById('btn-form-submit').dataset.forceSubmit = '1';
                document.getElementById('event-form').requestSubmit();
            }, { once: true });
            return;
        }
        document.getElementById('duplicate-warning')?.remove();
        delete document.getElementById('btn-form-submit').dataset.forceSubmit;
    }

    const imageFile  = document.getElementById('event-image').files[0];
    const submitBtn  = document.getElementById('btn-form-submit');
    const editingId  = editingEventId; // capture before async work
    submitBtn.disabled = true;
    submitBtn.textContent = editingId ? 'Saving\u2026' : 'Submitting\u2026';

    const doSubmit = async (imageData) => {
        const body = {
            name:        document.getElementById('event-name').value.trim(),
            date:        document.getElementById('event-date').value,
            time:        document.getElementById('event-time').value,
            endTime:     document.getElementById('event-end-time').value || null,
            location:    document.getElementById('event-location').value.trim(),
            description: document.getElementById('event-description').value.trim(),
            category:    document.getElementById('event-category').value,
            organizer:   document.getElementById('event-organizer').value.trim(),
            recurring:   document.getElementById('event-recurring').value,
            featured:    document.getElementById('event-featured').checked,
            image:       imageData !== undefined
                ? imageData
                : (document.getElementById('event-image-url')?.value.trim() || null),
        };

        try {
            let r;
            if (editingId !== null) {
                const token = getCreatorToken(editingId);
                const hdrs  = { 'Content-Type': 'application/json' };
                if (token)              hdrs['X-Creator-Token']   = token;
                else if (isAdminMode()) hdrs['X-Admin-Password']  = sessionStorage.getItem('albionAdminPw') || '';
                r = await fetch(`${API_BASE}/api/events/${editingId}`, {
                    method: 'PUT', headers: hdrs, body: JSON.stringify(body),
                });
            } else {
                r = await fetch(`${API_BASE}/api/events`, {
                    method:  'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body:    JSON.stringify(body),
                });
            }

            if (!r.ok) {
                const errData = await r.json().catch(() => ({}));
                alert(`Submission failed: ${errData.error || r.status}`);
                return;
            }

            if (editingId !== null) {
                exitEditMode();
            } else {
                const { id, creatorToken } = await r.json();
                saveCreatorToken(id, creatorToken);
                e.target.reset();
                const notice = document.getElementById('submit-pending-notice');
                if (notice) { notice.hidden = false; setTimeout(() => notice.hidden = true, 10000); }
            }

            await refreshEvents();
            if (isAdminMode()) {
                await refreshPendingEvents();
                displayPendingEvents();
            }
            displayEvents(getFilteredEvents());
            displayPastEvents();
        } catch (err) {
            console.error('[API] form submit failed:', err);
            alert('Network error \u2014 please try again.');
        } finally {
            submitBtn.disabled    = false;
            submitBtn.textContent = editingId !== null ? 'Save Changes' : 'Submit Event';
        }
    };

    if (imageFile) {
        resizeImage(imageFile, 800, dataUrl => doSubmit(dataUrl));
    } else {
        doSubmit(undefined);
    }
});

/* ── Lazy Map Load ───────────────────────────────────────── */
const mapObserver = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting && !mapLoaded) {
        mapLoaded = true;
        initMap();
        mapObserver.disconnect();
    }
}, { rootMargin: '120px' });

mapObserver.observe(document.getElementById('map'));

/* ── PWA: Service Worker Registration ───────────────────── */
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('./sw.js')
            .catch(err => console.warn('[SW] Registration failed:', err));
    });
}

/* ── PWA: Install Prompt ─────────────────────────────────── */
let deferredInstallPrompt = null;

window.addEventListener('beforeinstallprompt', e => {
    e.preventDefault();
    deferredInstallPrompt = e;
    const banner = document.getElementById('install-banner');
    if (banner && localStorage.getItem('albionInstallDismissed') !== '1') {
        banner.hidden = false;
    }
});

window.addEventListener('appinstalled', () => {
    const banner = document.getElementById('install-banner');
    if (banner) banner.hidden = true;
    deferredInstallPrompt = null;
});

document.addEventListener('click', e => {
    if (e.target.closest('#btn-install') && deferredInstallPrompt) {
        deferredInstallPrompt.prompt();
        deferredInstallPrompt.userChoice.then(() => {
            deferredInstallPrompt = null;
            const banner = document.getElementById('install-banner');
            if (banner) banner.hidden = true;
        });
    }
    if (e.target.closest('#btn-install-dismiss')) {
        localStorage.setItem('albionInstallDismissed', '1');
        const banner = document.getElementById('install-banner');
        if (banner) banner.hidden = true;
    }
}, { capture: false });

/* ── Mobile: Swipe Down to Close Modal ──────────────────── */
let swipeTouchStartY = 0;
let swipeTouchStartX = 0;

document.getElementById('event-modal').addEventListener('touchstart', e => {
    swipeTouchStartY = e.touches[0].clientY;
    swipeTouchStartX = e.touches[0].clientX;
}, { passive: true });

document.getElementById('event-modal').addEventListener('touchend', e => {
    const deltaY = e.changedTouches[0].clientY - swipeTouchStartY;
    const deltaX = Math.abs(e.changedTouches[0].clientX - swipeTouchStartX);
    if (deltaY > 80 && deltaX < 60) closeEventModal();
}, { passive: true });

/* ── URL Routing ─────────────────────────────────────────── */
window.addEventListener('popstate', e => {
    if (e.state?.albionEventId) {
        openEventModal(e.state.albionEventId);
    } else {
        const modal = document.getElementById('event-modal');
        if (!modal.hidden) closeEventModal();
    }
});

/* ── Init ────────────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', async () => {
    loadGeoCache();
    applyDarkMode(localStorage.getItem('albionDarkMode') === '1');

    // Fetch events and categories from the Worker before first render
    await Promise.all([refreshEvents(), refreshCategories()]);

    rebuildCategoryUI();
    fetchWeather();
    displayTodayBanner();
    displayEvents(getFilteredEvents());
    displayPastEvents();
    displayPendingEvents();

    const urlParams  = new URLSearchParams(window.location.search);
    const urlEventId = urlParams.get('event');
    if (urlEventId) {
        setTimeout(() => openEventModal(urlEventId), 100);
    }
});