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

export const RoleEditorDrawer = ({ apps }: { apps: any[] }) => {
  return (
    <AdminModal
      id="roleFormModal"
      title="Create New Role"
      onClose="closeRoleDrawer()"
    >
      <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
        Define a global shared role or an application-scoped custom grant.
      </p>

      <form id="roleForm" onsubmit="handleSaveRole(event)">
        <input type="hidden" id="editRoleId" value="" />

        <div
          id="scopeSelectContainer"
          style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem;"
        >
          <div>
            <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);">
              Scope (Applicability) *
            </label>
            <select
              id="roleScope"
              onchange="handleScopeChange()"
              style="width: 100%;"
            >
              <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.35rem; font-size: 0.85rem; color: var(--text-secondary);">
              Target Application *
            </label>
            <select
              id="roleAppId"
              style="width: 100%;"
            >
              {apps.map((app) => (
                <option value={app.id}>
                  {app.name} ({app.spiffe_id})
                </option>
              ))}
            </select>
          </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;">
          <div>
            <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);">
              Role Identifier *
            </label>
            <input
              type="text"
              id="roleName"
              placeholder="e.g. navigator, copilot, auditor"
              required
              style="width: 100%;"
            />
          </div>

          <div>
            <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);">
              Description / Purpose
            </label>
            <input
              type="text"
              id="roleDescription"
              placeholder="e.g. Flight routing and navigational telemetry access"
              style="width: 100%;"
            />
          </div>
        </div>

        <div style="display: flex; gap: 0.75rem;">
          <button type="submit" class="btn-primary" style="min-height: 42px;">
            Save Role
          </button>
          <button
            type="button"
            class="btn-outline"
            onclick="closeRoleDrawer()"
            style="min-height: 42px;"
          >
            Cancel
          </button>
        </div>
      </form>
    </AdminModal>
  );
};