<template>
  <div class="admin-prereg">
    <!-- Page Header -->
    <div class="page-header">
      <div class="header-row">
        <div>
          <h1>Pre-Registrants</h1>
          <p v-if="stats">
            {{ stats.total }} total · {{ stats.pending }} pending ·
            {{ stats.selected }} selected · {{ stats.invited }} invited ·
            {{ stats.accepted }} accepted
          </p>
        </div>
        <div class="header-actions">
          <button
            class="btn"
            :disabled="!selectedIds.length"
            @click="markAsSelected"
          >
            Mark as Selected ({{ selectedIds.length }})
          </button>
          <button
            class="btn btn-primary"
            :disabled="!invitableIds.length"
            @click="openInviteModal"
          >
            Send Invites ({{ invitableIds.length }})
          </button>
        </div>
      </div>
    </div>

    <!-- Search / Filter -->
    <div class="filter-bar">
      <div class="field" style="margin-bottom: 0; flex: 1">
        <input
          v-model="searchQuery"
          placeholder="Search by name, email, city, role..."
        />
      </div>
      <div class="field" style="margin-bottom: 0">
        <select v-model="statusFilter" aria-label="Filter by status">
          <option value="">All Statuses</option>
          <option value="pending">Pending</option>
          <option value="selected">Selected</option>
          <option value="invited">Invited</option>
          <option value="accepted">Accepted</option>
          <option value="expired">Expired</option>
        </select>
      </div>
    </div>

    <!-- Table -->
    <div class="table-wrap">
      <div v-if="pending" class="loading-state">
        <div class="spinner" />
        <span>Loading pre-registrants...</span>
      </div>

      <div v-else-if="error" class="error-state">
        Error loading pre-registrants: {{ error }}
      </div>

      <table v-else-if="filtered.length">
        <thead>
          <tr>
            <th class="col-check">
              <label class="custom-check" aria-label="Select all">
                <input
                  type="checkbox"
                  :checked="allVisibleSelected"
                  :indeterminate="!allVisibleSelected && someVisibleSelected"
                  @change="toggleSelectAll"
                />
                <span class="check-mark" />
              </label>
            </th>
            <th class="sortable" @click="toggleSort('name')">Name <span v-if="sortKey === 'name'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
            <th class="sortable" @click="toggleSort('email')">Email <span v-if="sortKey === 'email'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
            <th class="sortable" @click="toggleSort('city')">City <span v-if="sortKey === 'city'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
            <th class="sortable" @click="toggleSort('role')">Role <span v-if="sortKey === 'role'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
            <th class="sortable" @click="toggleSort('status')">Status <span v-if="sortKey === 'status'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
            <th class="sortable col-date" @click="toggleSort('createdAt')">Registered <span v-if="sortKey === 'createdAt'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span></th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="pr in filtered"
            :key="pr._id"
            class="selectable-row"
            :class="{ 'row-selected': selectedIds.includes(pr._id) }"
            @click="toggleSelect(pr._id)"
          >
            <td class="col-check" @click.stop>
              <label class="custom-check" :aria-label="`Select ${pr.name || pr.email}`">
                <input
                  type="checkbox"
                  :checked="selectedIds.includes(pr._id)"
                  @change="toggleSelect(pr._id)"
                />
                <span class="check-mark" />
              </label>
            </td>
            <td class="col-name">{{ pr.name || "—" }}</td>
            <td class="col-email">{{ pr.email }}</td>
            <td>{{ pr.city || "—" }}</td>
            <td>{{ pr.role || "—" }}</td>
            <td @click.stop>
              <select
                class="inline-status"
                :class="`status-${pr.status}`"
                :value="pr.status"
                :disabled="savingId === pr._id"
                aria-label="Change status"
                @change="updateStatus(pr._id, $event.target.value)"
              >
                <option value="pending">Pending</option>
                <option value="selected">Selected</option>
                <option value="invited">Invited</option>
                <option value="accepted">Accepted</option>
                <option value="expired">Expired</option>
              </select>
            </td>
            <td class="col-mono col-date">
              {{ formatDate(pr.createdAt) }}
            </td>
          </tr>
        </tbody>
      </table>

      <div v-else class="empty-state">
        No pre-registrants found matching your criteria
      </div>
    </div>

    <!-- Send Invites Modal -->
    <div
      v-if="showInviteModal"
      class="modal-overlay"
      @click.self="showInviteModal = false"
    >
      <div class="modal modal-wide">
        <div class="modal-header">
          <h2>Send Invitation Emails</h2>
          <button class="modal-close" @click="showInviteModal = false">
            &times;
          </button>
        </div>

        <div class="modal-body">
          <p class="help-text">
            Sending to <strong>{{ invitableIds.length }}</strong> pre-registrant{{
              invitableIds.length !== 1 ? "s" : ""
            }}. Each receives a unique invitation link valid for 48 hours.
          </p>

          <div class="field">
            <label>Email Template</label>
            <textarea v-model="inviteTemplate" rows="12"></textarea>
            <p class="help-text" style="margin-top: 4px">
              Tokens: <code>{name}</code>, <code>{acceptLink}</code>
            </p>
          </div>

          <div v-if="invitePreview" class="field">
            <label>Preview ({{ invitePreview.name || invitePreview.email }})</label>
            <pre class="preview-box">{{ invitePreviewText }}</pre>
          </div>

          <div v-if="inviteResults" class="results-box">
            <strong>Invitations sent</strong>
            <p class="status-ok">{{ inviteResults.sent }} sent</p>
            <p v-if="inviteResults.failed" class="status-error">
              {{ inviteResults.failed }} failed
            </p>
            <div v-if="inviteResults.results?.some((r) => !r.success)">
              <p
                v-for="fail in inviteResults.results.filter((r) => !r.success)"
                :key="fail.email"
                class="status-error"
                style="font-size: 11px"
              >
                {{ fail.email }}: {{ fail.error }}
              </p>
            </div>
          </div>
        </div>

        <div class="modal-actions">
          <button @click="showInviteModal = false" class="btn">
            {{ inviteResults ? "Done" : "Cancel" }}
          </button>
          <button
            v-if="!inviteResults"
            :disabled="sendingInvites"
            @click="submitInvites"
            class="btn btn-primary"
          >
            {{
              sendingInvites
                ? "Sending..."
                : `Send ${invitableIds.length} invitation${invitableIds.length !== 1 ? "s" : ""}`
            }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: "admin",
  middleware: "admin",
});

const toast = useToast();

const {
  data: preRegistrants,
  pending,
  error,
  refresh,
} = await useFetch("/api/admin/pre-registrants");

const { data: stats, refresh: refreshStats } = await useFetch(
  "/api/admin/pre-registrants/stats",
);

const searchQuery = ref("");
const statusFilter = ref("");
const selectedIds = ref([]);
const savingId = ref(null);
const sortKey = ref("");
const sortDir = ref("asc");

// Invite
const showInviteModal = ref(false);
const sendingInvites = ref(false);
const inviteResults = ref(null);

const DEFAULT_INVITE_TEMPLATE = `Hi {name},

You pre-registered for Ghost Guild, and we're ready for you.

Click below to accept your invitation, choose your circle, and set your contribution level:

{acceptLink}

This link expires in 48 hours. If it expires, we can send you a new one. Just reply to this email.

See you soon!

– Ghost Guild`;

const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);

const toggleSort = (key) => {
  if (sortKey.value === key) {
    sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
  } else {
    sortKey.value = key;
    sortDir.value = "asc";
  }
};

const filtered = computed(() => {
  if (!preRegistrants.value) return [];

  const result = preRegistrants.value.filter((pr) => {
    const q = searchQuery.value.toLowerCase();
    const matchesSearch =
      !q ||
      (pr.name || "").toLowerCase().includes(q) ||
      pr.email.toLowerCase().includes(q) ||
      (pr.city || "").toLowerCase().includes(q) ||
      (pr.role || "").toLowerCase().includes(q);

    const matchesStatus = !statusFilter.value || pr.status === statusFilter.value;

    return matchesSearch && matchesStatus;
  });

  if (sortKey.value) {
    const dir = sortDir.value === "asc" ? 1 : -1;
    const key = sortKey.value;
    result.sort((a, b) => {
      const aVal = (a[key] || "").toString().toLowerCase();
      const bVal = (b[key] || "").toString().toLowerCase();
      return aVal < bVal ? -dir : aVal > bVal ? dir : 0;
    });
  }

  return result;
});

// Selection helpers
const allVisibleSelected = computed(() => {
  if (!filtered.value.length) return false;
  return filtered.value.every((pr) => selectedIds.value.includes(pr._id));
});

const someVisibleSelected = computed(() => {
  return filtered.value.some((pr) => selectedIds.value.includes(pr._id));
});

// IDs of selected pre-registrants that can actually be invited (pending, selected, or invited for resend)
const invitableIds = computed(() => {
  if (!preRegistrants.value) return [];
  return selectedIds.value.filter((id) => {
    const pr = preRegistrants.value.find((p) => p._id === id);
    return pr && (pr.status === "pending" || pr.status === "selected" || pr.status === "invited");
  });
});

const toggleSelectAll = () => {
  if (allVisibleSelected.value) {
    const visibleIds = new Set(filtered.value.map((pr) => pr._id));
    selectedIds.value = selectedIds.value.filter((id) => !visibleIds.has(id));
  } else {
    const currentSet = new Set(selectedIds.value);
    for (const pr of filtered.value) {
      currentSet.add(pr._id);
    }
    selectedIds.value = [...currentSet];
  }
};

const toggleSelect = (id) => {
  const idx = selectedIds.value.indexOf(id);
  if (idx >= 0) {
    selectedIds.value.splice(idx, 1);
  } else {
    selectedIds.value.push(id);
  }
};

const updateStatus = async (id, newStatus) => {
  savingId.value = id;
  try {
    await $fetch(`/api/admin/pre-registrants/${id}`, {
      method: "PUT",
      body: { status: newStatus },
    });
    await refresh();
    await refreshStats();
    toast.add({ title: "Status updated", color: "green" });
  } catch (err) {
    toast.add({
      title: "Failed to update",
      description: err.data?.statusMessage || err.message,
      color: "red",
    });
  } finally {
    savingId.value = null;
  }
};

// Mark selected as "selected" status
const markAsSelected = async () => {
  try {
    await $fetch("/api/admin/pre-registrants/bulk-status", {
      method: "PATCH",
      body: { ids: selectedIds.value, status: "selected" },
    });
    await refresh();
    await refreshStats();
    selectedIds.value = [];
    toast.add({ title: "Marked as selected", color: "green" });
  } catch (err) {
    toast.add({
      title: "Failed to update status",
      description: err.data?.statusMessage || err.message,
      color: "red",
    });
  }
};

// Invite modal
const invitePreview = computed(() => {
  if (!invitableIds.value.length || !preRegistrants.value) return null;
  return preRegistrants.value.find((pr) => pr._id === invitableIds.value[0]);
});

const invitePreviewText = computed(() => {
  if (!invitePreview.value) return "";
  return inviteTemplate.value
    .replace(/\{name\}/g, invitePreview.value.name || "there")
    .replace(/\{acceptLink\}/g, "https://ghostguild.org/accept-invite#...");
});

const openInviteModal = () => {
  inviteResults.value = null;
  showInviteModal.value = true;
};

const submitInvites = async () => {
  sendingInvites.value = true;
  try {
    const result = await $fetch("/api/admin/pre-registrants/invite", {
      method: "POST",
      body: {
        preRegistrantIds: invitableIds.value,
        emailTemplate: inviteTemplate.value,
      },
    });

    inviteResults.value = result;
    await refresh();
    await refreshStats();
    selectedIds.value = [];

    toast.add({
      title: `Sent ${result.sent} invitation${result.sent !== 1 ? "s" : ""}`,
      description: result.failed ? `${result.failed} failed` : undefined,
      color: result.failed ? "orange" : "green",
    });
  } catch (err) {
    toast.add({
      title: "Failed to send invitations",
      description: err.data?.statusMessage || err.message,
      color: "red",
    });
  } finally {
    sendingInvites.value = false;
  }
};

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString();
};
</script>

<style scoped>
.admin-prereg {}

/* ---- PAGE HEADER ---- */
.page-header {
  padding: 28px 28px 20px;
  border-bottom: 1px dashed var(--border);
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header h1 {
  font-family: "Brygada 1918", serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-bright);
  line-height: 1.2;
  margin-bottom: 4px;
}

.page-header p {
  font-size: 12px;
  color: var(--text-dim);
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- FILTER BAR ---- */
.filter-bar {
  display: flex;
  gap: 12px;
  padding: 16px 28px;
  border-bottom: 1px dashed var(--border);
}

/* ---- TABLE ---- */
.table-wrap {
  padding: 0 28px 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

thead th {
  text-align: left;
  padding: 12px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border-bottom: 1px dashed var(--border);
  font-weight: normal;
}

thead th.sortable {
  cursor: pointer;
  user-select: none;
}

thead th.sortable:hover {
  color: var(--text-dim);
}

.sort-arrow {
  font-size: 10px;
  color: var(--candle);
}

tbody tr {
  border-bottom: 1px dashed var(--border);
  transition: background 0.1s;
}

tbody tr:hover {
  background: var(--surface);
}

tbody td {
  padding: 10px;
  color: var(--text);
  vertical-align: middle;
}

.col-check {
  width: 40px;
  padding-left: 12px;
  padding-right: 4px;
}

.selectable-row {
  cursor: pointer;
}

.row-selected {
  background: var(--surface);
}

/* ---- CUSTOM CHECKBOX ---- */
.custom-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 16px;
  height: 16px;
}

.custom-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check-mark {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}

.custom-check:hover .check-mark {
  border-color: var(--candle);
}

.custom-check input:checked + .check-mark {
  background: var(--candle);
  border-color: var(--candle);
}

.custom-check input:checked + .check-mark::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-1px);
}

.custom-check input:indeterminate + .check-mark {
  background: var(--candle);
  border-color: var(--candle);
}

.custom-check input:indeterminate + .check-mark::after {
  content: "";
  width: 8px;
  height: 0;
  border-bottom: 1.5px solid var(--bg);
}

.col-name {
  font-weight: 500;
  color: var(--text-bright);
}

.col-email {
  color: var(--text-dim);
  font-size: 11px;
}

.col-mono {
  font-variant-numeric: tabular-nums;
}

.col-date {
  font-size: 11px;
  color: var(--text-faint);
}

/* ---- STATUS BADGES ---- */
.status-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px dashed var(--border);
}

.status-pending {
  color: var(--text-faint);
}

.status-selected {
  color: var(--candle);
  border-color: var(--candle);
}

.status-invited {
  color: var(--text-bright);
  border-color: var(--text-dim);
}

.status-accepted {
  color: var(--green);
  border-color: var(--green);
}

.status-expired {
  color: var(--ember);
  border-color: var(--ember);
}

/* ---- INLINE STATUS SELECT ---- */
.inline-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px dashed var(--border);
  background: transparent;
  cursor: pointer;
  font-family: "Commit Mono", monospace;
}

.inline-status:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ---- STATUS INDICATORS ---- */
.status-ok {
  color: var(--green);
  font-size: 11px;
}

.status-error {
  color: var(--ember);
  font-size: 11px;
}

/* ---- MODALS ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal {
  background: var(--bg);
  border: 1px dashed var(--border);
  max-width: 440px;
  width: 100%;
  margin: 16px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-wide {
  max-width: 640px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px dashed var(--border);
}

.modal-header h2 {
  font-family: "Brygada 1918", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-bright);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px dashed var(--border);
}

/* ---- HELP TEXT ---- */
.help-text {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.help-text code {
  color: var(--text-bright);
  font-size: 11px;
}

/* ---- PREVIEW BOX ---- */
.preview-box {
  font-family: "Commit Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px dashed var(--border);
  padding: 16px;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 200px;
  line-height: 1.5;
}

/* ---- RESULTS BOX ---- */
.results-box {
  padding: 16px 20px;
  border: 1px dashed var(--border);
  margin-top: 16px;
}

.results-box strong {
  color: var(--text-bright);
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

/* ---- STATES ---- */
.loading-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-faint);
  font-size: 12px;
}

.error-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--ember);
  font-size: 12px;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-faint);
  font-size: 12px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px dashed var(--candle);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .page-header {
    padding: 24px 20px 16px;
  }

  .header-row {
    flex-direction: column;
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .filter-bar {
    flex-direction: column;
    padding: 12px 20px;
  }

  .table-wrap {
    padding: 0 12px 20px;
    overflow-x: auto;
  }

  table {
    min-width: 600px;
  }
}
</style>
