<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%= event.couple_names %> — Dashboard</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/assets/css/admin-shared.css">
  <link rel="stylesheet" href="/themes/<%= event.theme %>/theme.css">
</head>

<%
  // input_20 Phase 8: see botanical-bloom/dashboard.ejs's identical comment.
  var isClient = typeof clientMode !== 'undefined' && clientMode;
  var isPreview = typeof previewMode !== 'undefined' && previewMode;
  var basePath = isClient ? '/client' : ('/admin/events/' + event.id);
%>
<body class="lg-admin">
  <% if (isPreview) { %>
    <div style="background:#fff3cd; color:#664d03; border-bottom:1px solid #ffe69c; padding:0.75rem 1.5rem; text-align:center; font-size:0.95rem;">
      Admin preview — you are viewing this event as the client.
      <a href="<%= returnToAdminUrl %>" style="margin-left:0.75rem; font-weight:600;">Return to Admin</a>
    </div>
  <% } %>
  <header class="bb-admin-header">
    <div class="bb-admin-header-inner">
      <% if (isPreview) { %>
        <span class="bb-admin-header-title">&#127881; <%= event.couple_names %></span>
      <% } else { %>
        <a class="bb-admin-header-title" href="<%= basePath %>">&#127881; <%= event.couple_names %></a>
      <% } %>
      <nav class="bb-admin-nav">
        <% if (event.access_mode !== 'open') { %><a href="#guest-list">Guest List</a><% } %>
        <a href="#event-details">Event Details</a>
        <% if (!isPreview) { %><a href="<%= basePath %>/assets">Assets</a><% } %>
        <a href="/invite/<%= event.id %>/other-details" target="_blank">Other Details</a>
        <% if (!isClient) { %><a href="/admin/events">All events</a><% } %>
        <% if (!isClient) { %><a href="/admin/events/<%= event.id %>/client-preview">View Client Portal</a><% } %>
      </nav>
    </div>
  </header>

  <!-- input_19: floral decoration removed from the whole Lady Gianna
       theme (input_16 §4 through input_18's attempts here never landed
       cleanly). Dashboard is back to its plain admin background. -->
  <div class="lg-admin-wrap">
    <div class="lg-admin-grid">

      <!-- input_16 §1: profile info and the decorative photo now share ONE
           card — the photo bleeds in from the right with a mask-image
           fade on its inner edge, so it dissolves into the card rather
           than meeting the profile side at a hard edge. -->
      <article class="lg-admin-card lg-admin-profile-merged">
        <div class="lg-profile-info">
          <div class="lg-admin-portrait-wrap">
            <% if (event.card_image) { %>
              <img class="lg-admin-portrait" src="<%= event.card_image %>" alt="<%= event.couple_names %>">
            <% } else { %>
              <div class="lg-admin-portrait lg-admin-portrait-placeholder"></div>
            <% } %>
            <span class="lg-admin-monogram"><%= event.couple_names.charAt(0) %></span>
          </div>
          <div>
            <h2><%= event.couple_names %></h2>
            <p><%= event.subtitle || event.venue %></p>
            <div class="lg-admin-btn-row">
              <% if (!isPreview) { %>
                <button type="button" class="bb-btn copy-btn" data-copy="<%= baseUrl %>/invite/<%= event.id %>">Copy Invite Link</button>
                <a class="bb-btn" href="<%= isClient ? '/client/edit' : (basePath + '/edit') %>">Edit details</a>
              <% } %>
            </div>
          </div>
        </div>
        <% if (event.card_image) { %>
          <div class="lg-profile-photo-bleed" style="background-image:url('<%= event.card_image %>')">
            <p class="lg-profile-photo-caption">&#10024; <%= event.subtitle || 'Celebrating together' %></p>
          </div>
        <% } %>
      </article>

      <!-- Live stats -->
      <article class="lg-admin-card lg-admin-stats">
        <div class="lg-admin-section-head"><h2>At a glance</h2></div>
        <div class="lg-bubble-grid">
          <div class="lg-bubble-stat">
            <div class="lg-bubble"><%= stats.total_guests %></div>
            <div><p>Invited guests</p><span><% if (!isClient && event.access_mode === 'closed') { %>Door Scanner: <a href="/scan" target="_blank">open</a><% } else { %>&nbsp;<% } %></span></div>
          </div>
          <div class="lg-bubble-stat">
            <div class="lg-bubble"><%= stats.responded %></div>
            <div><p>RSVPs received</p><span><%= stats.total_guests > 0 ? Math.round(stats.responded / stats.total_guests * 100) : 0 %>% response rate</span></div>
          </div>
          <div class="lg-bubble-stat">
            <div class="lg-bubble"><%= daysToGo === null ? 'TBD' : daysToGo %></div>
            <div><p>Days to go</p><span><%= daysToGo === null ? 'Set a date to see this' : 'The big day is near' %></span></div>
          </div>
          <div class="lg-bubble-stat">
            <div class="lg-bubble"><%= galleryPhotos.length + cameoPhotos.length %></div>
            <div><p>Photos uploaded</p><span>Gallery &amp; Cameos combined</span></div>
          </div>
        </div>
      </article>

      <!-- Itinerary card -->
      <article class="lg-admin-card lg-admin-itinerary">
        <h2>Itinerary</h2>
        <% if (isPreview) { %>
          <p style="white-space:pre-line;"><%= event.itinerary || 'No itinerary yet.' %></p>
        <% } else { %>
        <form method="POST" action="<%= basePath %>">
          <input type="hidden" name="coupleNames" value="<%= event.couple_names %>">
          <input type="hidden" name="weddingDate" value="<%= event.wedding_date || '' %>">
          <input type="hidden" name="venue" value="<%= event.venue %>">
          <textarea name="itinerary" placeholder="One item per line, e.g.&#10;10:00am - Arrival&#10;11:00am - Cake cutting&#10;1:00pm - Lunch"><%= event.itinerary || '' %></textarea>
          <button type="submit" class="bb-btn" style="margin-top:0.75rem;">Save Itinerary</button>
        </form>
        <% } %>
      </article>

      <!-- Assets card -->
      <article class="lg-admin-card lg-admin-assets">
        <div class="lg-admin-section-head"><h2>Photos</h2><% if (!isPreview) { %><a href="<%= basePath %>/assets">Open Assets &rarr;</a><% } %></div>
        <div class="lg-admin-assets-preview">
          <% galleryPhotos.slice(0, 4).forEach(function (photo) { %>
            <div style="background-image:url('<%= photo.image_url %>')"></div>
          <% }) %>
          <% if (galleryPhotos.length === 0) { %>
            <p style="grid-column:1/-1;">No photos yet — add some from Assets.</p>
          <% } %>
        </div>
      </article>

      <!-- Event details form -->
      <article class="lg-admin-card lg-admin-details" id="event-details">
        <h2>Event details</h2>
        <% if (typeof error !== 'undefined' && error) { %>
          <p class="lg-error"><%= error %></p>
        <% } %>
        <% if (isPreview) { %>
          <div class="lg-admin-details-grid">
            <div><label>Celebrant</label><p><%= event.couple_names %></p></div>
            <div><label>Milestone</label><p><%= event.subtitle || '' %></p></div>
            <div><label>Date</label><p><%= event.wedding_date || 'Not set' %></p></div>
            <div class="lg-field-wide"><label>Time</label><p><%= event.event_time_note || '' %></p></div>
            <div class="lg-field-wide"><label>Venue</label><p><%= event.venue %></p></div>
          </div>
        <% } else { %>
        <form method="POST" action="<%= basePath %>">
          <div class="lg-admin-details-grid">
            <div>
              <label>Celebrant</label>
              <input type="text" name="coupleNames" value="<%= event.couple_names %>" required>
            </div>
            <div>
              <label>Milestone</label>
              <input type="text" name="subtitle" value="<%= event.subtitle || '' %>" placeholder="e.g. is turning TWO!">
            </div>
            <div>
              <label>Date<% if (!event.wedding_date) { %> <span style="font-weight:normal;">(not set — required before going live)</span><% } %></label>
              <input type="date" name="weddingDate" value="<%= event.wedding_date || '' %>">
            </div>
            <div class="lg-field-wide">
              <label>Time</label>
              <input type="text" name="eventTimeNote" value="<%= event.event_time_note || '' %>" placeholder="e.g. Starting 10:00am till Late">
            </div>
            <div class="lg-field-wide">
              <label>Venue</label>
              <input type="text" name="venue" value="<%= event.venue %>" required>
            </div>
          </div>
          <button type="submit" class="bb-btn" style="margin-top:1rem;">Save Event Details</button>
        </form>
        <% } %>
      </article>

      <!-- Guest list — input_14: omitted entirely for 'open' events. -->
      <% if (event.access_mode !== 'open') { %>
        <article class="lg-admin-card lg-admin-guests" id="guest-list">
          <div class="lg-admin-section-head">
            <h2>Guest list</h2>
            <% if (!isClient) { %><a class="bb-btn" href="/admin/events/<%= event.id %>/export">Download Excel</a><% } %>
          </div>
          <div class="lg-table-wrap">
            <table>
              <thead><tr><th>Name</th><th>Seats</th><th>Code</th><th>RSVP</th><th>Checked in</th></tr></thead>
              <tbody>
                <% guests.forEach(function (guest) { %>
                  <tr>
                    <td><div class="lg-guest-name"><span class="lg-avatar"><%= guest.name.charAt(0) %></span><%= guest.name %></div></td>
                    <td><%= guest.seat_count %></td>
                    <td><span class="lg-code"><%= guest.passcode %></span><% if (!isPreview) { %> <button type="button" class="lg-copy-code copy-btn" data-copy="<%= guest.passcode %>">Copy code</button><% } %></td>
                    <td><span class="lg-status"><%= guest.rsvp_status %></span></td>
                    <td><%= guest.checked_in ? 'Yes' : 'No' %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
          <% if (!isPreview) { %>
          <form method="POST" action="<%= basePath %>/guests" style="margin-top:1rem;">
            <p>One guest per line: <code>Name, seat count</code> (optionally <code>, invitation type</code>)</p>
            <textarea name="guestList" rows="4" placeholder="Sarah, 2&#10;James, 4, VIP"></textarea>
            <button type="submit" class="bb-btn" style="margin-top:0.6rem;">Add Guests</button>
          </form>
          <% } %>
        </article>
      <% } %>

      <!-- Danger zone — input_20 Phase 8: entirely different in client mode,
           see lavender-romance/dashboard.ejs's identical comment. -->
      <% if (isPreview) { %>
        <!-- input_20 Phase 10D: read-only, regardless of draft/live — no
             form, no button, in either status. -->
        <article class="lg-admin-card lg-admin-full">
          <p>Status: <%= event.status === 'live' ? 'Live' : 'Draft' %></p>
        </article>
      <% } else if (isClient) { %>
        <article class="lg-admin-card lg-admin-full">
          <% if (typeof error !== 'undefined' && error) { %>
            <p class="lg-error"><%= error %></p>
          <% } %>
          <% if (event.status === 'live') { %>
            <p>Status: Live</p>
          <% } else { %>
            <form method="POST" action="/client/publish">
              <button type="submit" class="bb-btn">Publish</button>
            </form>
          <% } %>
        </article>
      <% } else { %>
        <article class="lg-admin-card lg-admin-danger">
          <h2>Danger zone</h2>
          <% if (typeof error !== 'undefined' && error) { %>
            <p class="lg-error"><%= error %></p>
          <% } %>
          <form method="POST" action="/admin/events/<%= event.id %>/status" style="display:inline-block; margin-right:0.75rem;">
            <button type="submit" class="bb-btn"><%= event.status === 'live' ? 'Switch to Draft' : 'Go Live' %></button>
          </form>
          <form method="POST" action="/admin/events/<%= event.id %>/delete" style="display:inline-block;" onsubmit="return confirm('Delete this event permanently? Summary metrics will be kept, but all guest and gatepass data will be gone for good.');">
            <button type="submit" class="bb-btn">Delete Event</button>
          </form>
          <p style="margin-top:0.75rem;">Status: <%= event.status %></p>
        </article>
      <% } %>

    </div>
  </div>

  <script>
    document.querySelectorAll('.copy-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        navigator.clipboard.writeText(btn.dataset.copy).then(function () {
          var original = btn.textContent;
          btn.textContent = 'Copied!';
          setTimeout(function () { btn.textContent = original; }, 1500);
        });
      });
    });
  </script>
</body>
</html>
