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

export const AdminRolesPage = ({
  roles,
  apps,
}: {
  roles: any[];
  apps: any[];
}) => {
  return (
    <AdminLayout title="Role & Permission Catalog" currentPath="/admin/roles">
      <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;">
            Role & Permission Catalog
          </h2>
          <p style="color: #6c757d; font-size: 0.9rem; margin: 0.2rem 0 0 0;">
            Manage global and application-specific RBAC roles and permissions.
          </p>
        </div>
        <button
          type="button"
          class="btn-action btn-success"
          style="padding: 0.5rem 1rem; font-size: 0.9rem;"
          onclick="toggleCreateRoleForm()"
        >
          + Create Custom Role
        </button>
      </div>

      <div
        id="create-role-card"
        class="card"
        style="display: none; border-left: 4px solid #28a745; margin-bottom: 1.5rem;"
      >
        <h3>Create New Role</h3>
        <p style="color: #6c757d; font-size: 0.9rem;">
          Define a global shared role or an application-scoped custom role.
        </p>

        <form id="createRoleForm" onsubmit="handleCreateRole(event)">
          <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;">
                Scope (Applicability) *
              </label>
              <select
                id="roleScope"
                onchange="handleScopeChange()"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; background: white;"
              >
                <option value="global">
                  Global (Shared across ALL applications)
                </option>
                <option value="app_specific">
                  Application-Specific (Scoped to single app)
                </option>
              </select>
            </div>

            <div id="appSelectContainer" style="display: none;">
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Target Application *
              </label>
              <select
                id="roleAppId"
                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>

          <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; margin-bottom: 1rem;">
            <div>
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Role Identifier *
              </label>
              <input
                type="text"
                id="roleName"
                placeholder="e.g. navigator, copilot, auditor"
                required
                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;">
                Description / Purpose
              </label>
              <input
                type="text"
                id="roleDescription"
                placeholder="e.g. Flight routing and navigational telemetry access"
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
              />
            </div>
          </div>

          <div style="display: flex; gap: 0.5rem;">
            <button type="submit" class="btn-action btn-success">
              Save Role
            </button>
            <button
              type="button"
              class="btn-action"
              onclick="toggleCreateRoleForm()"
            >
              Cancel
            </button>
          </div>
        </form>
      </div>

      <div class="card">
        {/* Filter Controls */}
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
          <div style="display: flex; gap: 0.5rem; align-items: center;">
            <label style="font-weight: 600; font-size: 0.85rem;">
              Filter Scope:
            </label>
            <select
              id="filterScopeSelect"
              onchange="filterRolesTable()"
              style="padding: 0.35rem 0.6rem; border: 1px solid #ced4da; border-radius: 4px; background: white; font-size: 0.85rem;"
            >
              <option value="all">All Roles</option>
              <option value="global">Global (Shared) Only</option>
              {apps.map((app) => (
                <option value={app.id}>
                  {app.name} Only
                </option>
              ))}
            </select>
          </div>

          <span
            id="roleCountDisplay"
            style="font-size: 0.85rem; color: #6c757d;"
          >
            Showing {roles.length} roles
          </span>
        </div>

        <div class="table-container">
          <table id="rolesTable">
            <thead>
              <tr>
                <th>Role Name</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: #6c757d; 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} data-app-id={r.app_id || "global"}>
                        <td>
                          <strong style="font-family: monospace; font-size: 0.95rem; color: #212529;">
                            {r.name}
                          </strong>
                        </td>
                        <td>
                          {isGlobal
                            ? (
                              <span class="badge badge-info">
                                Global (Shared)
                              </span>
                            )
                            : (
                              <span class="badge badge-pending">
                                {r.app_name || "App-Specific"}
                              </span>
                            )}
                        </td>
                        <td style="color: #495057; font-size: 0.85rem;">
                          {r.description || "-"}
                        </td>
                        <td style="font-size: 0.85rem;">
                          {new Date(r.created_at).toLocaleDateString()}
                        </td>
                        <td>
                          {!isCoreAdmin
                            ? (
                              <button
                                type="button"
                                class="btn-action btn-warning"
                                onclick={`deleteRole('${r.id}', '${r.name}')`}
                              >
                                Delete
                              </button>
                            )
                            : (
                              <span style="color: #6c757d; font-size: 0.8rem; font-style: italic;">
                                System Core
                              </span>
                            )}
                        </td>
                      </tr>
                    );
                  })
                )}
            </tbody>
          </table>
        </div>
      </div>

      <script
        dangerouslySetInnerHTML={{
          __html: `
          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 toggleCreateRoleForm() {
            const el = document.getElementById('create-role-card');
            el.style.display = el.style.display === 'none' ? 'block' : 'none';
          }

          function handleScopeChange() {
            const scope = document.getElementById('roleScope').value;
            const appContainer = document.getElementById('appSelectContainer');
            appContainer.style.display = scope === 'app_specific' ? 'block' : 'none';
          }

          function filterRolesTable() {
            const selected = document.getElementById('filterScopeSelect').value;
            const rows = document.querySelectorAll('#rolesTable tbody tr');
            let visibleCount = 0;

            rows.forEach((row) => {
              const rowAppId = row.getAttribute('data-app-id');
              if (!rowAppId) return;

              if (selected === 'all') {
                row.style.display = '';
                visibleCount++;
              } else if (selected === 'global') {
                const isGlobal = rowAppId === 'global';
                row.style.display = isGlobal ? '' : 'none';
                if (isGlobal) visibleCount++;
              } else {
                const isMatch = rowAppId === selected;
                row.style.display = isMatch ? '' : 'none';
                if (isMatch) visibleCount++;
              }
            });

            document.getElementById('roleCountDisplay').textContent = 'Showing ' + visibleCount + ' roles';
          }

          async function handleCreateRole(e) {
            e.preventDefault();
            const scope = document.getElementById('roleScope').value;
            const name = document.getElementById('roleName').value.trim();
            const description = document.getElementById('roleDescription').value.trim();
            let appId = null;

            if (scope === 'app_specific') {
              appId = document.getElementById('roleAppId').value;
            }

            if (!name) {
              showNotice('Role identifier is required', true);
              return;
            }

            try {
              const res = await fetch('/api/admin/roles', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name, description, appId }),
              });
              const data = await res.json();
              if (res.ok) {
                showNotice('Role "' + name + '" created successfully!', false);
                setTimeout(() => window.location.reload(), 800);
              } else {
                showNotice(data.error || 'Failed to create role', true);
              }
            } catch (err) {
              showNotice('Network error creating role', true);
            }
          }

          async function deleteRole(roleId, roleName) {
            if (!confirm('Are you sure you want to delete role "' + roleName + '"?')) return;
            try {
              const res = await fetch('/api/admin/roles/' + roleId, {
                method: 'DELETE',
              });
              if (res.ok) {
                showNotice('Role deleted', false);
                setTimeout(() => window.location.reload(), 800);
              } else {
                const data = await res.json();
                showNotice(data.error || 'Failed to delete role', true);
              }
            } catch (err) {
              showNotice('Network error', true);
            }
          }
        `,
        }}
      />
    </AdminLayout>
  );
};