import re

with open('ui/components/AdminRolesPage.tsx', 'r') as f:
    content = f.read()


roles_table_desktop_mobile = """        {/* Desktop Table View (≥ 768px) */}
        <div class="table-container desktop-only" style="display: none;">
          <table id="rolesTable">
            <thead>
              <tr>
                <th>Role Identifier</th>
                <th>Scope</th>
                <th>Description</th>
                <th>Created</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {roles.length === 0
                ? (
                  <tr>
                    <td
                      colSpan={5}
                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
                    >
                      No roles found.
                    </td>
                  </tr>
                )
                : (
                  roles.map((r) => {
                    const isGlobal = !r.app_id;
                    const isCoreAdmin = isGlobal && r.name === "admin";

                    return (
                      <tr
                        key={r.id}
                        class="role-row"
                        data-app-id={r.app_id || "global"}
                        data-search={`${r.name} ${r.description || ""} ${
                          isGlobal ? "global" : r.app_name || ""
                        }`.toLowerCase()}
                      >
                        <td>
                          <strong style="font-family: monospace; font-size: 0.95rem; color: var(--text-primary);">
                            {r.name}
                          </strong>
                        </td>
                        <td>
                          {isGlobal
                            ? (
                              <span class="badge badge-info">
                                Global (Shared)
                              </span>
                            )
                            : (
                              <span class="badge badge-warning">
                                {r.app_name || "App-Specific"}
                              </span>
                            )}
                        </td>
                        <td style="color: var(--text-secondary); font-size: 0.85rem;">
                          {r.description || "-"}
                        </td>
                        <td style="font-size: 0.85rem; color: var(--text-secondary);">
                          {new Date(r.created_at).toLocaleDateString()}
                        </td>
                        <td>
                          {!isCoreAdmin
                            ? (
                              <div style="display: flex; gap: 0.35rem;">
                                <button
                                  type="button"
                                  class="btn-outline"
                                  style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                                  onclick={`openEditRoleDrawer(${
                                    JSON.stringify(JSON.stringify(r))
                                  })`}
                                >
                                  Edit
                                </button>
                                <button
                                  type="button"
                                  class="btn-danger"
                                  style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                                  onclick={`deleteRole('${r.id}', '${r.name}')`}
                                >
                                  Delete
                                </button>
                              </div>
                            )
                            : (
                              <span style="font-size: 0.75rem; color: var(--text-muted); font-style: italic;">
                                Immutable System Role
                              </span>
                            )}
                        </td>
                      </tr>
                    );
                  })
                )}
            </tbody>
          </table>
        </div>

        {/* Mobile View (< 768px) */}
        <div
          id="rolesMobileDeck"
          class="mobile-only"
          style="display: flex; flex-direction: column; gap: 0.75rem;"
        >
          {roles.length === 0
            ? (
              <div class="card" style="text-align: center; padding: 2rem;">
                <p style="color: var(--text-muted); margin: 0;">
                  No roles found.
                </p>
              </div>
            )
            : (
              roles.map((r) => {
                const isGlobal = !r.app_id;
                const isCoreAdmin = isGlobal && r.name === "admin";

                return (
                  <div
                    class="card role-card"
                    key={r.id}
                    data-app-id={r.app_id || "global"}
                    data-search={`${r.name} ${r.description || ""} ${
                      isGlobal ? "global" : r.app_name || ""
                    }`.toLowerCase()}
                    style="margin-bottom: 0; padding: 1rem;"
                  >
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                      <strong style="font-family: monospace; font-size: 1.05rem; color: var(--text-primary);">
                        {r.name}
                      </strong>
                      {isGlobal
                        ? (
                          <span class="badge badge-info">
                            Global (Shared)
                          </span>
                        )
                        : (
                          <span class="badge badge-warning">
                            {r.app_name || "App-Specific"}
                          </span>
                        )}
                    </div>

                    <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5;">
                      <p style="margin: 0 0 0.5rem 0;">
                        {r.description || "No description provided."}
                      </p>
                      <div style="font-size: 0.8rem;">
                        Created: {new Date(r.created_at).toLocaleDateString()}
                      </div>
                    </div>

                    {!isCoreAdmin
                      ? (
                        <div style="display: flex; gap: 0.5rem;">
                          <button
                            type="button"
                            class="btn-outline"
                            style="flex: 1; min-height: 38px; font-size: 0.85rem;"
                            onclick={`openEditRoleDrawer(${
                              JSON.stringify(JSON.stringify(r))
                            })`}
                          >
                            Edit Role
                          </button>
                          <button
                            type="button"
                            class="btn-danger"
                            style="flex: 1; min-height: 38px; font-size: 0.85rem;"
                            onclick={`deleteRole('${r.id}', '${r.name}')`}
                          >
                            Delete
                          </button>
                        </div>
                      )
                      : (
                        <div style="text-align: center; padding: 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--text-muted); font-style: italic;">
                          Immutable System Role
                        </div>
                      )}
                  </div>
                );
              })
            )}
        </div>"""

roles_table_replacement = """        <AdminTable
          id="rolesTable"
          headers={[
            "Role Identifier",
            "Scope",
            "Description",
            "Created",
            "Actions",
          ]}
          isEmpty={roles.length === 0}
          emptyState="No roles found."
          desktopRows={roles.map((r) => {
            const isGlobal = !r.app_id;
            const isCoreAdmin = isGlobal && r.name === "admin";

            return (
              <tr
                key={r.id}
                class="role-row"
                data-app-id={r.app_id || "global"}
                data-search={`${r.name} ${r.description || ""} ${
                  isGlobal ? "global" : r.app_name || ""
                }`.toLowerCase()}
              >
                <td>
                  <strong style="font-family: monospace; font-size: 0.95rem; color: var(--text-primary);">
                    {r.name}
                  </strong>
                </td>
                <td>
                  {isGlobal
                    ? (
                      <span class="badge badge-info">
                        Global (Shared)
                      </span>
                    )
                    : (
                      <span class="badge badge-warning">
                        {r.app_name || "App-Specific"}
                      </span>
                    )}
                </td>
                <td style="color: var(--text-secondary); font-size: 0.85rem;">
                  {r.description || "-"}
                </td>
                <td style="font-size: 0.85rem; color: var(--text-secondary);">
                  {new Date(r.created_at).toLocaleDateString()}
                </td>
                <td>
                  {!isCoreAdmin
                    ? (
                      <div style="display: flex; gap: 0.35rem;">
                        <button
                          type="button"
                          class="btn-outline"
                          style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                          onclick={`openEditRoleDrawer(${
                            JSON.stringify(JSON.stringify(r))
                          })`}
                        >
                          Edit
                        </button>
                        <button
                          type="button"
                          class="btn-danger"
                          style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                          onclick={`deleteRole('${r.id}', '${r.name}')`}
                        >
                          Delete
                        </button>
                      </div>
                    )
                    : (
                      <span style="font-size: 0.75rem; color: var(--text-muted); font-style: italic;">
                        Immutable System Role
                      </span>
                    )}
                </td>
              </tr>
            );
          })}
          mobileCards={roles.map((r) => {
            const isGlobal = !r.app_id;
            const isCoreAdmin = isGlobal && r.name === "admin";

            return (
              <div
                class="card role-card"
                key={r.id}
                data-app-id={r.app_id || "global"}
                data-search={`${r.name} ${r.description || ""} ${
                  isGlobal ? "global" : r.app_name || ""
                }`.toLowerCase()}
                style="margin-bottom: 0; padding: 1rem;"
              >
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                  <strong style="font-family: monospace; font-size: 1.05rem; color: var(--text-primary);">
                    {r.name}
                  </strong>
                  {isGlobal
                    ? (
                      <span class="badge badge-info">
                        Global (Shared)
                      </span>
                    )
                    : (
                      <span class="badge badge-warning">
                        {r.app_name || "App-Specific"}
                      </span>
                    )}
                </div>

                <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5;">
                  <p style="margin: 0 0 0.5rem 0;">
                    {r.description || "No description provided."}
                  </p>
                  <div style="font-size: 0.8rem;">
                    Created: {new Date(r.created_at).toLocaleDateString()}
                  </div>
                </div>

                {!isCoreAdmin
                  ? (
                    <div style="display: flex; gap: 0.5rem;">
                      <button
                        type="button"
                        class="btn-outline"
                        style="flex: 1; min-height: 38px; font-size: 0.85rem;"
                        onclick={`openEditRoleDrawer(${
                          JSON.stringify(JSON.stringify(r))
                        })`}
                      >
                        Edit Role
                      </button>
                      <button
                        type="button"
                        class="btn-danger"
                        style="flex: 1; min-height: 38px; font-size: 0.85rem;"
                        onclick={`deleteRole('${r.id}', '${r.name}')`}
                      >
                        Delete
                      </button>
                    </div>
                  )
                  : (
                    <div style="text-align: center; padding: 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--text-muted); font-style: italic;">
                      Immutable System Role
                    </div>
                  )}
              </div>
            );
          })}
        />"""

content = content.replace(roles_table_desktop_mobile, roles_table_replacement)


with open('ui/components/AdminRolesPage.tsx', 'w') as f:
    f.write(content)
print("Replaced Roles table!")