import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import {
  ChevronDown,
  ChevronRight,
  RotateCcw,
  Search,
  Shield,
  User,
} from "lucide-react";

import { RoleViewsAdminAPI } from "@/apis/RoleViewsAdminAPI";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useAuth } from "@/hooks/useAuth";
import { useCompanyStore } from "@/hooks/store/useCompanyStore";

// ─── Helpers ─────────────────────────────────────────────────────────────────

const isSuperAdminUser = (user) => {
  const iduserType = Number(user?.iduser_type ?? user?.iduserType ?? 0);
  if (iduserType === 1) return true;
  const roleLabel = String(user?.role || user?.type || "").toLowerCase();
  return roleLabel.includes("super");
};

const LEVEL_INDENT = { module: 0, submodule: 1, view: 2 };
const LEVEL_LABEL  = { module: "Módulo", submodule: "Submódulo", view: "Vista" };

const LEVEL_STYLE = {
  module:    "font-bold text-slate-800 text-sm",
  submodule: "font-semibold text-slate-700 text-sm",
  view:      "text-slate-600 text-sm",
};

const LEVEL_ROW_BG = {
  module:    "bg-slate-50 hover:bg-slate-100",
  submodule: "bg-white hover:bg-blue-50/40",
  view:      "bg-white hover:bg-white",
};

// ─── Componente nodo del árbol (Por Rol) ─────────────────────────────────────

function ViewTreeNode({ node, assignmentMap, roleId, updateCell, level = "module" }) {
  const [open, setOpen] = useState(level === "module");
  const hasChildren = node.children && node.children.length > 0;
  const indent       = LEVEL_INDENT[level] ?? 0;

  const value = useMemo(() => {
    if (!roleId) return { can_read: false, can_write: false };
    return assignmentMap[`${roleId}:${node.view_key}`] || { can_read: false, can_write: false };
  }, [assignmentMap, roleId, node.view_key]);

  const childLevel = level === "module" ? "submodule" : "view";

  // Cuando un padre se desmarca, propagar a hijos visualmente
  const handleReadChange = (checked) => {
    updateCell(node.view_key, { can_read: checked, ...(checked ? {} : { can_write: false }) });
  };

  const handleWriteChange = (checked) => {
    updateCell(node.view_key, { can_write: checked });
  };

  return (
    <>
      <tr className={`border-b border-gray-100 ${LEVEL_ROW_BG[level]}`}>
        <td className="py-2 px-3">
          <div
            className="flex items-center gap-1"
            style={{ paddingLeft: `${indent * 20}px` }}
          >
            {hasChildren ? (
              <button
                type="button"
                onClick={() => setOpen((p) => !p)}
                className="text-slate-400 hover:text-slate-600 p-0.5 rounded"
              >
                {open ? (
                  <ChevronDown className="w-3.5 h-3.5" />
                ) : (
                  <ChevronRight className="w-3.5 h-3.5" />
                )}
              </button>
            ) : (
              <span className="w-5" />
            )}
            <span className={LEVEL_STYLE[level]}>{node.label}</span>
            {level !== "view" && (
              <Badge variant="outline" className="text-xs ml-1 py-0 px-1 font-normal text-slate-400">
                {LEVEL_LABEL[level]}
              </Badge>
            )}
          </div>
        </td>
        <td className="py-2 px-3 text-center">
          <input
            type="checkbox"
            className="w-4 h-4 accent-blue-600 cursor-pointer"
            checked={Boolean(value.can_read)}
            onChange={(e) => handleReadChange(e.target.checked)}
            disabled={!roleId}
          />
        </td>
        <td className="py-2 px-3 text-center">
          <input
            type="checkbox"
            className="w-4 h-4 accent-blue-600 cursor-pointer disabled:opacity-40"
            checked={Boolean(value.can_write)}
            disabled={!roleId || !value.can_read}
            onChange={(e) => handleWriteChange(e.target.checked)}
          />
        </td>
      </tr>
      {hasChildren && open &&
        node.children.map((child) => (
          <ViewTreeNode
            key={child.view_key}
            node={child}
            assignmentMap={assignmentMap}
            roleId={roleId}
            updateCell={updateCell}
            level={childLevel}
          />
        ))}
    </>
  );
}

// ─── Componente nodo del árbol (Por Usuario) ─────────────────────────────────

function UserViewTreeNode({ node, permissionDetail, overrideMap, updateOverride, level = "module" }) {
  const [open, setOpen] = useState(level === "module");
  const hasChildren = node.children && node.children.length > 0;
  const indent       = LEVEL_INDENT[level] ?? 0;
  const childLevel   = level === "module" ? "submodule" : "view";

  const detail = permissionDetail?.[node.view_key];
  const override = overrideMap[node.view_key];

  // Valores efectivos: override local si existe, si no el backend
  const effective = override ?? {
    can_read:    detail?.can_read  ?? false,
    can_write:   detail?.can_write ?? false,
    is_override: detail?.has_override ?? false,
  };

  const hasOverride = effective.is_override || detail?.has_override;

  const handleToggleOverride = (checked) => {
    if (checked) {
      // Activar override con el valor actual efectivo
      updateOverride(node.view_key, {
        can_read:    effective.can_read,
        can_write:   effective.can_write,
        is_override: true,
      });
    } else {
      // Quitar override: volver al valor del rol
      updateOverride(node.view_key, null);
    }
  };

  const handleReadChange = (checked) => {
    updateOverride(node.view_key, {
      can_read:    checked,
      can_write:   checked ? effective.can_write : false,
      is_override: true,
    });
  };

  const handleWriteChange = (checked) => {
    updateOverride(node.view_key, {
      can_read:    effective.can_read,
      can_write:   checked,
      is_override: true,
    });
  };

  const fromRole       = detail?.from_role;
  const isActive       = effective.is_override;
  const readRoleTitle  = fromRole?.can_read  === true ? "Sí" : "No";
  const writeRoleTitle = fromRole?.can_write === true ? "Sí" : "No";

  return (
    <>
      <tr className={`border-b border-gray-100 ${LEVEL_ROW_BG[level]}`}>
        <td className="py-2 px-3">
          <div
            className="flex items-center gap-1"
            style={{ paddingLeft: `${indent * 20}px` }}
          >
            {hasChildren ? (
              <button
                type="button"
                onClick={() => setOpen((p) => !p)}
                className="text-slate-400 hover:text-slate-600 p-0.5 rounded"
              >
                {open ? (
                  <ChevronDown className="w-3.5 h-3.5" />
                ) : (
                  <ChevronRight className="w-3.5 h-3.5" />
                )}
              </button>
            ) : (
              <span className="w-5" />
            )}
            <span className={LEVEL_STYLE[level]}>{node.label}</span>
            {hasOverride && (
              <Badge className="text-xs ml-1 py-0 px-1.5 bg-blue-100 text-blue-700 border border-blue-200">
                override
              </Badge>
            )}
          </div>
        </td>
        {/* Toggle override */}
        <td className="py-2 px-3 text-center">
          <label className="relative inline-flex items-center cursor-pointer">
            <span className="sr-only">Activar override para {node.view_key}</span>
            <input
              type="checkbox"
              aria-label={`Override de ${node.view_key}`}
              className="sr-only peer"
              checked={Boolean(isActive)}
              onChange={(e) => handleToggleOverride(e.target.checked)}
            />
            <div className="w-8 h-4 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600 text-[10px]" />
          </label>
        </td>

        {/* Read (del rol, informativo si no hay override) */}
        <td className="py-2 px-3 text-center">
          <input
            type="checkbox"
            className="w-4 h-4 accent-blue-600 cursor-pointer disabled:opacity-40"
            checked={Boolean(effective.can_read)}
            disabled={!isActive}
            onChange={(e) => handleReadChange(e.target.checked)}
            title={isActive ? undefined : `Valor del rol: ${readRoleTitle}`}
          />
          {!isActive && fromRole && (
            <div className="text-xs text-slate-400 leading-none mt-0.5">
              rol: {fromRole.can_read ? "✓" : "✗"}
            </div>
          )}
        </td>

        {/* Write */}
        <td className="py-2 px-3 text-center">
          <input
            type="checkbox"
            className="w-4 h-4 accent-blue-600 cursor-pointer disabled:opacity-40"
            checked={Boolean(effective.can_write)}
            disabled={!isActive || !effective.can_read}
            onChange={(e) => handleWriteChange(e.target.checked)}
            title={isActive ? undefined : `Valor del rol: ${writeRoleTitle}`}
          />
          {!isActive && fromRole && (
            <div className="text-xs text-slate-400 leading-none mt-0.5">
              rol: {fromRole.can_write ? "✓" : "✗"}
            </div>
          )}
        </td>
      </tr>
      {hasChildren && open &&
        node.children.map((child) => (
          <UserViewTreeNode
            key={child.view_key}
            node={child}
            permissionDetail={permissionDetail}
            overrideMap={overrideMap}
            updateOverride={updateOverride}
            level={childLevel}
          />
        ))}
    </>
  );
}

// ─── Tab: Por Rol ─────────────────────────────────────────────────────────────

function RoleTab({ companies }) {
  const [selectedRoleId, setSelectedRoleId]     = useState("");
  const [scopeCompanyId, setScopeCompanyId]      = useState("global");
  const [roles, setRoles]                        = useState([]);
  const [viewTree, setViewTree]                  = useState([]);
  const [allViews, setAllViews]                  = useState([]);
  const [assignmentMap, setAssignmentMap]        = useState({});
  const [loading, setLoading]                    = useState(true);
  const [saving, setSaving]                      = useState(false);

  const selectedScopeCompany = useMemo(
    () => (scopeCompanyId === "global" ? null : Number(scopeCompanyId)),
    [scopeCompanyId],
  );

  const selectedRole = useMemo(
    () => roles.find((r) => String(r.id) === String(selectedRoleId)) || null,
    [roles, selectedRoleId],
  );

  const loadMatrix = useCallback(async () => {
    setLoading(true);
    try {
      const detail = await RoleViewsAdminAPI.getMatrix(selectedScopeCompany);
      if (!detail) return;

      const roleRows       = detail.roles || [];
      const viewTreeRows   = detail.view_tree || [];
      const viewRows       = detail.views || [];
      const assignmentRows = detail.assignments || [];

      const nextMap = {};
      for (const row of assignmentRows) {
        nextMap[`${row.iduser_type}:${row.view_key}`] = {
          can_read:  Boolean(row.can_read),
          can_write: Boolean(row.can_write),
          is_active: row.is_active !== false,
        };
      }

      setRoles(roleRows);
      setViewTree(viewTreeRows);
      setAllViews(viewRows);
      setAssignmentMap(nextMap);
      if (!selectedRoleId && roleRows.length > 0) {
        setSelectedRoleId(String(roleRows[0].id));
      }
    } catch (err) {
      console.error("Error cargando matriz por rol", err);
      toast.error("No se pudo cargar la configuración de vistas por rol");
    } finally {
      setLoading(false);
    }
  }, [selectedScopeCompany, selectedRoleId]);

  useEffect(() => { void loadMatrix(); }, [selectedScopeCompany]);

  const updateCell = useCallback((viewKey, patch) => {
    if (!selectedRoleId) return;
    const key     = `${selectedRoleId}:${viewKey}`;
    const current = assignmentMap[key] || { can_read: false, can_write: false };
    const next    = { ...current, ...patch };
    if (!next.can_read) next.can_write = false;

    setAssignmentMap((prev) => ({ ...prev, [key]: next }));

    // Propagación visual en cascada sobre hijos
    const propagate = (parentKey, val) => {
      for (const view of allViews) {
        if (view.parent_key !== parentKey) continue;
        const childKey = `${selectedRoleId}:${view.view_key}`;
        if (!val.can_read) {
          setAssignmentMap((prev) => {
            const child = prev[childKey] || { can_read: false, can_write: false };
            return { ...prev, [childKey]: { ...child, can_read: false, can_write: false } };
          });
        }
        propagate(view.view_key, val);
      }
    };
    propagate(viewKey, next);
  }, [selectedRoleId, assignmentMap, allViews]);

  const handleSave = async () => {
    if (!selectedRoleId) {
      toast.error("Selecciona un rol para guardar cambios");
      return;
    }
    setSaving(true);
    try {
      const assignments = allViews.map((view) => {
        const val = assignmentMap[`${selectedRoleId}:${view.view_key}`] || {};
        return {
          view_key:  view.view_key,
          can_read:  Boolean(val.can_read),
          can_write: Boolean(val.can_write),
          is_active: true,
        };
      });
      await RoleViewsAdminAPI.updateRole(Number(selectedRoleId), {
        idcompany:   selectedScopeCompany,
        assignments,
      });
      toast.success("Configuración del rol actualizada correctamente");
      await loadMatrix();
    } catch (err) {
      console.error("Error guardando", err);
      toast.error("No se pudo guardar la configuración");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return <p className="text-sm text-gray-500 p-4">Cargando configuración de vistas...</p>;
  }

  return (
    <div className="space-y-4">
      {/* Selectores */}
      <Card className="glass-card border-white/20">
        <CardHeader className="pb-2">
          <CardTitle className="text-base">Alcance de configuración</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <label htmlFor="role-select-tab" className="text-sm font-medium text-gray-700">Rol</label>
            <select
              id="role-select-tab"
              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
              value={selectedRoleId}
              onChange={(e) => setSelectedRoleId(e.target.value)}
            >
              {roles.map((role) => (
                <option key={role.id} value={role.id}>{role.name}</option>
              ))}
            </select>
          </div>
          <div className="space-y-1.5">
            <label htmlFor="company-scope-tab" className="text-sm font-medium text-gray-700">Contexto de compañía</label>
            <select
              id="company-scope-tab"
              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
              value={scopeCompanyId}
              onChange={(e) => setScopeCompanyId(e.target.value)}
            >
              <option value="global">Global (todas las compañías)</option>
              {companies.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.business_name || c.name || `Compañía ${c.id}`}
                </option>
              ))}
            </select>
          </div>
        </CardContent>
      </Card>

      {/* Árbol de permisos */}
      <Card className="glass-card border-white/20">
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-base">
            Permisos del rol {selectedRole ? <Badge className="ml-2">{selectedRole.name}</Badge> : null}
          </CardTitle>
          <Button onClick={handleSave} disabled={saving || !selectedRoleId} size="sm">
            {saving ? "Guardando..." : "Guardar cambios"}
          </Button>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="min-w-full border-collapse text-sm">
              <thead>
                <tr className="border-b-2 border-gray-200 bg-gray-50">
                  <th className="text-left py-2 px-3 font-semibold text-gray-700">Vista / Módulo</th>
                  <th className="text-center py-2 px-3 font-semibold text-gray-700 w-16">Leer</th>
                  <th className="text-center py-2 px-3 font-semibold text-gray-700 w-16">Escribir</th>
                </tr>
              </thead>
              <tbody>
                {viewTree.map((node) => (
                  <ViewTreeNode
                    key={node.view_key}
                    node={node}
                    assignmentMap={assignmentMap}
                    roleId={selectedRoleId}
                    updateCell={updateCell}
                    level="module"
                  />
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

// ─── Tab: Por Usuario ─────────────────────────────────────────────────────────

function UserTab({ companies }) {
  const [scopeCompanyId, setScopeCompanyId]    = useState("global");
  const [userSearch, setUserSearch]            = useState("");
  const [users, setUsers]                      = useState([]);
  const [selectedUserId, setSelectedUserId]    = useState(null);
  const [selectedUserInfo, setSelectedUserInfo] = useState(null);
  const [viewTree, setViewTree]                = useState([]);
  const [allViews, setAllViews]                = useState([]);
  const [permissionDetail, setPermissionDetail] = useState({});
  const [overrideMap, setOverrideMap]          = useState({});
  const [loadingUsers, setLoadingUsers]        = useState(false);
  const [loadingPerms, setLoadingPerms]        = useState(false);
  const [saving, setSaving]                    = useState(false);
  const [resetting, setResetting]              = useState(false);
  const searchTimeout                          = useRef(null);

  const selectedScopeCompany = useMemo(
    () => (scopeCompanyId === "global" ? null : Number(scopeCompanyId)),
    [scopeCompanyId],
  );

  // Buscar usuarios
  const searchUsers = useCallback(async (search) => {
    setLoadingUsers(true);
    try {
      const result = await RoleViewsAdminAPI.getUsers({
        search: search || undefined,
        idcompany: selectedScopeCompany || undefined,
      });
      setUsers(result || []);
    } catch (err) {
      console.error("Error buscando usuarios", err);
    } finally {
      setLoadingUsers(false);
    }
  }, [selectedScopeCompany]);

  useEffect(() => {
    void searchUsers("");
  }, [selectedScopeCompany]);

  const handleSearchChange = (e) => {
    const val = e.target.value;
    setUserSearch(val);
    clearTimeout(searchTimeout.current);
    searchTimeout.current = setTimeout(() => searchUsers(val), 400);
  };

  // Cargar permisos del usuario seleccionado
  const loadUserPermissions = useCallback(async (userId) => {
    if (!userId) return;
    setLoadingPerms(true);
    setOverrideMap({});
    try {
      const detail = await RoleViewsAdminAPI.getUserPermissions(userId, selectedScopeCompany);
      if (!detail) return;
      setViewTree(detail.view_tree || []);
      setAllViews(detail.views || []);
      setPermissionDetail(detail.permission_detail || {});
      setSelectedUserInfo(detail.user || null);
    } catch (err) {
      console.error("Error cargando permisos del usuario", err);
      toast.error("No se pudo cargar los permisos del usuario");
    } finally {
      setLoadingPerms(false);
    }
  }, [selectedScopeCompany]);

  useEffect(() => {
    if (selectedUserId) void loadUserPermissions(selectedUserId);
  }, [selectedUserId, selectedScopeCompany]);

  const updateOverride = useCallback((viewKey, value) => {
    setOverrideMap((prev) => {
      if (value === null) {
        const next = { ...prev };
        delete next[viewKey];
        return next;
      }
      return { ...prev, [viewKey]: value };
    });
  }, []);

  const handleSave = async () => {
    if (!selectedUserId) {
      toast.error("Selecciona un usuario para guardar cambios");
      return;
    }
    setSaving(true);
    try {
      // Construir assignments: todas las vistas, indicando cuáles tienen override
      const assignments = allViews.map((view) => {
        const vk       = view.view_key;
        const override = overrideMap[vk];
        const detail   = permissionDetail[vk];
        const isOverride = override ? Boolean(override.is_override) : Boolean(detail?.has_override);

        const canRead  = override ? Boolean(override.can_read)  : Boolean(detail?.can_read);
        const canWrite = override ? Boolean(override.can_write) : Boolean(detail?.can_write);

        return {
          view_key:    vk,
          can_read:    canRead,
          can_write:   canWrite,
          is_override: isOverride,
        };
      });

      await RoleViewsAdminAPI.updateUserPermissions(selectedUserId, {
        idcompany:   selectedScopeCompany,
        assignments,
      });
      toast.success("Permisos del usuario guardados correctamente");
      await loadUserPermissions(selectedUserId);
    } catch (err) {
      console.error("Error guardando permisos", err);
      toast.error("No se pudo guardar los permisos");
    } finally {
      setSaving(false);
    }
  };

  const handleReset = async () => {
    if (!selectedUserId) return;
    if (!confirm("¿Eliminar todos los overrides de este usuario y volver a los permisos del rol?")) return;
    setResetting(true);
    try {
      await RoleViewsAdminAPI.resetUserPermissions(selectedUserId, selectedScopeCompany);
      toast.success("Permisos restablecidos al rol base");
      await loadUserPermissions(selectedUserId);
    } catch (err) {
      console.error("Error reseteando permisos", err);
      toast.error("No se pudo restablecer los permisos");
    } finally {
      setResetting(false);
    }
  };

  const hasAnyOverride = Object.values(overrideMap).some((o) => o?.is_override) ||
    Object.values(permissionDetail).some((d) => d?.has_override);

  return (
    <div className="space-y-4">
      {/* Selectores empresa + búsqueda usuario */}
      <Card className="glass-card border-white/20">
        <CardHeader className="pb-2">
          <CardTitle className="text-base">Seleccionar usuario</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="space-y-1.5">
            <label htmlFor="user-company-scope" className="text-sm font-medium text-gray-700">Contexto de compañía</label>
            <select
              id="user-company-scope"
              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
              value={scopeCompanyId}
              onChange={(e) => { setScopeCompanyId(e.target.value); setSelectedUserId(null); }}
            >
              <option value="global">Global (todas)</option>
              {companies.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.business_name || c.name || `Compañía ${c.id}`}
                </option>
              ))}
            </select>
          </div>
          <div className="space-y-1.5">
            <label htmlFor="user-search" className="text-sm font-medium text-gray-700">Buscar usuario</label>
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 w-4 h-4 text-gray-400" />
              <input
                id="user-search"
                type="text"
                placeholder="Nombre, email o RUT..."
                className="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 text-sm"
                value={userSearch}
                onChange={handleSearchChange}
              />
            </div>
          </div>
          <div className="space-y-1.5">
            <label htmlFor="user-select" className="text-sm font-medium text-gray-700">
              Usuario {loadingUsers && <span className="text-xs text-gray-400">(cargando...)</span>}
            </label>
            <select
              id="user-select"
              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
              value={selectedUserId || ""}
              onChange={(e) => setSelectedUserId(e.target.value ? Number(e.target.value) : null)}
            >
              <option value="">-- Selecciona un usuario --</option>
              {users.map((u) => (
                <option key={u.id} value={u.id}>
                  {u.user_name || u.email} — {u.role_name} ({u.company_name})
                </option>
              ))}
            </select>
          </div>
        </CardContent>
      </Card>

      {/* Árbol de permisos del usuario */}
      {selectedUserId && (
        <Card className="glass-card border-white/20">
          <CardHeader className="flex flex-row items-center justify-between pb-2 flex-wrap gap-2">
            <CardTitle className="text-base flex items-center gap-2">
              <User className="w-4 h-4" />
              Permisos de
              {selectedUserInfo && (
                <Badge className="ml-1">
                  {selectedUserInfo.user_name || selectedUserInfo.email}
                </Badge>
              )}
              {hasAnyOverride && (
                <Badge className="bg-blue-100 text-blue-700 border-blue-200 ml-1">
                  con overrides
                </Badge>
              )}
            </CardTitle>
            <div className="flex gap-2">
              {hasAnyOverride && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleReset}
                  disabled={resetting}
                  className="text-red-600 border-red-200 hover:bg-red-50"
                >
                  <RotateCcw className="w-3.5 h-3.5 mr-1" />
                  {resetting ? "Restableciendo..." : "Resetear al rol"}
                </Button>
              )}
              <Button
                size="sm"
                onClick={handleSave}
                disabled={saving || !selectedUserId}
              >
                {saving ? "Guardando..." : "Guardar cambios"}
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            {loadingPerms ? (
              <p className="text-sm text-gray-500">Cargando permisos...</p>
            ) : (
              <>
                <p className="text-xs text-slate-500 mb-3">
                  Los permisos en gris provienen del rol. Activa el toggle para configurar un override individual.
                </p>
                <div className="overflow-x-auto">
                  <table className="min-w-full border-collapse text-sm">
                    <thead>
                      <tr className="border-b-2 border-gray-200 bg-gray-50">
                        <th className="text-left py-2 px-3 font-semibold text-gray-700">Vista / Módulo</th>
                        <th className="text-center py-2 px-3 font-semibold text-gray-700 w-20">Override</th>
                        <th className="text-center py-2 px-3 font-semibold text-gray-700 w-16">Leer</th>
                        <th className="text-center py-2 px-3 font-semibold text-gray-700 w-16">Escribir</th>
                      </tr>
                    </thead>
                    <tbody>
                      {viewTree.map((node) => (
                        <UserViewTreeNode
                          key={node.view_key}
                          node={node}
                          permissionDetail={permissionDetail}
                          overrideMap={overrideMap}
                          updateOverride={updateOverride}
                          level="module"
                        />
                      ))}
                    </tbody>
                  </table>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  );
}

// ─── Página principal ─────────────────────────────────────────────────────────

export default function RoleViewsAdmin() {
  const { user }      = useAuth();
  const { companies } = useCompanyStore();
  const [activeTab, setActiveTab] = useState("role");

  const isSuperAdmin = isSuperAdminUser(user);

  if (!isSuperAdmin) {
    return (
      <div className="p-4 lg:p-8">
        <Card className="max-w-2xl glass-card border-white/20">
          <CardHeader>
            <CardTitle>Acceso restringido</CardTitle>
          </CardHeader>
          <CardContent>
            Esta sección está disponible solo para superadministradores.
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="p-4 lg:p-8 space-y-6">
      {/* Encabezado */}
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gradient">Control de Accesos</h1>
          <p className="text-gray-600 mt-1">
            Administra módulos, submódulos y acciones por rol o por usuario individual
          </p>
        </div>
        <div className="flex items-center gap-2 text-sm text-slate-500">
          <Shield className="w-4 h-4" />
          Solo superadministradores
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 p-1 bg-gray-100 rounded-xl w-fit">
        <button
          type="button"
          onClick={() => setActiveTab("role")}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
            activeTab === "role"
              ? "bg-white shadow text-blue-700"
              : "text-slate-600 hover:text-slate-800"
          }`}
        >
          <Shield className="w-4 h-4" />
          Por Rol
        </button>
        <button
          type="button"
          onClick={() => setActiveTab("user")}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
            activeTab === "user"
              ? "bg-white shadow text-blue-700"
              : "text-slate-600 hover:text-slate-800"
          }`}
        >
          <User className="w-4 h-4" />
          Por Usuario
        </button>
      </div>

      {/* Contenido del tab activo */}
      {activeTab === "role"
        ? <RoleTab companies={companies} />
        : <UserTab companies={companies} />}
    </div>
  );
}