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

export const SessionsPage = ({
  sessions,
  currentSessionId,
  apps = [],
  isAdmin = false,
}: {
  sessions: any[];
  currentSessionId: string;
  apps?: any[];
  isAdmin?: boolean;
}) => {
  return (
    <AuthenticatedLayout
      title="Sessions & Delegations"
      currentPath="/dashboard/sessions"
      isAdmin={isAdmin}
    >
      <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);">
            Active Sessions & Delegations
          </h1>
          <p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
            Manage browser logins and spawn isolated sessions for AI agents and
            CLI tools.
          </p>
        </div>

        <button
          type="button"
          id="openDelegateBtn"
          class="btn-primary"
          style="min-height: 42px; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 0.4rem;"
          onclick="openDelegateDrawer()"
        >
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.5"
          >
            <path d="M12 5v14M5 12h14"></path>
          </svg>
          <span>Delegate Agent Session</span>
        </button>
      </div>

      {/* Delegate Agent Session Drawer */}
      <div
        id="delegateDrawer"
        class="card"
        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
      >
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
          <div>
            <h3 style="margin: 0 0 0.25rem 0; color: var(--text-primary);">
              Spawn Delegated Agent Session
            </h3>
            <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0;">
              Mint an isolated child session for an AI assistant, daemon, or CLI
              without exposing your primary browser credentials.
            </p>
          </div>
          <button
            type="button"
            onclick="closeDelegateDrawer()"
            style="background: none; border: none; font-size: 1.3rem; color: var(--text-muted); cursor: pointer;"
          >
            &times;
          </button>
        </div>

        <form
          id="delegateForm"
          onsubmit="handleDelegateSession(event)"
          style="margin-top: 1rem;"
        >
          {/* Label Input */}
          <div style="margin-bottom: 1.25rem;">
            <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
              Agent Label / Purpose *
            </label>
            <input
              type="text"
              id="delegateLabel"
              placeholder="e.g. Antigravity Coding Assistant, Jules Auto-Refactor, Sync Script"
              required
              style="width: 100%;"
            />
          </div>

          {/* Lifespan Presets */}
          <div style="margin-bottom: 1.25rem;">
            <label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
              Lifespan & Auto-Expiration
            </label>
            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
              <button
                type="button"
                class="pill-btn lifespan-pill active"
                data-hours="1"
                onclick="selectLifespan(this, 1)"
              >
                ⚡ 1 Hour (Quick Task)
              </button>
              <button
                type="button"
                class="pill-btn lifespan-pill"
                data-hours="12"
                onclick="selectLifespan(this, 12)"
              >
                🛠️ 12 Hours (Work Session)
              </button>
              <button
                type="button"
                class="pill-btn lifespan-pill"
                data-hours="24"
                onclick="selectLifespan(this, 24)"
              >
                📅 24 Hours
              </button>
              <button
                type="button"
                class="pill-btn lifespan-pill"
                data-hours="168"
                onclick="selectLifespan(this, 168)"
              >
                🗓️ 7 Days
              </button>
            </div>
            <input type="hidden" id="delegateHours" value="1" />
          </div>

          {/* Access Mode Presets */}
          <div style="margin-bottom: 1.25rem;">
            <label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
              Access Mode & Permissions
            </label>
            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
              <button
                type="button"
                class="pill-btn mode-pill active"
                data-mode="read_only"
                onclick="selectMode(this, 'read_only')"
              >
                👁️ Read-Only (Audit & Inspection)
              </button>
              <button
                type="button"
                class="pill-btn mode-pill"
                data-mode="operator"
                onclick="selectMode(this, 'operator')"
              >
                ⚡ Operator (App Actions)
              </button>
              {isAdmin && (
                <button
                  type="button"
                  class="pill-btn mode-pill"
                  data-mode="admin"
                  onclick="selectMode(this, 'admin')"
                >
                  👑 Full Admin
                </button>
              )}
              <button
                type="button"
                class="pill-btn mode-pill"
                data-mode="custom"
                onclick="selectMode(this, 'custom')"
              >
                🛠️ Custom Scopes
              </button>
            </div>
            <input type="hidden" id="delegateMode" value="read_only" />
          </div>

          {/* Progressive Disclosure: Specific App & Capability Scopes */}
          <details
            id="customScopesSection"
            style="margin-bottom: 1.25rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.75rem 1rem; background: var(--surface-muted);"
          >
            <summary style="cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--text-primary);">
              ▸ Customize Specific App Grants & Capabilities (Optional)
            </summary>
            <div style="margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
              <p style="margin: 0 0 0.5rem 0; font-size: 0.8rem; color: var(--text-secondary);">
                Select which subsidiary microservices and IAM capabilities this
                agent token is permitted to access:
              </p>

              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
                  <input
                    type="checkbox"
                    class="scope-checkbox"
                    value="read:audit"
                    checked
                  />
                  Read Audit Ledger
                </label>
                <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
                  <input
                    type="checkbox"
                    class="scope-checkbox"
                    value="read:users"
                    checked
                  />
                  Read Users List
                </label>
                <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
                  <input
                    type="checkbox"
                    class="scope-checkbox"
                    value="read:apps"
                    checked
                  />
                  Read Apps Registry
                </label>
                {apps.map((app) => (
                  <label
                    key={app.id}
                    style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;"
                  >
                    <input
                      type="checkbox"
                      class="scope-checkbox"
                      value={`app:${app.name}`}
                    />
                    {app.name} ({app.domain || "Internal"})
                  </label>
                ))}
              </div>
            </div>
          </details>

          <div style="display: flex; gap: 0.75rem;">
            <button
              type="submit"
              id="submitDelegateBtn"
              class="btn-primary"
              style="min-height: 42px;"
            >
              Mint & Delegate Session
            </button>
            <button
              type="button"
              class="btn-outline"
              onclick="closeDelegateDrawer()"
              style="min-height: 42px;"
            >
              Cancel
            </button>
          </div>
        </form>

        {/* Hand-Off Card (Revealed upon generation) */}
        <div
          id="handoffModal"
          style="display: none; margin-top: 1.5rem; padding: 1.25rem; background: var(--surface-card); border: 1px solid var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow-md);"
        >
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
            <div style="display: flex; align-items: center; gap: 0.5rem;">
              <span style="font-size: 1.2rem;">🤖</span>
              <strong style="color: var(--text-primary); font-size: 1rem;">
                Agent Session Delegated Successfully!
              </strong>
            </div>
            <span class="badge badge-success">Active Now</span>
          </div>

          <p style="font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem 0;">
            Copy this token or ready-to-run CLI string. You can revoke or extend
            this token anytime from the active session cards below.
          </p>

          <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem;">
            {/* 1-Click Magic Link */}
            <div>
              <label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem;">
                1-Click Magic Link (Web / Friend / Interview)
              </label>
              <div style="display: flex; gap: 0.5rem;">
                <code
                  id="handoffMagicLinkText"
                  style="flex: 1; padding: 0.5rem 0.75rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem; overflow-x: auto; white-space: nowrap; color: var(--success);"
                >
                </code>
                <button
                  type="button"
                  class="btn-primary"
                  style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
                  onclick="copyHandoff('magic')"
                >
                  Copy Link
                </button>
              </div>
            </div>

            {/* 1-Tap Copy CLI */}
            <div>
              <label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem;">
                Terminal Environment Export (CLI)
              </label>
              <div style="display: flex; gap: 0.5rem;">
                <code
                  id="handoffCliText"
                  style="flex: 1; padding: 0.5rem 0.75rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem; overflow-x: auto; white-space: nowrap; color: var(--text-primary);"
                >
                </code>
                <button
                  type="button"
                  class="btn-outline"
                  style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
                  onclick="copyHandoff('cli')"
                >
                  Copy CLI
                </button>
              </div>
            </div>

            {/* 1-Tap Copy cURL Header */}
            <div>
              <label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem;">
                HTTP Authorization Header
              </label>
              <div style="display: flex; gap: 0.5rem;">
                <code
                  id="handoffCurlText"
                  style="flex: 1; padding: 0.5rem 0.75rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem; overflow-x: auto; white-space: nowrap; color: var(--text-primary);"
                >
                </code>
                <button
                  type="button"
                  class="btn-outline"
                  style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
                  onclick="copyHandoff('curl')"
                >
                  Copy Header
                </button>
              </div>
            </div>
          </div>

          <button
            type="button"
            class="btn-outline"
            style="width: 100%; min-height: 38px; justify-content: center; font-size: 0.85rem;"
            onclick="closeHandoffModal()"
          >
            Done (Session is Active)
          </button>
        </div>
      </div>

      {/* Edit Scopes Modal */}
      <div
        id="editScopesModal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
      >
        <div style="background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: 500px; padding: 1.5rem; box-shadow: var(--shadow-lg);">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
              Update Scopes for:{" "}
              <span id="editScopesLabel" style="color: var(--primary);"></span>
            </h3>
            <button
              type="button"
              onclick="closeEditScopesModal()"
              style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
            >
              &times;
            </button>
          </div>

          <input type="hidden" id="editScopesSessionId" value="" />

          <div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem;">
            <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
              <input
                type="checkbox"
                id="scope_read_audit"
                class="edit-scope-chk"
                value="read:audit"
              />
              Read Audit Ledger
            </label>
            <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
              <input
                type="checkbox"
                id="scope_read_users"
                class="edit-scope-chk"
                value="read:users"
              />
              Read Users List
            </label>
            <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
              <input
                type="checkbox"
                id="scope_read_apps"
                class="edit-scope-chk"
                value="read:apps"
              />
              Read Apps Registry
            </label>
            {apps.map((app) => (
              <label
                key={app.id}
                style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;"
              >
                <input
                  type="checkbox"
                  class="edit-scope-chk"
                  value={`app:${app.name}`}
                />
                Access {app.name}
              </label>
            ))}
          </div>

          <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
            <button
              type="button"
              class="btn-outline"
              onclick="closeEditScopesModal()"
            >
              Cancel
            </button>
            <button
              type="button"
              class="btn-primary"
              onclick="saveUpdatedScopes()"
            >
              Save Scopes
            </button>
          </div>
        </div>
      </div>

      {/* Desktop Table View (≥ 768px) */}
      <div class="card desktop-only" style="display: none;">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Type & Label</th>
                <th>Permissions</th>
                <th>Activity</th>
                <th>Expires</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {sessions.length === 0
                ? (
                  <tr>
                    <td
                      colSpan={5}
                      style="text-align: center; padding: 2rem; color: var(--text-muted);"
                    >
                      No active sessions found.
                    </td>
                  </tr>
                )
                : (
                  sessions.map((session) => {
                    const isCurrent = session.id === currentSessionId;
                    const isAgent = !!session.is_agent;
                    const scopes = Array.isArray(session.custom_scopes)
                      ? session.custom_scopes
                      : [];

                    return (
                      <tr key={session.id}>
                        <td>
                          <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <span style="font-size: 1.1rem;">
                              {isAgent ? "🤖" : isCurrent ? "📱" : "💻"}
                            </span>
                            <div>
                              <strong style="color: var(--text-primary);">
                                {session.label ||
                                  (isCurrent ? "This Device" : "Remote Device")}
                              </strong>
                              <div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
                                {session.id.substring(0, 14)}...
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>
                          {isAgent
                            ? (
                              <span class="badge badge-info">
                                {scopes.length > 0
                                  ? `${scopes.length} Scopes`
                                  : "Full Access"}
                              </span>
                            )
                            : (
                              <span class="badge badge-success">
                                Interactive
                              </span>
                            )}
                        </td>
                        <td style="color: var(--text-secondary); font-size: 0.85rem;">
                          {session.last_activity_action
                            ? (
                              <div>
                                <span style="color: var(--primary); font-family: monospace; font-size: 0.8rem;">
                                  {session.last_activity_action}
                                </span>
                                <div style="font-size: 0.75rem; color: var(--text-muted);">
                                  {new Date(
                                    session.last_activity_at ||
                                      session.created_at,
                                  ).toLocaleTimeString()}
                                </div>
                              </div>
                            )
                            : (
                              <span>
                                {new Date(session.created_at)
                                  .toLocaleDateString()}
                              </span>
                            )}
                        </td>
                        <td style="color: var(--text-secondary); font-size: 0.85rem;">
                          {new Date(session.expires_at).toLocaleString()}
                        </td>
                        <td>
                          <div style="display: flex; gap: 0.35rem; align-items: center;">
                            {isAgent && (
                              <>
                                <button
                                  type="button"
                                  class="btn-outline"
                                  style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 30px;"
                                  onclick={`extendSession('${session.id}', 1)`}
                                  title="Extend session by 1 hour"
                                >
                                  +1h
                                </button>
                                <button
                                  type="button"
                                  class="btn-outline"
                                  style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 30px;"
                                  onclick={`openEditScopesModal('${session.id}', '${
                                    session.label || "Agent"
                                  }', ${
                                    JSON.stringify(JSON.stringify(scopes))
                                  })`}
                                  title="Edit permissions"
                                >
                                  Scopes
                                </button>
                              </>
                            )}
                            {!isCurrent && (
                              <button
                                type="button"
                                class="btn-danger revoke-btn"
                                data-session-id={session.id}
                                style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 30px;"
                              >
                                Revoke
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })
                )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Mobile Adaptive Cards View (< 768px) */}
      <div
        class="mobile-only"
        style="display: flex; flex-direction: column; gap: 1rem;"
      >
        {sessions.length === 0
          ? (
            <div class="card" style="text-align: center; padding: 2rem;">
              <p style="color: var(--text-muted); margin: 0;">
                No active sessions found.
              </p>
            </div>
          )
          : (
            sessions.map((session) => {
              const isCurrent = session.id === currentSessionId;
              const isAgent = !!session.is_agent;
              const scopes = Array.isArray(session.custom_scopes)
                ? session.custom_scopes
                : [];

              return (
                <div class="card" key={session.id} style="margin-bottom: 0;">
                  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
                    <div style="display: flex; align-items: center; gap: 0.65rem;">
                      <div style="display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--surface-muted); border-radius: var(--radius-md); font-size: 1.2rem;">
                        {isAgent ? "🤖" : isCurrent ? "📱" : "💻"}
                      </div>
                      <div>
                        <div style="font-weight: 700; font-size: 0.95rem; color: var(--text-primary);">
                          {session.label ||
                            (isCurrent ? "This Device" : "Remote Device")}
                        </div>
                        <div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
                          {session.id.substring(0, 14)}...
                        </div>
                      </div>
                    </div>

                    {isAgent
                      ? <span class="badge badge-info">Agent Token</span>
                      : isCurrent
                      ? <span class="badge badge-success">Active Now</span>
                      : <span class="badge badge-secondary">Active</span>}
                  </div>

                  <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.6;">
                    {isAgent && (
                      <div style="margin-bottom: 0.25rem;">
                        <strong>Scopes:</strong>{" "}
                        {scopes.length > 0 ? scopes.join(", ") : "Full Access"}
                      </div>
                    )}
                    <div>
                      <strong>Expires:</strong>{" "}
                      {new Date(session.expires_at).toLocaleString()}
                    </div>
                    {session.last_activity_action && (
                      <div>
                        <strong>Last Active:</strong>{" "}
                        {session.last_activity_action} ({new Date(
                          session.last_activity_at || session.created_at,
                        ).toLocaleTimeString()})
                      </div>
                    )}
                  </div>

                  <div style="display: flex; gap: 0.5rem;">
                    {isAgent && (
                      <>
                        <button
                          type="button"
                          class="btn-outline"
                          style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.8rem;"
                          onclick={`extendSession('${session.id}', 1)`}
                        >
                          +1h Extend
                        </button>
                        <button
                          type="button"
                          class="btn-outline"
                          style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.8rem;"
                          onclick={`openEditScopesModal('${session.id}', '${
                            session.label || "Agent"
                          }', ${JSON.stringify(JSON.stringify(scopes))})`}
                        >
                          Scopes
                        </button>
                      </>
                    )}
                    {!isCurrent && (
                      <button
                        type="button"
                        class="btn-danger revoke-btn"
                        data-session-id={session.id}
                        style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
                      >
                        Revoke
                      </button>
                    )}
                  </div>
                </div>
              );
            })
          )}
      </div>

      <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; }
          }
          .pill-btn {
            background: var(--surface-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            padding: 0.4rem 0.85rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
          }
          .pill-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
          }
          .pill-btn.active {
            background: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
          }
        `}
      </style>

      <script
        dangerouslySetInnerHTML={{
          __html: `
          let lastMintedToken = "";

          function showNotice(msg, isError) {
            const banner = document.getElementById('status-banner');
            banner.textContent = msg;
            banner.style.display = 'block';
            banner.style.background = isError ? 'var(--danger-bg)' : 'var(--success-bg)';
            banner.style.color = isError ? 'var(--danger-text)' : 'var(--success-text)';
            banner.style.border = isError ? '1px solid var(--danger-border)' : '1px solid var(--success-border)';
            setTimeout(() => { banner.style.display = 'none'; }, 5000);
          }

          function openDelegateDrawer() {
            document.getElementById('delegateDrawer').style.display = 'block';
            document.getElementById('delegateDrawer').scrollIntoView({ behavior: 'smooth' });
          }

          function closeDelegateDrawer() {
            document.getElementById('delegateDrawer').style.display = 'none';
          }

          function selectLifespan(btn, hours) {
            document.querySelectorAll('.lifespan-pill').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            document.getElementById('delegateHours').value = hours;
          }

          function selectMode(btn, mode) {
            document.querySelectorAll('.mode-pill').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            document.getElementById('delegateMode').value = mode;

            const accordion = document.getElementById('customScopesSection');
            if (mode === 'custom') {
              accordion.open = true;
            }
          }

          async function handleDelegateSession(e) {
            e.preventDefault();
            const label = document.getElementById('delegateLabel').value.trim();
            const lifespanHours = parseInt(document.getElementById('delegateHours').value) || 1;
            const mode = document.getElementById('delegateMode').value;
            
            const customScopes = [];
            if (mode === 'custom') {
              document.querySelectorAll('.scope-checkbox:checked').forEach(cb => {
                customScopes.push(cb.value);
              });
            }

            const btn = document.getElementById('submitDelegateBtn');
            btn.disabled = true;
            btn.textContent = 'Minting...';

            try {
              const res = await fetch('/api/sessions/delegate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ label, lifespanHours, mode, customScopes }),
              });
              const data = await res.json();
              if (res.ok) {
                lastMintedToken = data.token;
                document.getElementById('handoffMagicLinkText').textContent = window.location.origin + '/pass?token=' + data.token;
                document.getElementById('handoffCliText').textContent = 'export AUTH_YES_TOKEN="' + data.token + '"';
                document.getElementById('handoffCurlText').textContent = '-H "Authorization: Bearer ' + data.token + '"';
                document.getElementById('handoffModal').style.display = 'block';
                showNotice('Delegated session created for: ' + data.label, false);
              } else {
                showNotice(data.error || 'Failed to delegate session', true);
              }
            } catch (err) {
              showNotice('Network error delegating session', true);
            } finally {
              btn.disabled = false;
              btn.textContent = 'Mint & Delegate Session';
            }
          }

          function copyHandoff(type) {
            let text = '';
            if (type === 'link') text = document.getElementById('handoffLinkText').textContent;
            if (type === 'cli') text = document.getElementById('handoffCliText').textContent;
            if (type === 'curl') text = document.getElementById('handoffCurlText').textContent;
            if (type === 'magic') text = document.getElementById('handoffMagicLinkText').textContent;
            navigator.clipboard.writeText(text);
            showNotice('Copied to clipboard: ' + text, false);
          }

          function closeHandoffModal() {
            document.getElementById('handoffModal').style.display = 'none';
            window.location.reload();
          }

          async function extendSession(sessionId, hours) {
            try {
              const res = await fetch('/api/sessions/' + sessionId + '/extend', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ extendHours: hours }),
              });
              if (res.ok) {
                showNotice('Session extended by ' + hours + ' hour(s)!', false);
                setTimeout(() => window.location.reload(), 600);
              } else {
                const data = await res.json();
                showNotice(data.error || 'Failed to extend session', true);
              }
            } catch (err) {
              showNotice('Network error extending session', true);
            }
          }

          function openEditScopesModal(sessionId, label, scopesJson) {
            const scopes = JSON.parse(scopesJson || '[]');
            document.getElementById('editScopesSessionId').value = sessionId;
            document.getElementById('editScopesLabel').textContent = label;

            document.querySelectorAll('.edit-scope-chk').forEach(cb => {
              cb.checked = scopes.includes(cb.value);
            });

            document.getElementById('editScopesModal').style.display = 'flex';
          }

          function closeEditScopesModal() {
            document.getElementById('editScopesModal').style.display = 'none';
          }

          async function saveUpdatedScopes() {
            const sessionId = document.getElementById('editScopesSessionId').value;
            const customScopes = [];
            document.querySelectorAll('.edit-scope-chk:checked').forEach(cb => {
              customScopes.push(cb.value);
            });

            try {
              const res = await fetch('/api/sessions/' + sessionId + '/scopes', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ customScopes }),
              });
              if (res.ok) {
                showNotice('Session scopes updated!', false);
                setTimeout(() => window.location.reload(), 600);
              } else {
                const data = await res.json();
                showNotice(data.error || 'Failed to update scopes', true);
              }
            } catch (err) {
              showNotice('Network error updating scopes', true);
            }
          }

          // Revoke handler
          document.querySelectorAll('.revoke-btn').forEach(btn => {
            btn.addEventListener('click', async (e) => {
              if (!confirm('Revoke this session immediately?')) return;

              const sessionId = e.currentTarget.getAttribute('data-session-id');
              const originalText = e.currentTarget.textContent;
              e.currentTarget.textContent = 'Revoking...';
              e.currentTarget.disabled = true;

              try {
                const res = await fetch(\`/api/sessions/\${sessionId}\`, {
                  method: 'DELETE'
                });

                if (res.ok) {
                  window.location.reload();
                } else {
                  const data = await res.json();
                  showNotice(data.error || 'Failed to revoke session', true);
                  e.currentTarget.textContent = originalText;
                  e.currentTarget.disabled = false;
                }
              } catch (err) {
                showNotice('Network error revoking session', true);
                e.currentTarget.textContent = originalText;
                e.currentTarget.disabled = false;
              }
            });
          });
        `,
        }}
      >
      </script>
    </AuthenticatedLayout>
  );
};