<!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=Beau+Rivage&family=Cormorant+Garamond:wght@400;500;600&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: this same dashboard template renders for both an
  // admin (req.params.id-based routes) and a client (fixed, id-free
  // /client routes) — basePath is the one thing that differs between the
  // two, computed once here rather than repeating the ternary at every
  // link/form below.
  var isClient = typeof clientMode !== 'undefined' && clientMode;
  var isPreview = typeof previewMode !== 'undefined' && previewMode;
  var basePath = isClient ? '/client' : ('/admin/events/' + event.id);
%>
<body class="bb-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"><%= event.couple_names %></span>
      <% } else { %>
        <a class="bb-admin-header-title" href="<%= basePath %>"><%= event.couple_names %></a>
      <% } %>
      <nav class="bb-admin-nav">
        <% if (event.access_mode !== 'open') { %><a href="#guest-list">Guest List</a><% } %>
        <a href="#wedding-details">Wedding 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 weddings</a><% } %>
        <% if (!isClient) { %><a href="/admin/events/<%= event.id %>/client-preview">View Client Portal</a><% } %>
      </nav>
    </div>
  </header>

  <div class="bb-admin-wrap">
    <!-- 1. Top row: photo + quick-action tiles -->
    <div class="bb-admin-section bb-admin-top">
      <div class="bb-admin-photo-panel">
        <% if (event.card_image) { %>
          <img src="<%= event.card_image %>" alt="<%= event.couple_names %>">
        <% } %>
      </div>

      <div class="bb-admin-quick-grid">
        <div class="bb-admin-tile">
          <h2>Shareable invite link</h2>
          <% if (isPreview) { %>
            <p><%= baseUrl %>/invite/<%= event.id %></p>
          <% } else { %>
            <input type="text" readonly value="<%= baseUrl %>/invite/<%= event.id %>" onclick="this.select()">
            <button type="button" class="bb-btn copy-btn" data-copy="<%= baseUrl %>/invite/<%= event.id %>" style="margin-top:0.6rem;">Copy Link</button>
          <% } %>
        </div>

        <% if (!isClient && event.access_mode === 'closed') { %>
          <!-- input_14: only 'closed' events ever generate a QR gatepass,
               so this tile is meaningless (and hidden) for 'open'/'recognized'.
               input_20 Phase 8: also hidden entirely in client mode — the
               scanner route itself is untouched and stays public, this is
               just keeping it off the client's own navigation. -->
          <div class="bb-admin-tile">
            <h2>Door scanner</h2>
            <p>No login needed for door staff.</p>
            <a class="bb-btn" href="/scan">Open Scanner</a>
            <button type="button" class="bb-btn copy-btn" data-copy="<%= baseUrl %>/scan" style="margin-top:0.6rem;">Copy Link</button>
          </div>
        <% } %>

        <div class="bb-admin-tile">
          <h2>Status: <%= event.status %></h2>
          <% if (typeof error !== 'undefined' && error) { %>
            <p class="bb-error"><%= error %></p>
          <% } %>
          <% if (isPreview) { %>
            <!-- input_20 Phase 10D: read-only, regardless of draft/live —
                 no form, no button, in either status. -->
            <p><%= event.status === 'live' ? 'Live' : 'Draft' %></p>
          <% } else if (isClient) { %>
            <!-- input_20 Phase 8: draft->live only, via /client/publish
                 (publishCore) — a live event shows plain status text with
                 no form at all, so there is no markup path that could ever
                 submit a live->draft request from the client dashboard. -->
            <% if (event.status === 'live') { %>
              <p>Live</p>
            <% } else { %>
              <form method="POST" action="/client/publish">
                <button type="submit" class="bb-btn">Publish</button>
              </form>
            <% } %>
          <% } else { %>
            <form method="POST" action="/admin/events/<%= event.id %>/status">
              <button type="submit" class="bb-btn"><%= event.status === 'live' ? 'Switch to Draft' : 'Go Live' %></button>
            </form>
          <% } %>
        </div>

        <div class="bb-admin-tile">
          <h2>Live stats</h2>
          <ul class="bb-stats">
            <li><strong><%= stats.total_guests %></strong> Guests</li>
            <li><strong><%= stats.accepted %></strong> Accepted</li>
            <li><strong><%= stats.declined %></strong> Declined</li>
            <li><strong><%= stats.seats_accepted %></strong> Seats</li>
            <li><strong><%= stats.checked_in %></strong> Checked in</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 3/4. Wedding details as a reflowing tile grid -->
    <div class="bb-admin-section" id="wedding-details">
      <h2>Wedding details</h2>
      <% if (typeof error !== 'undefined' && error) { %>
        <p class="bb-error"><%= error %></p>
      <% } %>
      <% if (isPreview) { %>
        <!-- input_20 Phase 10D: read-only equivalent of the form below —
             plain text in the same tile layout, no input/select/textarea/
             file/button anywhere. -->
        <div class="bb-details-grid">
          <div class="bb-admin-tile"><label>Couple names</label><p><%= event.couple_names %></p></div>
          <div class="bb-admin-tile"><label>Wedding date</label><p><%= event.wedding_date || 'Not set' %></p></div>
          <div class="bb-admin-tile"><label>Venue</label><p><%= event.venue %></p></div>
          <div class="bb-admin-tile">
            <label>Card image</label>
            <% if (event.card_image) { %>
              <img src="<%= event.card_image %>" alt="Current card" style="max-width:100%;">
            <% } else { %>
              <p>No image</p>
            <% } %>
          </div>
          <div class="bb-admin-tile bb-tile-wide"><label>Invitation message</label><p><%= event.invitation_message || '' %></p></div>
          <div class="bb-admin-tile bb-tile-wide"><label>Itinerary</label><p style="white-space:pre-line;"><%= event.itinerary || '' %></p></div>
          <div class="bb-admin-tile bb-tile-wide"><label>Contact details</label><p><%= event.contact_details || '' %></p></div>
        </div>
      <% } else { %>
      <form method="POST" action="<%= basePath %>" enctype="multipart/form-data">
        <div class="bb-details-grid">
          <div class="bb-admin-tile">
            <label>Couple names</label>
            <input type="text" name="coupleNames" value="<%= event.couple_names %>" required>
          </div>
          <div class="bb-admin-tile">
            <label>Wedding 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="bb-admin-tile">
            <label>Venue</label>
            <input type="text" name="venue" value="<%= event.venue %>" required>
          </div>
          <div class="bb-admin-tile">
            <label>Theme</label>
            <!-- input_15: this dashboard only ever renders for a 'wedding'
                 event (Botanical Bloom is wedding-only), so the theme list
                 here is filtered to wedding themes — no event-type
                 selector on this inline form to react to. -->
            <select name="theme">
              <% themes.filter(function (t) { return t.eventType === event.event_type; }).forEach(function (t) { %>
                <option value="<%= t.slug %>" <%= event.theme === t.slug ? 'selected' : '' %>><%= t.label %></option>
              <% }) %>
            </select>
          </div>
          <div class="bb-admin-tile">
            <label>Theme color</label>
            <input type="color" name="themeColor" value="<%= event.theme_color %>">
          </div>
          <div class="bb-admin-tile">
            <label>Accept button text</label>
            <input type="text" name="acceptButtonText" value="<%= event.accept_button_text %>">
          </div>
          <div class="bb-admin-tile">
            <label>Decline button text</label>
            <input type="text" name="declineButtonText" value="<%= event.decline_button_text %>">
          </div>

          <div class="bb-admin-tile">
            <label>Card image</label>
            <% if (event.card_image) { %>
              <a class="bb-admin-thumb" href="<%= event.card_image %>" target="_blank" title="View full image">
                <img src="<%= event.card_image %>" alt="Current card">
              </a>
            <% } %>
            <input type="file" name="cardImage" accept="image/png,image/jpeg,image/webp">
          </div>

          <div class="bb-admin-tile bb-tile-wide">
            <label>Decline message</label>
            <textarea name="declineMessage"><%= event.decline_message %></textarea>
          </div>
          <div class="bb-admin-tile bb-tile-wide">
            <label>Invitation message</label>
            <textarea name="invitationMessage" placeholder="A personal note from the couple to their guests."><%= event.invitation_message || '' %></textarea>
          </div>
          <div class="bb-admin-tile bb-tile-wide">
            <label>Itinerary</label>
            <textarea name="itinerary" placeholder="One item per line, e.g.&#10;4:00 PM - Ceremony&#10;5:30 PM - Cocktail hour&#10;7:00 PM - Reception"><%= event.itinerary || '' %></textarea>
          </div>
          <div class="bb-admin-tile bb-tile-wide">
            <label>Contact details</label>
            <textarea name="contactDetails" placeholder="How guests can reach the couple, e.g. phone/email."><%= event.contact_details || '' %></textarea>
          </div>
        </div>
        <button type="submit" class="bb-btn" style="margin-top:1.25rem;">Save</button>
      </form>
      <% } %>
    </div>

    <!-- 5. Guest management: form+table (left) / instructions (right).
         input_14: 'open' events have no guest list at all — fully public,
         no passcodes, no RSVP — so this whole section is omitted. -->
    <% if (event.access_mode !== 'open') { %>
      <div class="bb-admin-section bb-guest-mgmt" id="guest-list">
        <div>
          <% if (!isPreview) { %>
          <div class="bb-admin-card" style="margin-bottom:1.5rem;">
            <h2>Add guests</h2>
            <form method="POST" action="<%= basePath %>/guests">
              <p>One guest per line: <code>Name, seat count</code> (optionally <code>, invitation type</code>)</p>
              <textarea name="guestList" rows="5" placeholder="Sarah, 2&#10;James, 4, VIP"></textarea>
              <button type="submit" class="bb-btn" style="margin-top:0.75rem;">Add Guests</button>
            </form>
          </div>
          <% } %>

          <div class="bb-admin-card">
            <h2>Guest list</h2>
            <!-- input_20 Phase 8: export is admin-only, not in the client's
                 allowed capability list. -->
            <% if (!isClient) { %>
              <p><a class="bb-btn" href="/admin/events/<%= event.id %>/export">Download Guest List (Excel)</a></p>
            <% } %>
            <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><%= guest.name %></td>
                    <td><%= guest.seat_count %></td>
                    <td><%= guest.passcode %><% if (!isPreview) { %> <button type="button" class="bb-btn copy-btn" data-copy="<%= guest.passcode %>">Copy Code</button><% } %></td>
                    <td><%= guest.rsvp_status %></td>
                    <td><%= guest.checked_in ? 'Yes' : 'No' %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>

        <div class="bb-admin-card">
          <h2>Using this section</h2>
          <p>Paste one guest per line as <code>Name, seat count</code> and click Add Guests — a unique passcode is generated for each one automatically.</p>
          <p>Share the invite link above with everyone; each guest enters their own passcode from the Guest List to see their invitation.</p>
          <p>Use Copy Code next to a name to grab just that guest's passcode, for sending individually.</p>
          <p>Questions about this dashboard? Contact Weddings 103 support.</p>
        </div>
      </div>
    <% } %>

    <!-- Danger zone — input_20 Phase 8: entirely absent in client mode,
         not just hidden — delete is never an allowed client capability. -->
    <% if (!isClient) { %>
      <div class="bb-admin-section">
        <div class="bb-admin-card bb-danger">
          <h2>Danger zone</h2>
          <form method="POST" action="/admin/events/<%= event.id %>/delete" onsubmit="return confirm('Delete this wedding permanently? Summary metrics will be kept, but all guest and gatepass data will be gone for good.');">
            <button type="submit" class="bb-btn">Delete Wedding</button>
          </form>
        </div>
      </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>
