{% extends 'admin/custom_base.html' %}

{% block head_css %}{{ super() }}
<style>
  .quick-btns { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
  .quick-btns button {
    background: #2a2a3e; border: 1px solid #3e3e5c; color: #c4b5fd;
    font-size: .72rem; padding: 2px 10px; border-radius: 4px; cursor: pointer;
  }
  .quick-btns button:hover { background: #3a3a55; border-color: #8b5cf6; }
  .quick-btns button.active { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
  .evt-card {
    background: #13112a; border: 1px solid #2e2860; border-radius: 8px;
    padding: 1rem; margin-bottom: .75rem; display: flex; gap: 1rem; align-items: center;
  }
  .evt-card .evt-info { flex: 1; min-width: 0; }
  .evt-card .evt-name { font-weight: 700; font-size: 1rem; color: #ede9fe; }
  .evt-card .evt-desc { font-size: .8rem; color: #a39dc8; margin-top: 2px; }
  .evt-card .evt-time { font-size: .75rem; color: #5c5488; margin-top: 4px; }
  .evt-card .evt-time span { color: #a78bfa; }
  .evt-card .evt-actions { display: flex; gap: .4rem; flex-shrink: 0; }
  .badge-active { background: #22c55e; }
  .badge-upcoming { background: #3b82f6; }
  .badge-ended { background: #555; }
  .evt-badge { font-size: .68rem; padding: 2px 8px; border-radius: 999px; color: #fff; font-weight: 600; }
  .form-label-sm { font-size: .8rem; font-weight: 600; color: #a39dc8; margin-bottom: .25rem; }
  .modal-content { background: #13112a !important; border: 1px solid #2e2860; }
  .modal-header { border-bottom-color: #2e2860; }
  .modal-footer { border-top-color: #2e2860; }
  .form-control { background: #0d0b1f !important; border-color: #2e2860 !important; color: #ede9fe !important; }
  .form-control:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 .15rem rgba(139,92,246,.25) !important; }
</style>
{% endblock %}

{% block body %}
{{ super() }}
<div class="container-fluid" style="padding:1.25rem 1.5rem 0;">
  <div class="d-flex align-items-center mb-3" style="gap:.75rem;">
    <h4 style="margin:0;font-weight:800;">Events</h4>
    {% if SCOPE_ADMIN in scopes %}
    <button class="btn btn-sm" style="background:#8b5cf6;color:#fff;font-size:.8rem;" onclick="showCreateModal()">+ New Event</button>
    {% endif %}
  </div>

  <div id="events-list"></div>
  <div id="no-events" style="display:none;text-align:center;padding:3rem;color:#5c5488;font-size:.9rem;">No events yet</div>
</div>

<div class="modal fade" id="eventModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content text-white">
      <div class="modal-header">
        <h5 class="modal-title" id="eventModalTitle">Create Event</h5>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="evt-id">

        <div class="form-group">
          <label class="form-label-sm">Event Name</label>
          <input type="text" class="form-control" id="evt-name" placeholder="Friday Paintball Night">
        </div>

        <div class="form-group">
          <label class="form-label-sm">Description</label>
          <textarea class="form-control" id="evt-desc" rows="2" placeholder="Optional description"></textarea>
        </div>

        <div class="row">
          <div class="col-md-6 form-group">
            <label class="form-label-sm">Start Time (EST)</label>
            <input type="datetime-local" class="form-control" id="evt-start">
            <div class="quick-btns" id="start-btns">
              <button onclick="setStartNow()">Now</button>
              <button onclick="setStartIn(2)">+2 min</button>
              <button onclick="setStartIn(5)">+5 min</button>
              <button onclick="setStartIn(10)">+10 min</button>
              <button onclick="setStartIn(15)">+15 min</button>
              <button onclick="setStartIn(30)">+30 min</button>
              <button onclick="setStartIn(60)">+1 hr</button>
            </div>
          </div>
          <div class="col-md-6 form-group">
            <label class="form-label-sm">Duration / End Time (EST)</label>
            <input type="datetime-local" class="form-control" id="evt-end">
            <div class="quick-btns" id="dur-btns">
              <button onclick="setDuration(10)">10 min</button>
              <button onclick="setDuration(15)">15 min</button>
              <button onclick="setDuration(30)">30 min</button>
              <button onclick="setDuration(45)">45 min</button>
              <button onclick="setDuration(60)">1 hr</button>
              <button onclick="setDuration(120)">2 hr</button>
              <button onclick="setDuration(180)">3 hr</button>
              <button onclick="setDuration(240)">4 hr</button>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6 form-group">
            <label class="form-label-sm">Activity (Room)</label>
            <select class="form-control" id="evt-activity">
              <option value="">None (social event)</option>
              {% for guid, name in activities.items() %}
              <option value="{{ guid }}">{{ name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-3 form-group">
            <label class="form-label-sm">Poster Image</label>
            <input type="text" class="form-control" id="evt-poster" placeholder="poster.png">
          </div>
          <div class="col-md-3 form-group">
            <label class="form-label-sm">Creator PID</label>
            <input type="number" class="form-control" id="evt-creator" value="1">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button class="btn btn-sm" style="background:#8b5cf6;color:#fff;" onclick="saveEvent()">Save Event</button>
      </div>
    </div>
  </div>
</div>

<script>
const activities = {{ activities | tojson }};

const TZ = 'America/New_York';
const TZ_LABEL = 'EST';

function toEST(d) {
  return new Date(d.toLocaleString('en-US', {timeZone: TZ}));
}

function estInputVal(d) {
  const e = toEST(d);
  const Y = e.getFullYear();
  const M = String(e.getMonth()+1).padStart(2,'0');
  const D = String(e.getDate()).padStart(2,'0');
  const h = String(e.getHours()).padStart(2,'0');
  const m = String(e.getMinutes()).padStart(2,'0');
  return `${Y}-${M}-${D}T${h}:${m}`;
}

function inputToUTC(val) {
  const [dp, tp] = val.split('T');
  const [Y, M, D] = dp.split('-').map(Number);
  const [h, m] = tp.split(':').map(Number);
  let utc = new Date(Date.UTC(Y, M-1, D, h + 5, m));
  for (let i = 0; i < 3; i++) {
    const p = new Intl.DateTimeFormat('en-US', {
      timeZone: TZ, hour12: false,
      year:'numeric', month:'numeric', day:'numeric', hour:'2-digit', minute:'2-digit'
    }).formatToParts(utc);
    const g = t => +p.find(x => x.type === t).value;
    const diff = ((D - g('day')) * 1440) + ((h - g('hour')) * 60) + (m - g('minute'));
    if (diff === 0) break;
    utc = new Date(utc.getTime() + diff * 60000);
  }
  return utc;
}

function setStartNow() {
  document.getElementById('evt-start').value = estInputVal(new Date());
}

function setStartIn(mins) {
  document.getElementById('evt-start').value = estInputVal(new Date(Date.now() + mins * 60000));
}

function setDuration(mins) {
  if (!document.getElementById('evt-start').value) setStartNow();
  const startUTC = inputToUTC(document.getElementById('evt-start').value);
  const endUTC = new Date(startUTC.getTime() + mins * 60000);
  document.getElementById('evt-end').value = estInputVal(endUTC);
  document.querySelectorAll('#dur-btns button').forEach(b => b.classList.remove('active'));
  event.target.classList.add('active');
}

function relTime(iso) {
  const d = new Date(iso);
  const diff = d - Date.now();
  const abs = Math.abs(diff);
  if (abs < 60000) return diff > 0 ? 'in <1m' : '<1m ago';
  if (abs < 3600000) return (diff > 0 ? 'in ' : '') + Math.round(abs/60000) + 'm' + (diff < 0 ? ' ago' : '');
  if (abs < 86400000) return (diff > 0 ? 'in ' : '') + (abs/3600000).toFixed(1) + 'h' + (diff < 0 ? ' ago' : '');
  return fmtTime(iso);
}

function fmtTime(iso) {
  const d = new Date(iso);
  const e = toEST(d);
  const M = String(e.getMonth()+1).padStart(2,'0');
  const D = String(e.getDate()).padStart(2,'0');
  const h = String(e.getHours()).padStart(2,'0');
  const m = String(e.getMinutes()).padStart(2,'0');
  return `${M}/${D} ${h}:${m} ${TZ_LABEL}`;
}

async function loadEvents() {
  const events = await (await fetch('/admin/api/events')).json();
  const list = document.getElementById('events-list');
  const none = document.getElementById('no-events');
  if (!events.length) { list.innerHTML = ''; none.style.display = ''; return; }
  none.style.display = 'none';
  const now = Date.now();
  list.innerHTML = events.map(e => {
    const s = new Date(e.start_time).getTime();
    const en = new Date(e.end_time).getTime();
    let status, badge;
    if (now >= s && now <= en) { status = 'Active'; badge = 'active'; }
    else if (now < s) { status = 'Upcoming'; badge = 'upcoming'; }
    else { status = 'Ended'; badge = 'ended'; }
    const act = activities[e.activity_level_id] || e.activity_level_id || 'Social';
    const dur = Math.round((en - s) / 60000);
    const durStr = dur >= 60 ? (dur/60).toFixed(1).replace('.0','') + 'h' : dur + 'm';
    return `<div class="evt-card">
      <div class="evt-info">
        <div class="evt-name">${e.name} <span class="evt-badge badge-${badge}">${status}</span></div>
        ${e.description ? `<div class="evt-desc">${e.description}</div>` : ''}
        <div class="evt-time">
          <span>${act}</span> &middot; ${durStr} &middot;
          Start: ${fmtTime(e.start_time)} (${relTime(e.start_time)}) &middot;
          End: ${fmtTime(e.end_time)} (${relTime(e.end_time)})
        </div>
      </div>
      <div class="evt-actions">
        <button class="btn btn-xs btn-outline-light" onclick="editEvent(${e.id})">Edit</button>
        <button class="btn btn-xs btn-outline-danger" onclick="deleteEvent(${e.id})">Delete</button>
      </div>
    </div>`;
  }).join('');
}

function showCreateModal() {
  document.getElementById('eventModalTitle').textContent = 'Create Event';
  document.getElementById('evt-id').value = '';
  document.getElementById('evt-name').value = '';
  document.getElementById('evt-desc').value = '';
  document.getElementById('evt-poster').value = '';
  document.getElementById('evt-activity').value = '';
  document.getElementById('evt-creator').value = '1';
  setStartIn(2);
  setDuration(60);
  document.querySelectorAll('#dur-btns button').forEach(b => b.classList.remove('active'));
  $('#eventModal').modal('show');
}

async function editEvent(id) {
  const events = await (await fetch('/admin/api/events')).json();
  const e = events.find(x => x.id === id);
  if (!e) return;
  document.getElementById('eventModalTitle').textContent = 'Edit Event';
  document.getElementById('evt-id').value = e.id;
  document.getElementById('evt-name').value = e.name;
  document.getElementById('evt-desc').value = e.description;
  document.getElementById('evt-start').value = estInputVal(new Date(e.start_time));
  document.getElementById('evt-end').value = estInputVal(new Date(e.end_time));
  document.getElementById('evt-poster').value = e.poster_image;
  document.getElementById('evt-activity').value = e.activity_level_id;
  document.getElementById('evt-creator').value = e.creator_player_id;
  document.querySelectorAll('#dur-btns button').forEach(b => b.classList.remove('active'));
  $('#eventModal').modal('show');
}

async function saveEvent() {
  const id = document.getElementById('evt-id').value;
  const startUTC = inputToUTC(document.getElementById('evt-start').value);
  const endUTC = inputToUTC(document.getElementById('evt-end').value);
  const data = {
    name: document.getElementById('evt-name').value,
    description: document.getElementById('evt-desc').value,
    start_time: startUTC.toISOString(),
    end_time: endUTC.toISOString(),
    poster_image: document.getElementById('evt-poster').value,
    activity_level_id: document.getElementById('evt-activity').value,
    creator_player_id: parseInt(document.getElementById('evt-creator').value) || 1,
  };
  const opts = {method: id ? 'PUT' : 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data)};
  try {
    const r = await fetch(id ? '/admin/api/events/' + id : '/admin/api/events', opts);
    const d = await r.json();
    if (d.error) { KR.toast(d.error || 'Failed to save event', 'error'); return; }
    KR.toast(id ? 'Event updated' : 'Event created');
    $('#eventModal').modal('hide');
    loadEvents();
  } catch (e) {
    KR.toast('Network error', 'error');
  }
}

async function deleteEvent(id) {
  if (!confirm('Delete this event?')) return;
  try {
    const r = await fetch('/admin/api/events/' + id, {method:'DELETE'});
    const d = await r.json();
    if (d.error) { KR.toast(d.error || 'Delete failed', 'error'); return; }
    KR.toast('Event deleted');
    loadEvents();
  } catch (e) {
    KR.toast('Network error', 'error');
  }
}

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