export const ScopeModal = ({ apps = [] }: { apps?: any[] }) => {
  return (
    <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>
  );
};