import { AdminLayout } from "./AdminLayout.tsx";

export const AdminInvitesPage = ({
  invites,
  apps,
  allRoles = [],
}: {
  invites: any[];
  apps: any[];
  allRoles?: any[];
}) => {
  return (
    <AdminLayout
      title="Invite & Onboarding Tokens"
      currentPath="/admin/invites"
    >
      <div
        id="status-banner"
        style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 4px; font-size: 0.9rem;"
      />

      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <div>
          <h2 style="margin: 0; border: none; padding: 0;">
            Invite & Onboarding Tokens
          </h2>
          <p style="color: #6c757d; font-size: 0.9rem; margin: 0.2rem 0 0 0;">
            Issue single-use, team limited-use, or campaign-wide registration
            tokens.
          </p>
        </div>
        <button
          type="button"
          class="btn-action btn-success"
          style="padding: 0.5rem 1rem; font-size: 0.9rem;"
          onclick="toggleCreateInviteForm()"
        >
          + Generate Onboarding Token
        </button>
      </div>

      <div
        id="create-invite-card"
        class="card"
        style="display: none; border-left: 4px solid #28a745; margin-bottom: 1.5rem;"
      >
        <h3>Generate User Onboarding Token</h3>
        <p style="color: #6c757d; font-size: 0.9rem;">
          Configure time bounds, usage limits, role assignments, and initial
          account activation status.
        </p>

        <form id="createInviteForm" onsubmit="handleCreateInvite(event)">
          {/* Row 1: Type & Target App */}
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
            <div>
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Token Provisioning Type *
              </label>
              <select
                id="inviteType"
                onchange="handleInviteTypeChange()"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
              >
                <option value="site_scoped">
                  Type 2: Site-Scoped Token (Pre-Authorized for App)
                </option>
                <option value="global_admin">
                  Type 1: Global Admin Token (Full System Access)
                </option>
                <option value="open_pending">
                  Type 3: General Open Token (Unassigned Access)
                </option>
              </select>
            </div>

            <div id="appSelectContainer">
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Target Application *
              </label>
              <select
                id="inviteAppId"
                onchange="updateInviteRoleOptions()"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
              >
                {apps.map((app) => (
                  <option value={app.id}>
                    {app.name} ({app.spiffe_id})
                  </option>
                ))}
              </select>
            </div>
          </div>

          {/* Row 2: Usage Limits & Assigned Role */}
          <div style="display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 1rem; margin-bottom: 1rem;">
            <div>
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Usage Policy (Capacity) *
              </label>
              <select
                id="inviteUsageType"
                onchange="handleUsageTypeChange()"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
              >
                <option value="single">
                  Single-Use (1 Person - Max Security)
                </option>
                <option value="limited">
                  Limited Multi-Use (Cap at N People)
                </option>
                <option value="unlimited">
                  Unlimited Time-Bound (Campaign / Beta)
                </option>
              </select>
            </div>

            <div id="maxUsesContainer" style="display: none;">
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Max Registrations *
              </label>
              <input
                type="number"
                id="inviteMaxUses"
                value="5"
                min="2"
                max="1000"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
              />
            </div>

            <div id="roleSelectContainer">
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Assigned Role *
              </label>
              <select
                id="inviteRole"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
              >
                {/* Dynamically populated */}
              </select>
            </div>
          </div>

          {/* Row 3: Expiration, Custom Code, Activation Toggle */}
          <div style="display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 1rem; margin-bottom: 1.2rem; align-items: flex-end;">
            <div>
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Expires In (Days)
              </label>
              <input
                type="number"
                id="inviteExpiresInDays"
                value="7"
                min="1"
                max="30"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
              />
            </div>

            <div>
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Custom Code (Optional)
              </label>
              <input
                type="text"
                id="inviteCustomCode"
                placeholder="Leave blank to auto-generate"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
              />
            </div>

            <div style="padding-bottom: 0.4rem;">
              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;">
                <input
                  type="checkbox"
                  id="inviteAutoActivate"
                  checked
                  style="width: 16px; height: 16px; cursor: pointer;"
                />
                Auto-Activate Account
              </label>
            </div>
          </div>

          <div style="display: flex; gap: 0.5rem;">
            <button type="submit" class="btn-action btn-success">
              Create Invite Token
            </button>
            <button
              type="button"
              class="btn-action"
              onclick="toggleCreateInviteForm()"
            >
              Cancel
            </button>
          </div>
        </form>

        <div
          id="generated-token-banner"
          style="display: none; margin-top: 1rem; padding: 1rem; background: #e7f5ea; border: 1px solid #28a745; border-radius: 4px;"
        >
          <strong style="color: #155724;">Token Created Successfully!</strong>
          <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center;">
            <code
              id="generatedTokenUrl"
              style="padding: 0.4rem 0.6rem; background: white; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.9rem; flex: 1; word-break: break-all;"
            >
            </code>
            <button
              type="button"
              class="btn-action btn-success"
              onclick="copyGeneratedTokenUrl()"
            >
              Copy Link
            </button>
          </div>
        </div>
      </div>

      {/* Invites Ledger Table */}
      <div class="card">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Invite Code</th>
                <th>Scope / App</th>
                <th>Role</th>
                <th>Usage & Capacity</th>
                <th>Status</th>
                <th>Activation</th>
                <th>Expires</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {invites.length === 0
                ? (
                  <tr>
                    <td
                      colspan={8}
                      style="text-align: center; color: #6c757d; padding: 2rem;"
                    >
                      No active or historical invite tokens found.
                    </td>
                  </tr>
                )
                : (
                  invites.map((inv) => {
                    const usesCount = inv.uses_count || 0;
                    const maxUses = inv.max_uses; // null = unlimited, number = limit
                    const isUnlimited = maxUses === null;
                    const isExhausted = !isUnlimited && usesCount >= maxUses;
                    const isExpired = new Date(inv.expires_at) < new Date();
                    const isActive = !isExhausted && !isExpired;

                    return (
                      <tr key={inv.id}>
                        <td>
                          <code style="background: #e9ecef; padding: 0.2rem 0.4rem; border-radius: 3px; font-weight: bold; color: #212529;">
                            {inv.code}
                          </code>
                        </td>
                        <td>
                          {inv.app_name
                            ? <strong>{inv.app_name}</strong>
                            : inv.role === "admin"
                            ? <span class="badge badge-info">Global Admin</span>
                            : (
                              <span class="badge badge-secondary">
                                General (Unassigned)
                              </span>
                            )}
                        </td>
                        <td>
                          <span class="badge badge-info">{inv.role}</span>
                        </td>
                        <td>
                          <div style="min-width: 110px;">
                            {isUnlimited
                              ? (
                                <span style="font-size: 0.85rem; font-weight: 500; color: #0d6efd;">
                                  {usesCount} claimed (Unlimited)
                                </span>
                              )
                              : (
                                <div>
                                  <span style="font-size: 0.85rem; font-weight: 600;">
                                    {usesCount} / {maxUses} used
                                  </span>
                                  <div style="background: #e9ecef; border-radius: 3px; height: 6px; width: 100%; margin-top: 4px; overflow: hidden;">
                                    <div
                                      style={`background: ${
                                        isExhausted ? "#6c757d" : "#28a745"
                                      }; height: 100%; width: ${
                                        Math.min(
                                          100,
                                          (usesCount / maxUses) * 100,
                                        )
                                      }%;`}
                                    />
                                  </div>
                                </div>
                              )}
                          </div>
                        </td>
                        <td>
                          {isExhausted && (
                            <span class="badge badge-secondary">Exhausted</span>
                          )}
                          {isExpired && !isExhausted && (
                            <span class="badge badge-suspended">Expired</span>
                          )}
                          {isActive && (
                            <span class="badge badge-active">Active</span>
                          )}
                        </td>
                        <td>
                          {inv.auto_activate !== false
                            ? (
                              <span style="font-size: 0.8rem; color: #198754; font-weight: 500;">
                                Auto-Active
                              </span>
                            )
                            : (
                              <span style="font-size: 0.8rem; color: #fd7e14; font-weight: 500;">
                                Requires Approval
                              </span>
                            )}
                        </td>
                        <td style="font-size: 0.85rem;">
                          {new Date(inv.expires_at).toLocaleDateString()}
                        </td>
                        <td>
                          <div style="display: flex; gap: 0.3rem; flex-wrap: wrap;">
                            {isActive && (
                              <button
                                type="button"
                                class="btn-action btn-success"
                                onclick={`copyInviteLink('${inv.code}')`}
                              >
                                Copy Link
                              </button>
                            )}
                            {usesCount > 0 && (
                              <button
                                type="button"
                                class="btn-action"
                                style="background: #e2e3e5; color: #383d41;"
                                onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
                              >
                                Claimed ({usesCount})
                              </button>
                            )}
                            {isActive && (
                              <button
                                type="button"
                                class="btn-action btn-warning"
                                onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
                              >
                                Revoke
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })
                )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Redemptions Modal */}
      <div
        id="redemptions-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center;"
      >
        <div style="background: white; border-radius: 8px; width: 90%; max-width: 550px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="margin: 0; font-size: 1.1rem;">
              Users Claimed:{" "}
              <code id="modal-invite-code" style="color: #0d6efd;"></code>
            </h3>
            <button
              type="button"
              onclick="closeRedemptionsModal()"
              style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #6c757d;"
            >
              &times;
            </button>
          </div>

          <div
            id="modal-redemptions-content"
            style="max-height: 350px; overflow-y: auto;"
          >
            <p style="color: #6c757d; font-size: 0.9rem;">
              Loading claimed users...
            </p>
          </div>

          <div style="text-align: right; margin-top: 1rem;">
            <button
              type="button"
              class="btn-action"
              onclick="closeRedemptionsModal()"
            >
              Close
            </button>
          </div>
        </div>
      </div>

      <script
        dangerouslySetInnerHTML={{
          __html: `
          const ROLES_CATALOG = ${JSON.stringify(allRoles)};

          function updateInviteRoleOptions() {
            const appSelect = document.getElementById('inviteAppId');
            const roleSelect = document.getElementById('inviteRole');
            if (!appSelect || !roleSelect) return;

            const appId = appSelect.value;
            roleSelect.innerHTML = '';

            const available = ROLES_CATALOG.filter(r => !r.app_id || r.app_id === appId);
            if (available.length === 0) {
              const opt = document.createElement('option');
              opt.value = 'user';
              opt.textContent = 'user';
              roleSelect.appendChild(opt);
              return;
            }

            available.forEach(r => {
              const opt = document.createElement('option');
              opt.value = r.name;
              opt.textContent = r.name + (r.app_id ? ' (App Custom)' : ' (Global)');
              roleSelect.appendChild(opt);
            });
          }

          if (document.getElementById('inviteAppId')) {
            updateInviteRoleOptions();
          }

          function showNotice(msg, isError) {
            const banner = document.getElementById('status-banner');
            banner.textContent = msg;
            banner.style.display = 'block';
            banner.style.background = isError ? '#f8d7da' : '#d1e7dd';
            banner.style.color = isError ? '#842029' : '#0f5132';
            banner.style.border = isError ? '1px solid #f5c2c7' : '1px solid #badbcc';
            setTimeout(() => { banner.style.display = 'none'; }, 6000);
          }

          function toggleCreateInviteForm() {
            const el = document.getElementById('create-invite-card');
            el.style.display = el.style.display === 'none' ? 'block' : 'none';
          }

          function handleInviteTypeChange() {
            const type = document.getElementById('inviteType').value;
            const appContainer = document.getElementById('appSelectContainer');
            const roleContainer = document.getElementById('roleSelectContainer');

            if (type === 'global_admin' || type === 'open_pending') {
              appContainer.style.display = 'none';
              roleContainer.style.display = 'none';
            } else {
              appContainer.style.display = 'block';
              roleContainer.style.display = 'block';
              updateInviteRoleOptions();
            }
          }

          function handleUsageTypeChange() {
            const usage = document.getElementById('inviteUsageType').value;
            const maxUsesContainer = document.getElementById('maxUsesContainer');
            maxUsesContainer.style.display = usage === 'limited' ? 'block' : 'none';
          }

          async function handleCreateInvite(e) {
            e.preventDefault();
            const type = document.getElementById('inviteType').value;
            let appId = null;
            let role = 'user';

            if (type === 'global_admin') {
              role = 'admin';
            } else if (type === 'open_pending') {
              role = 'user';
            } else {
              appId = document.getElementById('inviteAppId').value;
              role = document.getElementById('inviteRole').value;
            }

            const usageLimitType = document.getElementById('inviteUsageType').value;
            const maxUses = usageLimitType === 'limited' ? parseInt(document.getElementById('inviteMaxUses').value) || 5 : null;
            const autoActivate = document.getElementById('inviteAutoActivate').checked;
            const expiresInDays = parseInt(document.getElementById('inviteExpiresInDays').value) || 7;
            const customCode = document.getElementById('inviteCustomCode').value.trim();

            try {
              const res = await fetch('/api/admin/invites/create', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                  appId,
                  role,
                  usageLimitType,
                  maxUses,
                  autoActivate,
                  expiresInDays,
                  customCode: customCode || undefined,
                }),
              });
              const data = await res.json();
              if (res.ok) {
                const regUrl = window.location.origin + '/register?code=' + data.inviteCode;
                document.getElementById('generatedTokenUrl').textContent = regUrl;
                document.getElementById('generated-token-banner').style.display = 'block';
                showNotice('Invite token created successfully!', false);
                setTimeout(() => { window.location.reload(); }, 2500);
              } else {
                showNotice(data.error || 'Failed to create invite token', true);
              }
            } catch (err) {
              showNotice('Network error creating invite', true);
            }
          }

          function copyGeneratedTokenUrl() {
            const text = document.getElementById('generatedTokenUrl').textContent;
            navigator.clipboard.writeText(text);
            showNotice('Registration URL copied to clipboard: ' + text, false);
          }

          function copyInviteLink(code) {
            const url = window.location.origin + '/register?code=' + code;
            navigator.clipboard.writeText(url);
            showNotice('Registration link copied: ' + url, false);
          }

          async function revokeInvite(inviteId, code) {
            if (!confirm('Revoke invite code "' + code + '"?')) return;
            try {
              const res = await fetch('/api/admin/invites/' + inviteId, {
                method: 'DELETE',
              });
              if (res.ok) {
                showNotice('Invite token revoked', false);
                setTimeout(() => window.location.reload(), 800);
              } else {
                const data = await res.json();
                showNotice(data.error || 'Failed to revoke invite', true);
              }
            } catch (err) {
              showNotice('Network error', true);
            }
          }

          async function showRedemptionsModal(inviteId, code) {
            const modal = document.getElementById('redemptions-modal');
            const codeEl = document.getElementById('modal-invite-code');
            const contentEl = document.getElementById('modal-redemptions-content');

            codeEl.textContent = code;
            contentEl.innerHTML = '<p style="color: #6c757d;">Loading...</p>';
            modal.style.display = 'flex';

            try {
              const res = await fetch('/api/admin/invites/' + inviteId + '/redemptions');
              const data = await res.json();
              if (res.ok && data.redemptions && data.redemptions.length > 0) {
                let html = '<table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">';
                html += '<thead><tr style="text-align: left; border-bottom: 2px solid #dee2e6;">';
                html += '<th style="padding: 0.4rem;">Username</th>';
                html += '<th style="padding: 0.4rem;">Status</th>';
                html += '<th style="padding: 0.4rem;">Redeemed At</th>';
                html += '</tr></thead><tbody>';
                data.redemptions.forEach(r => {
                  html += '<tr style="border-bottom: 1px solid #dee2e6;">';
                  html += '<td style="padding: 0.4rem;"><strong>' + r.username + '</strong></td>';
                  html += '<td style="padding: 0.4rem;"><span class="badge badge-' + r.account_status + '">' + r.account_status + '</span></td>';
                  html += '<td style="padding: 0.4rem; color: #6c757d;">' + new Date(r.redeemed_at).toLocaleString() + '</td>';
                  html += '</tr>';
                });
                html += '</tbody></table>';
                contentEl.innerHTML = html;
              } else {
                contentEl.innerHTML = '<p style="color: #6c757d; text-align: center; padding: 1rem;">No users have redeemed this token yet.</p>';
              }
            } catch (err) {
              contentEl.innerHTML = '<p style="color: #dc3545;">Failed to load redemption details.</p>';
            }
          }

          function closeRedemptionsModal() {
            document.getElementById('redemptions-modal').style.display = 'none';
          }
        `,
        }}
      />
    </AdminLayout>
  );
};