import { AdminLayout } from "./AdminLayout.tsx";
import { AdminTable } from "./admin/AdminTable.tsx";
import { AdminModal } from "./admin/AdminModal.tsx";
import { InviteDrawer } from "./admin/drawers/InviteDrawer.tsx";
import { AdminInvitesScript } from "./admin/AdminInvitesScript.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: var(--radius-md); font-size: 0.9rem;"
      />

      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
        <div>
          <h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
            Invite & Onboarding Tokens
          </h1>
          <p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
            Issue single-use, team limited-use, or campaign registration tokens.
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
          {/* Instant Search Bar */}
          <div style="position: relative; min-width: 220px;">
            <input
              type="text"
              id="inviteSearchInput"
              placeholder="Search invite tokens..."
              oninput="filterInvitesList()"
              style="width: 100%; padding: 0.5rem 1rem 0.5rem 2.25rem; font-size: 0.875rem;"
            />
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none;"
            >
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </div>

          <button
            type="button"
            class="btn-primary"
            style="min-height: 40px;"
            onclick="toggleCreateInviteForm()"
          >
            + Generate Token
          </button>
        </div>
      </div>

      <InviteDrawer apps={apps} />

      <AdminTable
        id="invitesTable"
        headers={[
          "Invite Code",
          "Target App / Scope",
          "Role",
          "Capacity & Usage",
          "Status",
          "Expires",
          "Actions",
        ]}
        isEmpty={invites.length === 0}
        emptyState="No active or historical invite tokens found."
        desktopRows={invites.map((inv) => {
          const usesCount = inv.uses_count || 0;
          const maxUses = inv.max_uses;
          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}
              class="invite-row"
              data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
                .toLowerCase()}
            >
              <td>
                <code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
                  {inv.code}
                </code>
              </td>
              <td style="font-size: 0.85rem;">
                {inv.app_name || (
                  <span style="color: var(--text-muted); font-style: italic;">
                    Global / Open
                  </span>
                )}
              </td>
              <td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
                {inv.role}
              </td>
              <td style="font-size: 0.85rem;">
                {isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
              </td>
              <td>
                {isExhausted && (
                  <span class="badge badge-secondary">Exhausted</span>
                )}
                {isExpired && !isExhausted && (
                  <span class="badge badge-danger">Expired</span>
                )}
                {isActive && <span class="badge badge-success">Active</span>}
              </td>
              <td style="font-size: 0.85rem; color: var(--text-secondary);">
                {new Date(inv.expires_at).toLocaleDateString()}
              </td>
              <td>
                <div style="display: flex; gap: 0.35rem; flex-wrap: wrap;">
                  {isActive && (
                    <button
                      type="button"
                      class="btn-primary"
                      style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                      onclick={`copyInviteLink('${inv.code}')`}
                    >
                      Copy Link
                    </button>
                  )}
                  {usesCount > 0 && (
                    <button
                      type="button"
                      class="btn-outline"
                      style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                      onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
                    >
                      Claimed ({usesCount})
                    </button>
                  )}
                  {isActive && (
                    <button
                      type="button"
                      class="btn-danger"
                      style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                      onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
                    >
                      Revoke
                    </button>
                  )}
                </div>
              </td>
            </tr>
          );
        })}
        mobileCards={invites.map((inv) => {
          const usesCount = inv.uses_count || 0;
          const maxUses = inv.max_uses;
          const isUnlimited = maxUses === null;
          const isExhausted = !isUnlimited && usesCount >= maxUses;
          const isExpired = new Date(inv.expires_at) < new Date();
          const isActive = !isExhausted && !isExpired;

          return (
            <div
              class="card invite-card"
              key={inv.id}
              data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
                .toLowerCase()}
              style="margin-bottom: 0; padding: 1rem;"
            >
              <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                <div>
                  <code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; font-size: 1rem; color: var(--primary);">
                    {inv.code}
                  </code>
                  <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">
                    {inv.app_name || "Global / Open"} • Role:{" "}
                    <strong>{inv.role}</strong>
                  </div>
                </div>

                {isExhausted && (
                  <span class="badge badge-secondary">Exhausted</span>
                )}
                {isExpired && !isExhausted && (
                  <span class="badge badge-danger">Expired</span>
                )}
                {isActive && <span class="badge badge-success">Active</span>}
              </div>

              <div style="margin-bottom: 0.75rem;">
                <div style="font-size: 0.8rem; color: var(--text-secondary); display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
                  <span>
                    Capacity:{" "}
                    {isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
                  </span>
                  <span>
                    Expires: {new Date(inv.expires_at).toLocaleDateString()}
                  </span>
                </div>
                {!isUnlimited && (
                  <div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; overflow: hidden;">
                    <div
                      style={`background: ${
                        isExhausted ? "var(--text-muted)" : "var(--success)"
                      }; height: 100%; width: ${
                        Math.min(100, (usesCount / maxUses) * 100)
                      }%;`}
                    />
                  </div>
                )}
              </div>

              <div style="display: flex; gap: 0.5rem;">
                {isActive && (
                  <button
                    type="button"
                    class="btn-primary"
                    style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
                    onclick={`copyInviteLink('${inv.code}')`}
                  >
                    Copy Link
                  </button>
                )}
                {usesCount > 0 && (
                  <button
                    type="button"
                    class="btn-outline"
                    style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
                    onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
                  >
                    Claimed ({usesCount})
                  </button>
                )}
                {isActive && (
                  <button
                    type="button"
                    class="btn-danger"
                    style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
                    onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
                  >
                    Revoke
                  </button>
                )}
              </div>
            </div>
          );
        })}
      />

      {/* Redemptions Modal */}
      <AdminModal
        id="redemptions-modal"
        title={
          <span>
            Users Claimed:{" "}
            <code id="modal-invite-code" style="color: var(--primary);">
            </code>
          </span>
        }
        onClose="closeRedemptionsModal()"
      >
        <div
          id="modal-redemptions-content"
          style="max-height: 350px; overflow-y: auto;"
        >
          <p style="color: var(--text-muted); font-size: 0.9rem;">
            Loading claimed users...
          </p>
        </div>

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

      <style>
        {`
          @media (min-width: 768px) {
            .desktop-only { display: block !important; }
            .mobile-only { display: none !important; }
          }
          @media (max-width: 767px) {
            .desktop-only { display: none !important; }
            .mobile-only { display: flex !important; }
          }
        `}
      </style>

      <AdminInvitesScript allRoles={allRoles} />
    </AdminLayout>
  );
};