{% extends "base.html" %}

{% block title %}Manage Events | Roadshow Calendar{% endblock %}

{% block content %}
<section class="section-shell page-top-space">
  <div class="container">
    <div class="dashboard-banner card-surface mb-4">
      <div>
        <span class="eyebrow-pill">Staff workspace</span>
        <h1 class="section-title mt-3 mb-2">Manage your public event calendar securely</h1>
        <p class="section-copy mb-0">Only staff members can reach this area. Create events here or jump into Django Admin for bulk edits.</p>
      </div>
      <div class="dashboard-banner-actions d-flex gap-2 flex-wrap">
        <a class="btn btn-primary-brand" href="{% url 'event_create' %}">Add event</a>
        <a class="btn btn-ghost" href="/admin/">Open admin</a>
      </div>
    </div>

    <div class="row g-4 mb-4">
      <div class="col-xl-6">
        <div class="card-surface h-100">
          <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
            <div>
              <span class="eyebrow-pill">Backup</span>
              <h2 class="h4 mt-3 mb-2">Download a full event backup</h2>
              <p class="section-copy mb-0">Export every event into one JSON file so you can keep an offline backup before larger edits or restore the calendar later if needed.</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
              <a class="btn btn-primary-brand" href="{% url 'event_export' %}">Download backup JSON</a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-6">
        <div class="card-surface h-100">
          <span class="eyebrow-pill">Restore</span>
          <h2 class="h4 mt-3 mb-2">Import a previous backup</h2>
          <p class="section-copy">Upload an exported JSON file, review the preview, then confirm before anything in the live calendar is replaced.</p>

          <form method="post" action="{% url 'event_import_preview' %}" enctype="multipart/form-data" class="row g-3">
            {% csrf_token %}
            <div class="col-12">
              <label class="form-label" for="backupFile">Backup JSON file</label>
              <input class="form-control" id="backupFile" type="file" name="backup_file" accept="application/json,.json" required>
              <div class="form-text">Uploading only prepares a preview. The actual restore is a separate confirmation step.</div>
            </div>
            <div class="col-12 d-flex gap-2 flex-wrap align-items-center">
              <button class="btn btn-primary-brand" type="submit">Preview restore</button>
              <span class="small text-muted">Recommended flow: export a fresh backup first, then test your restore file.</span>
            </div>
          </form>
        </div>
      </div>
    </div>

    {% if pending_import %}
    <div class="card-surface mb-4">
      <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-start mb-4">
        <div>
          <span class="eyebrow-pill">Restore preview</span>
          <h2 class="h4 mt-3 mb-2">Ready to replace the current calendar</h2>
          <p class="section-copy mb-0">This backup contains {{ pending_import.event_count }} event{{ pending_import.event_count|pluralize }}. If you confirm, Django will replace the current {{ dashboard_count }} live item{{ dashboard_count|pluralize }} in one transaction.</p>
        </div>
        <form method="post" action="{% url 'event_import_restore' %}" class="d-grid">
          {% csrf_token %}
          <button class="btn btn-danger" type="submit">Confirm restore and replace events</button>
        </form>
      </div>

      <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
          <div class="border rounded-4 p-3 h-100 bg-white bg-opacity-50">
            <small class="text-uppercase text-muted d-block mb-2">Backup events</small>
            <strong class="d-block fs-4">{{ pending_import.event_count }}</strong>
          </div>
        </div>
        <div class="col-sm-6 col-xl-3">
          <div class="border rounded-4 p-3 h-100 bg-white bg-opacity-50">
            <small class="text-uppercase text-muted d-block mb-2">Published</small>
            <strong class="d-block fs-4">{{ pending_import.published_count }}</strong>
          </div>
        </div>
        <div class="col-sm-6 col-xl-3">
          <div class="border rounded-4 p-3 h-100 bg-white bg-opacity-50">
            <small class="text-uppercase text-muted d-block mb-2">Drafts</small>
            <strong class="d-block fs-4">{{ pending_import.draft_count }}</strong>
          </div>
        </div>
        <div class="col-sm-6 col-xl-3">
          <div class="border rounded-4 p-3 h-100 bg-white bg-opacity-50">
            <small class="text-uppercase text-muted d-block mb-2">Exported</small>
            <strong class="d-block">{{ pending_import.exported_at_display }}</strong>
          </div>
        </div>
      </div>

      <div class="row g-4 align-items-start">
        <div class="col-lg-7">
          <h3 class="h5 mb-3">First events in this backup</h3>
          <div class="list-group">
            {% for event in pending_import.preview_events %}
            <div class="list-group-item border rounded-4 mb-2">
              <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                <div>
                  <strong>{{ event.name }}</strong>
                  <div class="small text-muted">{{ event.start|date:"M j, Y g:i A" }} – {{ event.end|date:"M j, Y g:i A" }}</div>
                </div>
                <div class="text-md-end small">
                  <div>{{ event.location|default:"—" }}</div>
                  <div>{% if event.is_published %}Published{% else %}Draft{% endif %}</div>
                </div>
              </div>
            </div>
            {% empty %}
            <p class="section-copy mb-0">This backup has no events. Confirming the restore would clear the current calendar.</p>
            {% endfor %}
          </div>
          {% if pending_import.remaining_count %}
          <p class="small text-muted mt-2 mb-0">Plus {{ pending_import.remaining_count }} more event{{ pending_import.remaining_count|pluralize }} in the same backup.</p>
          {% endif %}
        </div>
        <div class="col-lg-5">
          <h3 class="h5 mb-3">Restore source</h3>
          <dl class="row mb-3">
            <dt class="col-sm-4">Project</dt>
            <dd class="col-sm-8">{{ pending_import.project }}</dd>
            <dt class="col-sm-4">Version</dt>
            <dd class="col-sm-8">{{ pending_import.version }}</dd>
            <dt class="col-sm-4">Action</dt>
            <dd class="col-sm-8">Replace all current events</dd>
          </dl>
          <p class="small text-muted mb-0">Safety note: the restore deletes the current event table contents and recreates them from this uploaded backup inside one database transaction.</p>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="row g-4 mb-4">
      <div class="col-xl-5">
        <div class="card-surface embed-settings-card h-100">
          <span class="eyebrow-pill">Embed settings</span>
          <h2 class="h4 mt-3 mb-2">Generate a copy-ready widget snippet</h2>
          <p class="section-copy">Tune the iframe once, copy the finished code, and paste it into your existing HTML site.</p>

          <form class="embed-settings-form" data-embed-settings data-embed-base-url="{{ embed_base_url }}">
            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="embedTitle">Iframe title</label>
                <input class="form-control" id="embedTitle" name="title" type="text" value="Where to find us calendar">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedMonth">Starting month</label>
                <input class="form-control" id="embedMonth" name="month" type="month" value="{{ default_embed_month }}">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedWidth">Width</label>
                <input class="form-control" id="embedWidth" name="width" type="text" value="100%">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedHeight">Height (px)</label>
                <input class="form-control" id="embedHeight" name="height" type="number" min="360" step="10" value="760">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedRadius">Corner radius (px)</label>
                <input class="form-control" id="embedRadius" name="radius" type="number" min="0" step="2" value="24">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="embedHeader">Widget header</label>
                <select class="form-select" id="embedHeader" name="header">
                  <option value="1" selected>Show header and action</option>
                  <option value="0">Hide header for a tighter embed</option>
                </select>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="col-xl-7">
        <div class="card-surface code-card h-100">
          <div class="code-card-header d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
            <div>
              <strong>Live embed output</strong>
              <p class="mb-0 text-white-50 small">Copy either the direct widget URL or the full iframe snippet.</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
              <a class="btn btn-sm btn-primary-brand" href="{{ embed_base_url }}" target="_blank" rel="noopener" data-embed-preview>Preview widget</a>
              <button class="btn btn-sm btn-ghost" type="button" data-copy-snippet data-copy-target="#dashboardEmbedUrl">Copy URL</button>
              <button class="btn btn-sm btn-ghost" type="button" data-copy-snippet data-copy-target="#dashboardIframeSnippet">Copy iframe</button>
            </div>
          </div>

          <div class="embed-output-stack mt-4">
            <div>
              <small class="text-uppercase text-white-50 d-block mb-2">Widget URL</small>
              <pre id="dashboardEmbedUrl" class="code-snippet mb-0">{{ embed_base_url }}</pre>
            </div>
            <div>
              <small class="text-uppercase text-white-50 d-block mb-2">Iframe snippet</small>
              <pre id="dashboardIframeSnippet" class="code-snippet mb-0">&lt;iframe src="{{ embed_base_url }}" title="Where to find us calendar" width="100%" height="760" style="border:0;border-radius:24px;overflow:hidden;" loading="lazy"&gt;&lt;/iframe&gt;</pre>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-card card-surface">
      <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center mb-3">
        <div>
          <h2 class="h4 mb-1">All events</h2>
          <p class="section-copy mb-0">{{ dashboard_count }} scheduled item{{ dashboard_count|pluralize }} currently in the system.</p>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0 dashboard-table">
          <thead>
            <tr>
              <th>Event</th>
              <th>Date</th>
              <th>Location</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for event in events %}
            <tr>
              <td>
                <strong>{{ event.name }}</strong><br>
                <small>{{ event.start|date:"g:i A" }} – {{ event.end|date:"g:i A" }}</small>
              </td>
              <td>{{ event.start|date:"M j, Y" }}</td>
              <td>{{ event.location|default:"—" }}</td>
              <td>
                {% if event.is_published %}
                <span class="status-pill status-live">Published</span>
                {% else %}
                <span class="status-pill status-draft">Draft</span>
                {% endif %}
              </td>
              <td>
                <div class="d-flex gap-2 flex-wrap justify-content-end">
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_dashboard_detail' event.slug %}">Review</a>
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_edit' event.slug %}">Edit</a>
                  <a class="btn btn-sm btn-ghost" href="{% url 'event_delete' event.slug %}">Delete</a>
                </div>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="5">
                <div class="empty-state text-center py-5">
                  <h3 class="h5">No events yet</h3>
                  <p class="mb-3">Create your first event to populate the public calendar and widget.</p>
                  <a class="btn btn-primary-brand" href="{% url 'event_create' %}">Create event</a>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
{% endblock %}