// permissions-manager — "Permisos y Roles" pro view (rol × módulo × acción).
//
// Transport-agnostic: every read/write arrives via props (loaders/mutators),
// so each host wires them to its own api client (ops → /api/permissions/*).
// The capability universe (modules × actions + general flags) is derived from
// the installed manifests + the real sidebar nav server/host-side; this
// component only renders it.
//
// Layout — a *flat list* that mirrors the app sidebar (NO accordions/folders):
//   header   — title + "Nuevo rol" (primary) + "Guardar permisos" (green).
//   left     — Card "Rol": clean role combobox with inline Editar/Eliminar
//              icons (no removable chip) + "Permisos Generales" flags.
//            — Card "Módulos": a searchable flat list. Each group renders a
//              non-collapsible grey header (uppercase tracking, like "Módulos"
//              / "Sistema" in the sidebar) followed by its modules as clickable
//              rows (icon + label + granted-count badge). Clicking a row selects
//              that module and reveals its action grid on the right.
//   right    — Card "Acciones permitidas": granted counter N/M, mark-all /
//              clear, checkbox grid (icon + label per action). Clear empty
//              states for "pick a role" / "pick a module" / loading.
//
// Saving calls `syncRolePermissions(roleId, capabilities)` with the FULL
// granted set of the active role (baseline + the edits made here). Dirty
// state is tracked against the loaded baseline and surfaced next to the
// save button.
import * as React from 'react'
import {
    Check,
    ChevronsUpDown,
    CheckCheck,
    ChevronDown,
    Eraser,
    Pencil,
    Plus,
    Save,
    Search,
    Shield,
    Trash2,
} from 'lucide-react'
import { toast } from 'sonner'
import { cn } from '@asteby/metacore-ui/lib'
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    Badge,
    Button,
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
    Checkbox,
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    Input,
    Label,
    Popover,
    PopoverContent,
    PopoverTrigger,
    Separator,
    Skeleton,
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@asteby/metacore-ui/primitives'
import { DynamicIcon } from './dynamic-icon'
import { IconPickerField } from './icon-picker-field'
import { ColorPickerField, DEFAULT_ROLE_COLOR } from './color-picker-field'
import type { ActionFieldDef } from './types'

// ---------------------------------------------------------------------------
// Types (mirror of `GET /api/permissions/modules` + the host sidebar nav)
// ---------------------------------------------------------------------------

export interface PermissionActionDef {
    /** Canonical action key (`index`, `create`, …, a custom `pagar`, or `access`). */
    key: string
    /** Localized label ("Listar", "Pagar", "Acceder"). */
    label: string
    /**
     * Optional secondary line under the label (e.g. action name when the label
     * is the module — used by screen → API shortcut checkboxes).
     */
    description?: string
    /** Lucide icon name from the manifest action (optional). */
    icon?: string
    /**
     * `crud` for the derived CRUD set, `custom` for manifest actions,
     * `screen` for the single `access` action of a non-model screen.
     * `dependency` for a shortcut to another module's capability (see
     * {@link capability}).
     */
    kind?: 'crud' | 'custom' | 'screen' | 'dependency' | string
    /**
     * Full capability string override. When set, the grant uses this exact key
     * instead of `${moduleKey}.${key}` — hosts use it so a screen (Terminal)
     * can show checkboxes for other modules' caps (`product.index`, …) as
     * shortcuts without inventing `screen….product.index`.
     */
    capability?: string
    /**
     * Optional section title for the action grid (e.g. "Catálogo", "Ventas").
     * When any action on a module sets `group`, the right-hand panel renders
     * collapsible sections instead of one flat checkbox grid.
     */
    group?: string
}

export interface PermissionModuleDef {
    /**
     * Module key.
     * - model:  lowercase model table (`pos_orders`).
     * - screen: `screen.<navKey>` (the host prefixes it).
     */
    key: string
    /** Localized module label ("Pedidos POS", "Terminal"). */
    label: string
    /** Module icon (lucide name) — mirrors the sidebar entry. */
    icon?: string
    /** Whether this entry is a data model or a non-model screen. */
    kind?: 'model' | 'screen'
    /** Owning addon key (`pos`) — legacy shape only, used for grouping. */
    addon_key?: string
    /** Localized addon label ("Punto de venta") — legacy shape only. */
    addon_label?: string
    actions: PermissionActionDef[]
}

/**
 * A sidebar-style group: a grey (non-collapsible) header + its modules.
 * `title === ''` → no header (e.g. core/infra modules).
 */
export interface ModuleGroup {
    title: string
    modules: PermissionModuleDef[]
}

export interface GeneralPermissionDef {
    /** Full capability key (`general.work_after_hours`). */
    key: string
    label: string
    description?: string
}

/**
 * What `loadModules()` may return.
 *
 * New (preferred) shape — pre-grouped flat list, mirrors the host sidebar:
 *   { groups: ModuleGroup[], general }
 *
 * Legacy shape (still accepted, wrapped into a single untitled group) —
 *   { modules: PermissionModuleDef[], general }
 */
export interface GroupedPermissionsCatalog {
    groups: ModuleGroup[]
    general: GeneralPermissionDef[]
}

export interface FlatPermissionsCatalog {
    modules: PermissionModuleDef[]
    general: GeneralPermissionDef[]
}

export type PermissionsCatalog = GroupedPermissionsCatalog | FlatPermissionsCatalog

export interface RoleDef {
    id: string
    /** Stable role key ("cashier"). */
    name: string
    /** Human label ("Cajero"). Falls back to `name` when omitted. */
    label?: string
    /** Accent color (hex) for the role chip. */
    color?: string
    /** Lucide PascalCase name (or image path) for the role chip. */
    icon?: string
}

export interface RoleInput {
    name: string
    label?: string
    color?: string
    icon?: string
}

export interface PermissionsManagerProps {
    /** Loads the module×action universe + general flags (grouped or flat). */
    loadModules: () => Promise<PermissionsCatalog>
    /** Loads every assignable role. */
    loadRoles: () => Promise<RoleDef[]>
    /** Loads the capabilities currently granted to a role. */
    loadRolePermissions: (roleId: string) => Promise<string[]>
    /** Persists the FULL granted capability set of a role. */
    syncRolePermissions: (roleId: string, capabilities: string[]) => Promise<void>
    /** Optional role CRUD — omitting one hides its control. */
    createRole?: (input: RoleInput) => Promise<RoleDef | void>
    updateRole?: (roleId: string, input: RoleInput) => Promise<RoleDef | void>
    deleteRole?: (roleId: string) => Promise<void>
    /** Page heading. Defaults to "Permisos y Roles". */
    title?: string
    className?: string
}

// ---------------------------------------------------------------------------
// Pure helpers (exported for hosts/tests)
// ---------------------------------------------------------------------------

/** Capability for a catalog module action: `lowercase(moduleKey).actionKey`,
 * or {@link PermissionActionDef.capability} when the action is a cross-module
 * shortcut. */
export function moduleActionCapability(
    moduleKey: string,
    actionKey: string,
    capability?: string,
): string {
    if (capability) return capability
    return `${moduleKey.toLowerCase()}.${actionKey}`
}

/** All capabilities of one module. */
export function moduleCapabilities(module: PermissionModuleDef): string[] {
    return module.actions.map((a) =>
        moduleActionCapability(module.key, a.key, a.capability),
    )
}

export interface ActionGroupSection {
    /** Empty string = ungrouped actions rendered above the collapsibles. */
    title: string
    actions: PermissionActionDef[]
}

/**
 * Split a module's actions into an optional ungrouped prefix + named sections
 * (first-seen order of `action.group`). Modules without any `group` yield a
 * single untitled section (flat grid, backward compatible).
 */
export function groupModuleActions(actions: PermissionActionDef[]): ActionGroupSection[] {
    const ungrouped: PermissionActionDef[] = []
    const byTitle = new Map<string, PermissionActionDef[]>()
    const order: string[] = []
    for (const action of actions) {
        const title = (action.group ?? '').trim()
        if (!title) {
            ungrouped.push(action)
            continue
        }
        let list = byTitle.get(title)
        if (!list) {
            list = []
            byTitle.set(title, list)
            order.push(title)
        }
        list.push(action)
    }
    const out: ActionGroupSection[] = []
    if (ungrouped.length > 0) out.push({ title: '', actions: ungrouped })
    for (const title of order) {
        out.push({ title, actions: byTitle.get(title)! })
    }
    return out
}

/** How many of the module's capabilities are in the granted set. */
export function grantedCountForModule(
    granted: ReadonlySet<string>,
    module: PermissionModuleDef,
): number {
    return moduleCapabilities(module).filter((c) => granted.has(c)).length
}

export function capabilitySetsEqual(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
    if (a.size !== b.size) return false
    for (const v of a) if (!b.has(v)) return false
    return true
}

/** Default lucide icon when the manifest action doesn't declare one. */
export function defaultActionIcon(actionKey: string, kind?: string): string {
    switch (actionKey) {
        case 'index':
            return 'List'
        case 'create':
            return 'Plus'
        case 'update':
            return 'Pencil'
        case 'delete':
            return 'Trash2'
        case 'export':
            return 'Download'
        case 'import':
            return 'Upload'
        case 'access':
            return 'Eye'
        default:
            if (kind === 'crud') return 'List'
            if (kind === 'screen') return 'Eye'
            if (kind === 'dependency') return 'Link2'
            return 'Zap'
    }
}

/** Group label fallback when a legacy module has no addon ("Sistema" = core). */
const SYSTEM_GROUP = 'Sistema'

function legacyGroupLabel(mod: PermissionModuleDef): string {
    return mod.addon_label || mod.addon_key || SYSTEM_GROUP
}

/** Accent-insensitive, lowercase fold for search. */
function fold(s: string): string {
    return s
        .normalize('NFD')
        .replace(/[̀-ͯ]/g, '')
        .toLowerCase()
}

function slugify(label: string): string {
    return fold(label)
        .trim()
        .replace(/[^a-z0-9]+/g, '_')
        .replace(/^_+|_+$/g, '')
}

/** Suggest a Lucide icon from the role label (create-dialog default). */
export function suggestRoleIcon(label: string): string {
    const s = fold(label)
    const rules: Array<[RegExp, string]> = [
        [/cajer|cash|teller|bank/, 'Banknote'],
        [/vend|seller|sales|shop|mostrador/, 'ShoppingBag'],
        [/mecanic|technic|wrench|taller/, 'Wrench'],
        [/jefe|lead|manager|gerente|supervisor/, 'HardHat'],
        [/almacen|ware|stock|invent/, 'Warehouse'],
        [/compr|purch|buyer/, 'Truck'],
        [/contad|account|ledger/, 'Calculator'],
        [/nomina|payroll|sueldo/, 'Wallet'],
        [/rh|hr|human|emplead|people/, 'Users'],
        [/fleet|flota|vehic/, 'Car'],
        [/admin|dueño|owner/, 'ShieldCheck'],
        [/view|observa|lectura|read/, 'Eye'],
    ]
    for (const [re, icon] of rules) {
        if (re.test(s)) return icon
    }
    return 'Shield'
}

/**
 * Normalize whatever `loadModules` returned into the canonical grouped shape.
 *
 * - New shape (`{ groups }`): passed through (modules default to kind:'model').
 * - Legacy flat shape (`{ modules }`): grouped by `addon_label`/`addon_key`
 *   (falling back to "Sistema") so old hosts keep their familiar buckets,
 *   every module defaulting to kind:'model'. The grey headers still render,
 *   just derived from the addon instead of the sidebar group.
 */
export function normalizeCatalogGroups(catalog: PermissionsCatalog): ModuleGroup[] {
    const withKind = (m: PermissionModuleDef): PermissionModuleDef => ({
        ...m,
        kind: m.kind ?? 'model',
    })

    if ('groups' in catalog && Array.isArray(catalog.groups)) {
        return catalog.groups.map((g) => ({
            title: g.title ?? '',
            modules: g.modules.map(withKind),
        }))
    }

    const modules = ('modules' in catalog && catalog.modules) || []
    const order: string[] = []
    const byGroup = new Map<string, PermissionModuleDef[]>()
    for (const raw of modules) {
        const mod = withKind(raw)
        const g = legacyGroupLabel(mod)
        if (!byGroup.has(g)) {
            byGroup.set(g, [])
            order.push(g)
        }
        byGroup.get(g)!.push(mod)
    }
    return order.map((title) => ({ title, modules: byGroup.get(title)! }))
}

/** Flat list of every module across groups, in render order. */
export function flattenGroups(groups: ModuleGroup[]): PermissionModuleDef[] {
    return groups.flatMap((g) => g.modules)
}

/** Filter the grouped flat list by a folded query against module + group titles. */
export function filterModuleGroups(groups: ModuleGroup[], query: string): ModuleGroup[] {
    const q = fold(query).trim()
    if (!q) return groups
    const out: ModuleGroup[] = []
    for (const g of groups) {
        const groupMatches = g.title.length > 0 && fold(g.title).includes(q)
        const mods = groupMatches
            ? g.modules
            : g.modules.filter((m) => fold(m.label).includes(q) || fold(m.key).includes(q))
        if (mods.length) out.push({ title: g.title, modules: mods })
    }
    return out
}

// ---------------------------------------------------------------------------
// Internal sub-components
// ---------------------------------------------------------------------------

/** Checkbox row used by both the action grid and the general flags. */
function CapabilityCheck({
    checked,
    disabled,
    onToggle,
    icon,
    label,
    description,
}: {
    checked: boolean
    disabled?: boolean
    onToggle: () => void
    icon?: string
    label: string
    description?: string
}) {
    return (
        <div
            role="checkbox"
            aria-checked={checked}
            aria-disabled={disabled || undefined}
            tabIndex={disabled ? -1 : 0}
            onClick={disabled ? undefined : onToggle}
            onKeyDown={
                disabled
                    ? undefined
                    : (e: React.KeyboardEvent) => {
                          if (e.key === ' ' || e.key === 'Enter') {
                              e.preventDefault()
                              onToggle()
                          }
                      }
            }
            className={cn(
                'flex items-start gap-2.5 rounded-md border border-border/60 bg-card px-3 py-2.5 text-sm transition-colors',
                disabled ? 'opacity-50' : 'cursor-pointer hover:bg-muted/40',
                checked && 'border-primary/40 bg-primary/5',
            )}
        >
            <Checkbox
                checked={checked}
                aria-hidden="true"
                tabIndex={-1}
                className="pointer-events-none mt-0.5 shrink-0"
            />
            {icon && (
                <DynamicIcon name={icon} className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
            )}
            <span className="min-w-0 flex-1">
                <span className="block break-words font-medium leading-snug text-foreground">
                    {label}
                </span>
                {description && (
                    <span className="mt-0.5 block break-words text-xs leading-snug text-muted-foreground">
                        {description}
                    </span>
                )}
            </span>
        </div>
    )
}

/** One clickable module row in the flat list (mirrors a sidebar item). */
function ModuleRow({
    module,
    active,
    granted,
    total,
    onSelect,
}: {
    module: PermissionModuleDef
    active: boolean
    granted: number
    total: number
    onSelect: () => void
}) {
    return (
        <button
            type="button"
            onClick={onSelect}
            aria-current={active || undefined}
            className={cn(
                'group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
                active
                    ? 'bg-primary/10 font-medium text-foreground'
                    : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground',
            )}
        >
            <DynamicIcon
                name={module.icon || (module.kind === 'screen' ? 'Eye' : 'Square')}
                className={cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground')}
            />
            <span className="min-w-0 flex-1 truncate">{module.label}</span>
            {granted > 0 && (
                <Badge
                    variant={granted === total ? 'default' : 'secondary'}
                    className="h-5 shrink-0 px-1.5 text-[10px] tabular-nums"
                >
                    {granted}/{total}
                </Badge>
            )}
        </button>
    )
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function PermissionsManager({
    loadModules,
    loadRoles,
    loadRolePermissions,
    syncRolePermissions,
    createRole,
    updateRole,
    deleteRole,
    title = 'Permisos y Roles',
    className,
}: PermissionsManagerProps) {
    const [groups, setGroups] = React.useState<ModuleGroup[] | null>(null)
    const [general, setGeneral] = React.useState<GeneralPermissionDef[] | null>(null)
    const [roles, setRoles] = React.useState<RoleDef[] | null>(null)
    const [loadError, setLoadError] = React.useState(false)

    const [activeRoleId, setActiveRoleId] = React.useState<string | null>(null)
    const [activeModuleKey, setActiveModuleKey] = React.useState<string | null>(null)

    // baseline = capabilities as persisted; draft = baseline + local edits.
    const [baseline, setBaseline] = React.useState<Set<string> | null>(null)
    const [draft, setDraft] = React.useState<Set<string> | null>(null)
    const [loadingPerms, setLoadingPerms] = React.useState(false)
    const [saving, setSaving] = React.useState(false)

    const [roleOpen, setRoleOpen] = React.useState(false)
    const [moduleOpen, setModuleOpen] = React.useState(false)

    // Pending role switch while there are unsaved changes.
    const [pendingRoleId, setPendingRoleId] = React.useState<string | null>(null)

    const [roleDialog, setRoleDialog] = React.useState<{
        open: boolean
        mode: 'create' | 'edit'
        label: string
        color: string
        icon: string
        grantAll: boolean
    }>({
        open: false,
        mode: 'create',
        label: '',
        color: DEFAULT_ROLE_COLOR,
        icon: 'Shield',
        grantAll: false,
    })
    const [roleSaving, setRoleSaving] = React.useState(false)
    const [deleteOpen, setDeleteOpen] = React.useState(false)
    const [deleting, setDeleting] = React.useState(false)

    const loading = groups === null || roles === null

    const allModules = React.useMemo(() => (groups ? flattenGroups(groups) : []), [groups])

    // ---- initial load: catalog + roles in parallel -------------------------
    React.useEffect(() => {
        let cancelled = false
        Promise.all([loadModules(), loadRoles()])
            .then(([cat, rs]) => {
                if (cancelled) return
                const grouped = normalizeCatalogGroups(cat)
                setGroups(grouped)
                setGeneral(cat.general ?? [])
                setRoles(rs)
                setActiveRoleId((prev) => prev ?? rs[0]?.id ?? null)
                setActiveModuleKey(
                    (prev) => prev ?? flattenGroups(grouped)[0]?.key ?? null,
                )
            })
            .catch(() => {
                if (!cancelled) setLoadError(true)
            })
        return () => {
            cancelled = true
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    // ---- per-role permissions ----------------------------------------------
    React.useEffect(() => {
        if (!activeRoleId) {
            setBaseline(null)
            setDraft(null)
            return
        }
        let cancelled = false
        setLoadingPerms(true)
        loadRolePermissions(activeRoleId)
            .then((caps) => {
                if (cancelled) return
                setBaseline(new Set(caps))
                setDraft(new Set(caps))
            })
            .catch(() => {
                if (cancelled) return
                toast.error('No se pudieron cargar los permisos del rol')
                setBaseline(null)
                setDraft(null)
            })
            .finally(() => {
                if (!cancelled) setLoadingPerms(false)
            })
        return () => {
            cancelled = true
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [activeRoleId])

    const activeRole = React.useMemo(
        () => roles?.find((r) => r.id === activeRoleId) ?? null,
        [roles, activeRoleId],
    )
    const activeModule = React.useMemo(
        () => allModules.find((m) => m.key === activeModuleKey) ?? null,
        [allModules, activeModuleKey],
    )

    const dirty = baseline !== null && draft !== null && !capabilitySetsEqual(baseline, draft)

    // ---- capability edits ---------------------------------------------------
    const toggleCapability = React.useCallback((cap: string) => {
        setDraft((prev) => {
            if (!prev) return prev
            const next = new Set(prev)
            if (next.has(cap)) next.delete(cap)
            else next.add(cap)
            return next
        })
    }, [])

    const setModuleAll = React.useCallback(
        (on: boolean) => {
            if (!activeModule) return
            const caps = moduleCapabilities(activeModule)
            setDraft((prev) => {
                if (!prev) return prev
                const next = new Set(prev)
                for (const c of caps) {
                    if (on) next.add(c)
                    else next.delete(c)
                }
                return next
            })
        },
        [activeModule],
    )

    // Every capability across every module in the catalog — the "Otorgar
    // todo" button's target set (as opposed to setModuleAll, which is
    // scoped to the currently open module).
    const allCatalogCapabilities = React.useMemo(
        () => allModules.flatMap((m) => moduleCapabilities(m)),
        [allModules],
    )

    const setAllPermissions = React.useCallback(
        (on: boolean) => {
            if (on) {
                setDraft(new Set(allCatalogCapabilities))
            } else {
                setDraft(new Set())
            }
        },
        [allCatalogCapabilities],
    )

    const handleSave = async () => {
        if (!activeRoleId || !draft) return
        setSaving(true)
        try {
            await syncRolePermissions(activeRoleId, Array.from(draft).sort())
            setBaseline(new Set(draft))
            toast.success('Permisos guardados')
        } catch {
            toast.error('No se pudieron guardar los permisos')
        } finally {
            setSaving(false)
        }
    }

    // ---- role switching (dirty guard) ---------------------------------------
    const requestRoleSwitch = (roleId: string | null) => {
        if (roleId === activeRoleId) return
        if (dirty) setPendingRoleId(roleId)
        else setActiveRoleId(roleId)
    }

    // ---- role CRUD -----------------------------------------------------------
    const refreshRoles = async (selectId?: string | null) => {
        const rs = await loadRoles()
        setRoles(rs)
        if (selectId !== undefined) setActiveRoleId(selectId)
        else if (activeRoleId && !rs.some((r) => r.id === activeRoleId))
            setActiveRoleId(rs[0]?.id ?? null)
        return rs
    }

    const handleRoleSubmit = async () => {
        const label = roleDialog.label.trim()
        if (!label) return
        setRoleSaving(true)
        try {
            if (roleDialog.mode === 'create' && createRole) {
                const created = await createRole({
                    name: slugify(label),
                    label,
                    color: roleDialog.color,
                    icon: roleDialog.icon || suggestRoleIcon(label),
                })
                const rs = await loadRoles()
                setRoles(rs)
                const createdId =
                    (created && 'id' in created && created.id) ||
                    rs.find((r) => r.name === slugify(label))?.id ||
                    null
                if (createdId) setActiveRoleId(createdId)
                if (roleDialog.grantAll && createdId && allCatalogCapabilities.length) {
                    await syncRolePermissions(createdId, [...allCatalogCapabilities].sort())
                    setBaseline(new Set(allCatalogCapabilities))
                    setDraft(new Set(allCatalogCapabilities))
                    toast.success('Rol creado con todos los permisos')
                } else {
                    toast.success('Rol creado')
                }
            } else if (roleDialog.mode === 'edit' && updateRole && activeRole) {
                await updateRole(activeRole.id, {
                    name: activeRole.name,
                    label,
                    color: roleDialog.color,
                    icon: roleDialog.icon || suggestRoleIcon(label),
                })
                await refreshRoles(activeRole.id)
                toast.success('Rol actualizado')
            }
            setRoleDialog((d) => ({ ...d, open: false }))
        } catch {
            toast.error(
                roleDialog.mode === 'create' ? 'No se pudo crear el rol' : 'No se pudo actualizar el rol',
            )
        } finally {
            setRoleSaving(false)
        }
    }

    const handleDeleteRole = async () => {
        if (!deleteRole || !activeRole) return
        setDeleting(true)
        try {
            await deleteRole(activeRole.id)
            const rs = await loadRoles()
            setRoles(rs)
            setActiveRoleId(rs[0]?.id ?? null)
            toast.success('Rol eliminado')
            setDeleteOpen(false)
        } catch {
            toast.error('No se pudo eliminar el rol')
        } finally {
            setDeleting(false)
        }
    }

    const openEditRole = () => {
        if (!activeRole) return
        setRoleDialog({
            open: true,
            mode: 'edit',
            label: activeRole.label || activeRole.name,
            color: activeRole.color || DEFAULT_ROLE_COLOR,
            icon: activeRole.icon || suggestRoleIcon(activeRole.label || activeRole.name),
            grantAll: false,
        })
    }

    // ---- derived for the right panel ----------------------------------------
    const moduleGranted = activeModule && draft ? grantedCountForModule(draft, activeModule) : 0
    const moduleTotal = activeModule?.actions.length ?? 0
    const checksDisabled = !activeRole || !draft || loadingPerms || saving
    const activeModuleGroupTitle = React.useMemo(() => {
        if (!activeModule || !groups) return ''
        const g = groups.find((grp) => grp.modules.some((m) => m.key === activeModule.key))
        return g?.title ?? ''
    }, [activeModule, groups])

    // ---- render --------------------------------------------------------------
    if (loadError) {
        return (
            <div
                className={cn(
                    'flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground',
                    className,
                )}
            >
                <Shield className="h-8 w-8 opacity-40" />
                <p className="text-sm">No se pudo cargar el catálogo de permisos.</p>
            </div>
        )
    }

    if (loading) {
        return (
            <div className={cn('flex flex-col gap-4', className)}>
                <div className="flex items-center justify-between">
                    <Skeleton className="h-8 w-56" />
                    <div className="flex gap-2">
                        <Skeleton className="h-9 w-28" />
                        <Skeleton className="h-9 w-40" />
                    </div>
                </div>
                <div className="grid gap-4 lg:grid-cols-[340px_1fr]">
                    <div className="flex flex-col gap-4">
                        <Skeleton className="h-40 w-full" />
                        <Skeleton className="h-80 w-full" />
                    </div>
                    <Skeleton className="h-96 w-full" />
                </div>
            </div>
        )
    }

    return (
        <div className={cn('flex flex-col gap-4', className)}>
            {/* Header */}
            <div className="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
                    <p className="text-sm text-muted-foreground">
                        Define qué puede hacer cada rol en cada módulo.
                    </p>
                </div>
                <div className="flex items-center gap-2">
                    {dirty && (
                        <Badge variant="outline" className="border-amber-500/50 text-amber-600">
                            Cambios sin guardar
                        </Badge>
                    )}
                    {createRole && (
                        <Button
                            onClick={() =>
                                setRoleDialog({
                                    open: true,
                                    mode: 'create',
                                    label: '',
                                    color: DEFAULT_ROLE_COLOR,
                                    icon: 'Shield',
                                    grantAll: false,
                                })
                            }
                        >
                            <Plus className="mr-1.5 h-4 w-4" /> Nuevo rol
                        </Button>
                    )}
                    <Button
                        variant="outline"
                        onClick={() => setAllPermissions(true)}
                        disabled={checksDisabled || !allCatalogCapabilities.length}
                        title="Marca todos los permisos de todos los módulos"
                    >
                        <CheckCheck className="mr-1.5 h-4 w-4" /> Otorgar todo
                    </Button>
                    <Button
                        variant="outline"
                        onClick={() => setAllPermissions(false)}
                        disabled={checksDisabled || !draft?.size}
                        title="Quita todos los permisos del rol"
                    >
                        <Eraser className="mr-1.5 h-4 w-4" /> Quitar todo
                    </Button>
                    <Button
                        onClick={handleSave}
                        disabled={!dirty || saving || !activeRole}
                        className="bg-emerald-600 text-white hover:bg-emerald-700"
                    >
                        <Save className="mr-1.5 h-4 w-4" />
                        {saving ? 'Guardando…' : 'Guardar permisos'}
                    </Button>
                </div>
            </div>

            <div className="grid items-start gap-4 lg:grid-cols-[340px_1fr]">
                {/* Left column */}
                <div className="flex flex-col gap-4">
                    {/* Card: Rol */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-base">Rol</CardTitle>
                            <CardDescription>Selecciona el rol a configurar.</CardDescription>
                        </CardHeader>
                        <CardContent className="flex flex-col gap-3">
                            {/* Clean role combobox with inline edit/delete. */}
                            <div className="flex items-center gap-1.5">
                                <Popover open={roleOpen} onOpenChange={setRoleOpen}>
                                    <PopoverTrigger asChild>
                                        <Button
                                            variant="outline"
                                            role="combobox"
                                            aria-expanded={roleOpen}
                                            className="min-w-0 flex-1 justify-between font-normal"
                                        >
                                            <span className="flex min-w-0 items-center gap-2">
                                                {activeRole && (
                                                    <span
                                                        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md"
                                                        style={{
                                                            background: `${activeRole.color || '#64748b'}22`,
                                                            color: activeRole.color || '#64748b',
                                                        }}
                                                        aria-hidden="true"
                                                    >
                                                        <DynamicIcon
                                                            name={activeRole.icon || 'Shield'}
                                                            className="h-3.5 w-3.5"
                                                        />
                                                    </span>
                                                )}
                                                <span className="truncate">
                                                    {activeRole
                                                        ? activeRole.label || activeRole.name
                                                        : 'Seleccionar rol…'}
                                                </span>
                                            </span>
                                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                        </Button>
                                    </PopoverTrigger>
                                    <PopoverContent className="w-[280px] p-0" align="start">
                                        <Command>
                                            <CommandInput placeholder="Buscar rol…" />
                                            <CommandList>
                                                <CommandEmpty>Sin resultados.</CommandEmpty>
                                                <CommandGroup>
                                                    {(roles ?? []).map((role) => (
                                                        <CommandItem
                                                            key={role.id}
                                                            value={`${role.label || ''} ${role.name}`}
                                                            onSelect={() => {
                                                                requestRoleSwitch(role.id)
                                                                setRoleOpen(false)
                                                            }}
                                                        >
                                                            <span
                                                                className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md"
                                                                style={{
                                                                    background: `${role.color || '#64748b'}22`,
                                                                    color: role.color || '#64748b',
                                                                }}
                                                                aria-hidden="true"
                                                            >
                                                                <DynamicIcon
                                                                    name={role.icon || 'Shield'}
                                                                    className="h-3.5 w-3.5"
                                                                />
                                                            </span>
                                                            <span className="truncate">
                                                                {role.label || role.name}
                                                            </span>
                                                            {role.id === activeRoleId && (
                                                                <Check className="ml-auto h-4 w-4" />
                                                            )}
                                                        </CommandItem>
                                                    ))}
                                                </CommandGroup>
                                            </CommandList>
                                        </Command>
                                    </PopoverContent>
                                </Popover>
                                {updateRole && (
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        className="h-9 w-9 shrink-0"
                                        aria-label="Editar rol"
                                        disabled={!activeRole}
                                        onClick={openEditRole}
                                    >
                                        <Pencil className="h-4 w-4" />
                                    </Button>
                                )}
                                {deleteRole && (
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        className="h-9 w-9 shrink-0 text-destructive hover:text-destructive"
                                        aria-label="Eliminar rol"
                                        disabled={!activeRole}
                                        onClick={() => setDeleteOpen(true)}
                                    >
                                        <Trash2 className="h-4 w-4" />
                                    </Button>
                                )}
                            </div>

                            {(general?.length ?? 0) > 0 && (
                                <>
                                    <Separator />
                                    <div>
                                        <h3 className="mb-2 text-sm font-semibold">Permisos Generales</h3>
                                        <div className="flex flex-col gap-2">
                                            {general!.map((g) => (
                                                <CapabilityCheck
                                                    key={g.key}
                                                    checked={draft?.has(g.key) ?? false}
                                                    disabled={checksDisabled}
                                                    onToggle={() => toggleCapability(g.key)}
                                                    label={g.label}
                                                    description={g.description}
                                                />
                                            ))}
                                        </div>
                                    </div>
                                </>
                            )}
                        </CardContent>
                    </Card>

                    {/* Card: Módulo — a grouped combobox, same pattern as the role
                        selector above (compact; the long flat list felt heavy). */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-base">Módulo</CardTitle>
                            <CardDescription>
                                Elige el módulo cuyas acciones quieres configurar.
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <Popover open={moduleOpen} onOpenChange={setModuleOpen}>
                                <PopoverTrigger asChild>
                                    <Button
                                        variant="outline"
                                        role="combobox"
                                        aria-expanded={moduleOpen}
                                        className="w-full justify-between font-normal"
                                    >
                                        <span className="flex min-w-0 items-center gap-2">
                                            {activeModule && (
                                                <DynamicIcon
                                                    name={
                                                        activeModule.icon ||
                                                        (activeModule.kind === 'screen'
                                                            ? 'Eye'
                                                            : 'Square')
                                                    }
                                                    className="h-4 w-4 shrink-0 opacity-70"
                                                />
                                            )}
                                            <span className="truncate">
                                                {activeModule
                                                    ? activeModule.label
                                                    : 'Seleccionar módulo…'}
                                            </span>
                                        </span>
                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                    </Button>
                                </PopoverTrigger>
                                <PopoverContent
                                    className="w-[var(--radix-popover-trigger-width)] min-w-[280px] p-0"
                                    align="start"
                                >
                                    <Command>
                                        <CommandInput placeholder="Buscar módulo…" />
                                        <CommandList className="max-h-[360px]">
                                            <CommandEmpty>Sin módulos.</CommandEmpty>
                                            {(groups ?? []).map((group, gi) => (
                                                <CommandGroup
                                                    key={group.title || `__untitled_${gi}`}
                                                    heading={group.title || undefined}
                                                >
                                                    {group.modules.map((mod) => (
                                                        <CommandItem
                                                            key={mod.key}
                                                            value={`${group.title} ${mod.label} ${mod.key}`}
                                                            onSelect={() => {
                                                                setActiveModuleKey(mod.key)
                                                                setModuleOpen(false)
                                                            }}
                                                        >
                                                            <DynamicIcon
                                                                name={
                                                                    mod.icon ||
                                                                    (mod.kind === 'screen'
                                                                        ? 'Eye'
                                                                        : 'Square')
                                                                }
                                                                className="mr-2 h-4 w-4 shrink-0 opacity-70"
                                                            />
                                                            <span className="truncate">
                                                                {mod.label}
                                                            </span>
                                                            {draft &&
                                                                grantedCountForModule(draft, mod) >
                                                                    0 && (
                                                                    <Badge
                                                                        variant="secondary"
                                                                        className="ml-auto shrink-0 tabular-nums"
                                                                    >
                                                                        {grantedCountForModule(
                                                                            draft,
                                                                            mod,
                                                                        )}
                                                                        /{mod.actions.length}
                                                                    </Badge>
                                                                )}
                                                            {mod.key === activeModuleKey && (
                                                                <Check className="ml-2 h-4 w-4 shrink-0" />
                                                            )}
                                                        </CommandItem>
                                                    ))}
                                                </CommandGroup>
                                            ))}
                                        </CommandList>
                                    </Command>
                                </PopoverContent>
                            </Popover>
                        </CardContent>
                    </Card>
                </div>

                {/* Right column: Acciones permitidas */}
                <Card>
                    <CardHeader>
                        <div className="flex flex-wrap items-start justify-between gap-2">
                            <div className="min-w-0">
                                <CardTitle className="flex items-center gap-2 text-base">
                                    {activeModule && (
                                        <DynamicIcon
                                            name={
                                                activeModule.icon ||
                                                (activeModule.kind === 'screen' ? 'Eye' : 'Square')
                                            }
                                            className="h-4 w-4 shrink-0 text-primary"
                                        />
                                    )}
                                    <span className="truncate">
                                        {activeModule ? activeModule.label : 'Acciones permitidas'}
                                    </span>
                                </CardTitle>
                                <CardDescription>
                                    {activeModule
                                        ? `${
                                              activeModuleGroupTitle || 'Sistema'
                                          } · configura las acciones permitidas`
                                        : 'Configura los permisos del módulo seleccionado.'}
                                </CardDescription>
                            </div>
                            {activeRole && activeModule && (
                                <div className="flex items-center gap-2">
                                    <Badge variant="secondary" className="tabular-nums">
                                        {moduleGranted}/{moduleTotal}
                                    </Badge>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        className="h-8"
                                        disabled={checksDisabled || moduleGranted === moduleTotal}
                                        onClick={() => setModuleAll(true)}
                                    >
                                        <CheckCheck className="mr-1.5 h-3.5 w-3.5" /> Marcar todo
                                    </Button>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        className="h-8"
                                        disabled={checksDisabled || moduleGranted === 0}
                                        onClick={() => setModuleAll(false)}
                                    >
                                        <Eraser className="mr-1.5 h-3.5 w-3.5" /> Limpiar
                                    </Button>
                                </div>
                            )}
                        </div>
                    </CardHeader>
                    <CardContent>
                        {!activeRole ? (
                            <EmptyHint text="Selecciona un rol para configurar sus permisos." />
                        ) : loadingPerms ? (
                            <div className="grid gap-2 sm:grid-cols-2">
                                {Array.from({ length: 6 }).map((_, i) => (
                                    <Skeleton key={i} className="h-14 w-full" />
                                ))}
                            </div>
                        ) : !activeModule ? (
                            <EmptyHint text="Selecciona un módulo de la lista para ver sus acciones." />
                        ) : (
                            <ModuleActionsPanel
                                module={activeModule}
                                draft={draft}
                                checksDisabled={checksDisabled}
                                onToggle={toggleCapability}
                            />
                        )}
                    </CardContent>
                </Card>
            </div>

            {/* Dirty guard when switching roles */}
            <AlertDialog
                open={pendingRoleId !== null}
                onOpenChange={(open: boolean) => !open && setPendingRoleId(null)}
            >
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Cambios sin guardar</AlertDialogTitle>
                        <AlertDialogDescription>
                            Tienes cambios sin guardar en este rol. Si cambias de rol se descartarán.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
                        <AlertDialogAction
                            onClick={() => {
                                setActiveRoleId(pendingRoleId)
                                setPendingRoleId(null)
                            }}
                        >
                            Descartar y cambiar
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            {/* Role create/edit dialog */}
            <Dialog
                open={roleDialog.open}
                onOpenChange={(open: boolean) => setRoleDialog((d) => ({ ...d, open }))}
            >
                <DialogContent className="sm:max-w-md">
                    <DialogHeader>
                        <DialogTitle>
                            {roleDialog.mode === 'create' ? 'Nuevo rol' : 'Editar rol'}
                        </DialogTitle>
                    </DialogHeader>
                    <div className="flex flex-col gap-4 py-2">
                        <div className="flex flex-col gap-2">
                            <Label htmlFor="pm-role-name">Nombre del rol</Label>
                            <Input
                                id="pm-role-name"
                                value={roleDialog.label}
                                placeholder="Ej. Cajero"
                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                    const label = e.target.value
                                    setRoleDialog((d) => ({
                                        ...d,
                                        label,
                                        icon:
                                            d.icon === suggestRoleIcon(d.label) ||
                                            d.icon === 'Shield' ||
                                            !d.icon
                                                ? suggestRoleIcon(label)
                                                : d.icon,
                                    }))
                                }}
                            />
                        </div>
                        <div className="flex flex-col gap-2">
                            <Label>Ícono</Label>
                            <IconPickerField
                                field={
                                    {
                                        key: 'icon',
                                        label: 'Ícono',
                                        type: 'text',
                                        widget: 'icon',
                                    } as ActionFieldDef
                                }
                                value={roleDialog.icon}
                                onChange={(v) =>
                                    setRoleDialog((d) => ({
                                        ...d,
                                        icon: typeof v === 'string' && v ? v : 'Shield',
                                    }))
                                }
                            />
                        </div>
                        <div className="flex flex-col gap-2">
                            <Label>Color</Label>
                            <ColorPickerField
                                aria-label="Color del rol"
                                value={roleDialog.color}
                                onChange={(color) => setRoleDialog((d) => ({ ...d, color }))}
                            />
                        </div>
                        {roleDialog.mode === 'create' && (
                            <label className="flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-sm hover:bg-muted/40">
                                <input
                                    type="checkbox"
                                    className="mt-0.5 size-4 accent-emerald-600"
                                    checked={roleDialog.grantAll}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                        setRoleDialog((d) => ({
                                            ...d,
                                            grantAll: e.target.checked,
                                        }))
                                    }
                                />
                                <span>
                                    <span className="font-medium">Otorgar todos los permisos</span>
                                    <span className="mt-0.5 block text-xs text-muted-foreground">
                                        Acceso completo a todos los módulos del catálogo (como un
                                        admin). Puedes quitar permisos después.
                                    </span>
                                </span>
                            </label>
                        )}
                    </div>
                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setRoleDialog((d) => ({ ...d, open: false }))}
                            disabled={roleSaving}
                        >
                            Cancelar
                        </Button>
                        <Button
                            onClick={handleRoleSubmit}
                            disabled={roleSaving || !roleDialog.label.trim()}
                        >
                            {roleSaving
                                ? 'Guardando…'
                                : roleDialog.mode === 'create'
                                  ? 'Crear rol'
                                  : 'Guardar'}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            {/* Role delete confirm */}
            <AlertDialog
                open={deleteOpen}
                onOpenChange={(open: boolean) => !deleting && setDeleteOpen(open)}
            >
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>¿Eliminar el rol?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Se eliminará el rol{' '}
                            <strong>{activeRole ? activeRole.label || activeRole.name : ''}</strong> y
                            sus asignaciones de permisos. Esta acción no se puede deshacer.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={deleting}>Cancelar</AlertDialogCancel>
                        <AlertDialogAction
                            className="bg-red-600 hover:bg-red-700"
                            disabled={deleting}
                            onClick={(e: React.MouseEvent) => {
                                e.preventDefault()
                                handleDeleteRole()
                            }}
                        >
                            {deleting ? 'Eliminando…' : 'Eliminar'}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </div>
    )
}

function ActionCheckGrid({
    moduleKey,
    actions,
    draft,
    checksDisabled,
    onToggle,
}: {
    moduleKey: string
    actions: PermissionActionDef[]
    draft: ReadonlySet<string> | null | undefined
    checksDisabled: boolean
    onToggle: (cap: string) => void
}) {
    return (
        <div className="grid gap-2 sm:grid-cols-2">
            {actions.map((action) => {
                const cap = moduleActionCapability(moduleKey, action.key, action.capability)
                return (
                    <CapabilityCheck
                        key={action.capability ?? action.key}
                        checked={draft?.has(cap) ?? false}
                        disabled={checksDisabled}
                        onToggle={() => onToggle(cap)}
                        icon={action.icon || defaultActionIcon(action.key, action.kind)}
                        label={action.label}
                        description={action.description}
                    />
                )
            })}
        </div>
    )
}

/** Flat grid, or collapsible sections when actions declare `group`. */
function ModuleActionsPanel({
    module,
    draft,
    checksDisabled,
    onToggle,
}: {
    module: PermissionModuleDef
    draft: ReadonlySet<string> | null | undefined
    checksDisabled: boolean
    onToggle: (cap: string) => void
}) {
    const sections = React.useMemo(
        () => groupModuleActions(module.actions),
        [module.actions],
    )
    const hasNamedGroups = sections.some((s) => s.title.length > 0)
    if (!hasNamedGroups) {
        return (
            <ActionCheckGrid
                moduleKey={module.key}
                actions={module.actions}
                draft={draft}
                checksDisabled={checksDisabled}
                onToggle={onToggle}
            />
        )
    }

    return (
        <div className="flex flex-col gap-3">
            {sections.map((section) => {
                if (!section.title) {
                    return (
                        <ActionCheckGrid
                            key="__ungrouped"
                            moduleKey={module.key}
                            actions={section.actions}
                            draft={draft}
                            checksDisabled={checksDisabled}
                            onToggle={onToggle}
                        />
                    )
                }
                const granted = section.actions.filter((a) =>
                    draft?.has(moduleActionCapability(module.key, a.key, a.capability)),
                ).length
                return (
                    <Collapsible key={section.title} defaultOpen className="rounded-md border border-border/60">
                        <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm font-medium hover:bg-muted/40 [&[data-state=open]>svg]:rotate-180">
                            <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform" />
                            <span className="min-w-0 flex-1 truncate">{section.title}</span>
                            <Badge variant="secondary" className="tabular-nums">
                                {granted}/{section.actions.length}
                            </Badge>
                        </CollapsibleTrigger>
                        <CollapsibleContent className="border-t border-border/60 px-3 py-3">
                            <ActionCheckGrid
                                moduleKey={module.key}
                                actions={section.actions}
                                draft={draft}
                                checksDisabled={checksDisabled}
                                onToggle={onToggle}
                            />
                        </CollapsibleContent>
                    </Collapsible>
                )
            })}
        </div>
    )
}

function EmptyHint({ text }: { text: string }) {
    return (
        <div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground">
            <Shield className="h-8 w-8 opacity-40" />
            <p className="text-sm">{text}</p>
        </div>
    )
}