import { Add, Business, DeleteForever, Edit, Login } from "@mui/icons-material";
import {
  Autocomplete,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  InputAdornment,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import {
  getCurrentUser,
  getEmpresasAccesibles,
  switchEmpresa,
} from "../../../api/auth.service";
import {
  cambiarEstadoEmpresa,
  createEmpresa,
  forceDeleteEmpresa,
  getEstadosEmpresa,
  updateEmpresa,
} from "../../../api/empresas.service";
import {
  getPlanesDisponibles,
  getPreviewPrimerCobro,
} from "../../../api/suscripciones.service";
import { fmtFechaCalendario } from "../../../utils/fecha";
import { usePermission } from "../../../hooks/usePermission";
import { useAuthStore } from "../../../index";
import { AccesoRestringido } from "../../common/AccesoRestringido";
import { hoyISO } from "../../../utils/fecha";

const TIPOS_EMPRESA = [
  { value: "holding", label: "Holding" },
  { value: "subsidiary", label: "Subsidiaria" },
  { value: "reseller", label: "Reseller" },
];

// Tipos de empresa que puede crear cada tipo de empresa padre
const TIPOS_PERMITIDOS = {
  holding: ["subsidiary", "reseller"],
  subsidiary: [],
  reseller: ["subsidiary"],
  standalone: [],
};

const ESTADO_COLORS = {
  1: "warning", // Pendiente
  2: "info", // En verificación
  3: "success", // Activo
  4: "error", // Bloqueado
  5: "default", // Rechazado
};

const initialFormData = {
  ruc: "",
  dv: "",
  razon_social: "",
  nombre_fantasia: null,
  celular: "",
  email: "",
  tipo_contribuyente: 1,
  parent_id: "",
  type: "standalone",
  usuario: "",
  password: "",
  nombres_usuario: "",
  plan_id: "",
  precio_acordado: "",
  fecha_inicio_plan: hoyISO(),
  dia_cobro: "",
  notas_comerciales: "",
};

export const EmpresasListConfig = () => {
  const muiTheme = useTheme();
  const isMobile = useMediaQuery(muiTheme.breakpoints.down("sm"));
  const queryClient = useQueryClient();
  const { updateEmpresaActiva } = useAuthStore();
  const { can: canEmpresa } = usePermission("ADMINISTRACION");
  const canRead = canEmpresa("ADM_EMPASOC_VER");
  const canCreate = canEmpresa("ADM_EMPASOC_VINCULAR");
  const canEdit = canEmpresa("ADM_EMPASOC_EDITAR");
  const canCambiarContexto = canEmpresa("ADM_EMPASOC_CAMBIAR_CONTEXTO");
  const [formOpen, setFormOpen] = useState(false);
  const [formMode, setFormMode] = useState("create");
  const [selectedEmpresa, setSelectedEmpresa] = useState(null);
  const [formData, setFormData] = useState(initialFormData);

  // Estados para filtros
  const [searchTerm, setSearchTerm] = useState("");
  const [filterTipo, setFilterTipo] = useState("todos");
  const [filterEstado, setFilterEstado] = useState("todos");

  // Estado para diálogo de eliminación
  const [deleteDialog, setDeleteDialog] = useState({ open: false, empresa: null });
  const [deleteConfirmText, setDeleteConfirmText] = useState("");

  const currentUser = getCurrentUser();
  const currentEmpresaId = currentUser?.empresa_id;

  const { data, isLoading, error } = useQuery({
    queryKey: ["empresas-accesibles"],
    queryFn: getEmpresasAccesibles,
  });

  const { data: planesData } = useQuery({
    queryKey: ["planes-disponibles"],
    queryFn: getPlanesDisponibles,
    staleTime: 10 * 60 * 1000,
  });
  const planes = planesData?.data || planesData || [];

  /**
   * Primer vencimiento según la fecha de alta y el día de cobro cargados, para
   * que el holding lo vea antes de guardar. Lo resuelve el backend: la regla
   * del primer ciclo vive ahí y calcularla acá haría que el formulario prometa
   * una fecha distinta a la que se termina guardando.
   */
  const { data: previewCobro, isFetching: previewCargando } = useQuery({
    queryKey: ["preview-primer-cobro", formData.fecha_inicio_plan, formData.dia_cobro],
    queryFn: () => getPreviewPrimerCobro(formData.fecha_inicio_plan, formData.dia_cobro),
    enabled: formOpen && formMode === "create" && Boolean(formData.fecha_inicio_plan),
    staleTime: 5 * 60 * 1000,
    retry: false,
  });

  const { data: estadosData } = useQuery({
    queryKey: ["estados-empresa"],
    queryFn: getEstadosEmpresa,
    staleTime: 10 * 60 * 1000,
  });
  const estados = estadosData?.data || [];

  const empresasRaw = data?.data || data?.empresas || [];

  // Aplicar filtros
  const empresas = empresasRaw.filter((empresa) => {
    // Filtro de búsqueda
    const matchSearch =
      searchTerm === "" ||
      empresa.razon_social?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      empresa.ruc?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      empresa.email?.toLowerCase().includes(searchTerm.toLowerCase());

    // Filtro de tipo
    const matchTipo = filterTipo === "todos" || empresa.type === filterTipo;

    // Filtro de estado (por estado_empresa.id)
    const matchEstado =
      filterEstado === "todos" || empresa.estado_empresa?.id === filterEstado;

    return matchSearch && matchTipo && matchEstado;
  });

  // Estadísticas
  const stats = {
    total: empresasRaw.length,
    activas: empresasRaw.filter((e) => e.active).length,
    inactivas: empresasRaw.filter((e) => !e.active).length,
    holdings: empresasRaw.filter((e) => e.type === "holding").length,
    subsidiarias: empresasRaw.filter((e) => e.type === "subsidiary").length,
    resellers: empresasRaw.filter((e) => e.type === "reseller").length,
  };

  const clearFilters = () => {
    setSearchTerm("");
    setFilterTipo("todos");
    setFilterEstado("todos");
  };

  const hasActiveFilters =
    searchTerm !== "" || filterTipo !== "todos" || filterEstado !== "todos";

  // Obtener el tipo de la empresa actual para filtrar tipos permitidos
  // Buscar en empresasRaw para que los filtros de la tabla no afecten esta lógica
  const empresaActual = empresasRaw.find((e) => e.id === currentEmpresaId);
  const tipoEmpresaActual = empresaActual?.type || "standalone";

  // Filtrar tipos de empresa que puede crear el usuario según su empresa actual
  const tiposEmpresaDisponibles = TIPOS_EMPRESA.filter((tipo) =>
    TIPOS_PERMITIDOS[tipoEmpresaActual]?.includes(tipo.value),
  );

  // Verificar si puede crear empresas
  const puedeCrearEmpresas = tiposEmpresaDisponibles.length > 0;

  const createMutation = useMutation({
    mutationFn: createEmpresa,
    onSuccess: () => {
      toast.success("Empresa creada correctamente");
      queryClient.invalidateQueries({ queryKey: ["empresas-accesibles"] });
      handleCloseForm();
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al crear empresa");
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data: updateData }) => updateEmpresa(id, updateData),
    onSuccess: () => {
      toast.success("Empresa actualizada correctamente");
      queryClient.invalidateQueries({ queryKey: ["empresas-accesibles"] });
      handleCloseForm();
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al actualizar empresa");
    },
  });

  const estadoMutation = useMutation({
    mutationFn: ({ empresaId, estadoId }) =>
      cambiarEstadoEmpresa(empresaId, estadoId),
    onSuccess: () => {
      toast.success("Estado de empresa actualizado");
      queryClient.invalidateQueries({ queryKey: ["empresas-accesibles"] });
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al cambiar estado");
    },
  });

  const switchMutation = useMutation({
    mutationFn: switchEmpresa,
    onSuccess: (data, variables) => {
      // Buscar la empresa seleccionada para actualizar el store
      const empresaSeleccionada = empresas.find((e) => e.id === variables);
      if (empresaSeleccionada) {
        updateEmpresaActiva(variables, {
          id: empresaSeleccionada.id,
          razon_social: empresaSeleccionada.razon_social,
          ruc: empresaSeleccionada.ruc,
        });
      }
      toast.success(data.message || "Empresa cambiada correctamente");
      // Invalidar queries para refrescar datos con la nueva empresa
      queryClient.invalidateQueries();
      // Recargar la página para aplicar el nuevo contexto completamente
      window.location.reload();
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al cambiar de empresa");
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (empresaId) => forceDeleteEmpresa(empresaId),
    onSuccess: (_, empresaId) => {
      toast.success(`Empresa eliminada permanentemente`);
      queryClient.invalidateQueries({ queryKey: ["empresas-accesibles"] });
      setDeleteDialog({ open: false, empresa: null });
      setDeleteConfirmText("");
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al eliminar empresa");
    },
  });

  const handleSwitchEmpresa = (empresa) => {
    if (!empresa.active) {
      toast.error("No se puede acceder a una empresa inactiva");
      return;
    }
    if (empresa.suscripcion?.bloqueada) {
      toast.error("La suscripción de esta empresa está bloqueada");
      return;
    }
    switchMutation.mutate(empresa.id);
  };

  const handleOpenCreate = () => {
    setFormMode("create");
    // Usar el primer tipo disponible y la empresa actual como padre por defecto
    const defaultType = tiposEmpresaDisponibles[0]?.value || "subsidiary";
    setFormData({
      ...initialFormData,
      type: defaultType,
      parent_id: currentEmpresaId,
    });
    setSelectedEmpresa(null);
    setFormOpen(true);
  };

  const handleOpenEdit = (empresa) => {
    setFormMode("edit");
    setSelectedEmpresa(empresa);
    setFormData({
      ruc: empresa.ruc || "",
      dv: empresa.dv || "",
      razon_social: empresa.razon_social || "",
      nombre_fantasia: empresa.nombre_fantasia || null,
      celular: empresa.celular || "",
      email: empresa.email || "",
      tipo_contribuyente: empresa.tipo_contribuyente_empresas?.codigo || 1,
      parent_id: empresa.parent_id || "",
      type: empresa.type || "standalone",
    });
    setFormOpen(true);
  };

  const handleCloseForm = () => {
    setFormOpen(false);
    setSelectedEmpresa(null);
    setFormData(initialFormData);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (
      !formData.ruc ||
      !formData.razon_social ||
      !formData.celular ||
      !formData.email
    ) {
      toast.error("Complete los campos obligatorios");
      return;
    }

    if (formMode === "create") {
      if (!formData.usuario || !formData.password) {
        toast.error("Usuario y contraseña son obligatorios");
        return;
      }
      if (formData.usuario.length < 3) {
        toast.error("El usuario debe tener al menos 3 caracteres");
        return;
      }
      if (formData.password.length < 6) {
        toast.error("La contraseña debe tener al menos 6 caracteres");
        return;
      }
    }

    const selectedPlan = planes.find((p) => p.id === formData.plan_id);
    const payload = {
      ...formData,
      tipo_contribuyente: Number(formData.tipo_contribuyente),
      parent_id: formData.parent_id || null,
      plan_id: formData.plan_id || null,
      precio_acordado: formData.precio_acordado
        ? Number(formData.precio_acordado)
        : selectedPlan
          ? Number(selectedPlan.precio)
          : null,
      fecha_inicio_plan: formData.fecha_inicio_plan || undefined,
      dia_cobro: formData.dia_cobro ? Number(formData.dia_cobro) : null,
      notas_comerciales: formData.notas_comerciales || null,
    };

    if (formMode === "create") {
      createMutation.mutate(payload);
    } else {
      // En edición no enviamos usuario/password/plan
      // eslint-disable-next-line no-unused-vars
      const {
        usuario: _u,
        password: _p,
        nombres_usuario: _n,
        plan_id: _pl,
        ...editPayload
      } = payload;
      updateMutation.mutate({ id: selectedEmpresa.id, data: editPayload });
    }
  };

  const getTypeLabel = (type) => {
    const found = TIPOS_EMPRESA.find((t) => t.value === type);
    return found ? found.label : type || "Independiente";
  };

  const getParentName = (parentId, empresaObj) => {
    if (!parentId) return null;
    if (empresaObj?.empresas?.razon_social) return empresaObj.empresas.razon_social;
    const parent = empresasRaw.find((e) => e.id === parentId);
    return parent ? parent.razon_social : null;
  };

  if (!canRead) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver las empresas asociadas." />
    );
  }

  if (isLoading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Typography color="error" textAlign="center" py={4}>
        Error al cargar empresas: {error.message}
      </Typography>
    );
  }

  return (
    <Box sx={{ maxWidth: 1200, mx: "auto" }}>
      {/* Header */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 3,
          gap: 1,
        }}
      >
        <Box>
          <Typography
            variant="h5"
            fontWeight={600}
            sx={{ fontSize: { xs: "1.1rem", sm: "1.5rem" } }}
          >
            Gestión de Empresas
          </Typography>
          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ fontSize: { xs: "0.75rem", sm: "0.875rem" } }}
          >
            Administra tus empresas y su jerarquía
          </Typography>
        </Box>
        {puedeCrearEmpresas && canCreate && (
          <Button
            variant="contained"
            startIcon={<Add />}
            onClick={handleOpenCreate}
            size={isMobile ? "small" : "medium"}
            sx={{ whiteSpace: "nowrap", flexShrink: 0 }}
          >
            {isMobile ? "Nueva" : "Nueva Empresa"}
          </Button>
        )}
      </Box>

      {/* Estadísticas */}
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "repeat(3,1fr)", sm: "repeat(5,1fr)" },
          gap: 1.5,
          mb: 3,
        }}
      >
        {[
          { label: "Total", value: stats.total, color: "text.primary" },
          { label: "Activas", value: stats.activas, color: "success.main" },
          {
            label: "Inactivas",
            value: stats.inactivas,
            color: "text.disabled",
          },
          { label: "Holdings", value: stats.holdings, color: "primary.main" },
          {
            label: "Subsidiarias",
            value: stats.subsidiarias,
            color: "info.main",
          },
        ].map((s) => (
          <Card key={s.label} sx={{ p: { xs: 1.25, sm: 2 } }}>
            <Typography
              variant="caption"
              color="text.secondary"
              sx={{ fontSize: { xs: "0.65rem", sm: "0.75rem" } }}
            >
              {s.label}
            </Typography>
            <Typography
              variant="h5"
              fontWeight={600}
              color={s.color}
              sx={{ fontSize: { xs: "1.25rem", sm: "2rem" } }}
            >
              {s.value}
            </Typography>
          </Card>
        ))}
      </Box>

      {/* Filtros */}
      <Paper sx={{ p: 2, mb: 3 }}>
        <Box
          sx={{
            display: "flex",
            gap: 2,
            flexWrap: "wrap",
            alignItems: "center",
          }}
        >
          <TextField
            size="small"
            placeholder="Buscar por nombre, RUC o email..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            sx={{ flex: "1 1 250px", minWidth: 200 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Business fontSize="small" color="action" />
                </InputAdornment>
              ),
            }}
          />
          <FormControl size="small" sx={{ minWidth: 150 }}>
            <InputLabel>Tipo</InputLabel>
            <Select
              value={filterTipo}
              label="Tipo"
              onChange={(e) => setFilterTipo(e.target.value)}
            >
              <MenuItem value="todos">Todos los tipos</MenuItem>
              <MenuItem value="holding">Holding</MenuItem>
              <MenuItem value="subsidiary">Subsidiaria</MenuItem>
              <MenuItem value="reseller">Reseller</MenuItem>
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 150 }}>
            <InputLabel>Estado</InputLabel>
            <Select
              value={filterEstado}
              label="Estado"
              onChange={(e) => setFilterEstado(e.target.value)}
            >
              <MenuItem value="todos">Todos</MenuItem>
              {estados.map((est) => (
                <MenuItem key={est.id} value={est.id}>
                  {est.descripcion}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          {hasActiveFilters && (
            <Button size="small" onClick={clearFilters} color="inherit">
              Limpiar filtros
            </Button>
          )}
        </Box>
        {hasActiveFilters && (
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{ mt: 1, display: "block" }}
          >
            Mostrando {empresas.length} de {stats.total} empresas
          </Typography>
        )}
      </Paper>

      {/* Vista mobile: cards | Vista desktop: tabla */}
      {isMobile ? (
        <Stack spacing={1.5}>
          {empresas.length === 0 ? (
            <Box sx={{ textAlign: "center", py: 4 }}>
              <Business sx={{ fontSize: 40, color: "text.secondary", mb: 1 }} />
              <Typography color="text.secondary" variant="body2">
                No hay empresas registradas
              </Typography>
            </Box>
          ) : (
            empresas.map((empresa) => {
              const isCurrentEmpresa = empresa.id === currentEmpresaId;
              return (
                <Card
                  key={empresa.id}
                  variant="outlined"
                  sx={{
                    borderRadius: 2,
                    opacity: empresa.active ? 1 : 0.65,
                    borderLeft: isCurrentEmpresa
                      ? "3px solid #f88533"
                      : undefined,
                    backgroundColor: isCurrentEmpresa
                      ? "rgba(248,133,51,0.06)"
                      : undefined,
                  }}
                >
                  <CardContent sx={{ p: "12px !important" }}>
                    {/* Fila 1: nombre + badges */}
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "flex-start",
                        gap: 1,
                        mb: 0.75,
                        flexWrap: "wrap",
                      }}
                    >
                      <Box sx={{ flex: 1, minWidth: 0 }}>
                        <Box
                          sx={{
                            display: "flex",
                            alignItems: "center",
                            gap: 0.75,
                            flexWrap: "wrap",
                          }}
                        >
                          {isCurrentEmpresa && (
                            <Chip
                              label="Actual"
                              size="small"
                              color="warning"
                              sx={{ height: 18, fontSize: "0.62rem" }}
                            />
                          )}
                          <Typography variant="subtitle2" fontWeight={600}>
                            {empresa.razon_social}
                          </Typography>
                        </Box>
                        {empresa.nombre_fantasia && (
                          <Typography variant="caption" color="text.secondary">
                            {empresa.nombre_fantasia}
                          </Typography>
                        )}
                      </Box>
                      <Box sx={{ display: "flex", gap: 0.5, flexShrink: 0 }}>
                        <Chip
                          label={getTypeLabel(empresa.type)}
                          size="small"
                          variant="outlined"
                        />
                        <Chip
                          label={
                            empresa.estado_empresa?.descripcion ||
                            (empresa.active ? "Activa" : "Inactiva")
                          }
                          size="small"
                          color={
                            ESTADO_COLORS[empresa.estado_empresa?.codigo] ||
                            "default"
                          }
                        />
                      </Box>
                    </Box>
                    {/* Fila 2: RUC + contacto */}
                    <Typography
                      variant="caption"
                      color="text.secondary"
                      sx={{ display: "block", mb: 0.25 }}
                    >
                      RUC: {empresa.ruc}-{empresa.dv}
                    </Typography>
                    {empresa.email && (
                      <Typography
                        variant="caption"
                        color="text.secondary"
                        sx={{ display: "block", mb: 0.25 }}
                      >
                        ✉️ {empresa.email}
                      </Typography>
                    )}
                    {getParentName(empresa.parent_id, empresa) && (
                      <Typography
                        variant="caption"
                        color="text.secondary"
                        sx={{ display: "block", mb: 0.5 }}
                      >
                        Empresa padre:{" "}
                        <strong>{getParentName(empresa.parent_id, empresa)}</strong>
                      </Typography>
                    )}
                    {/* Acciones */}
                    <Box
                      sx={{
                        display: "flex",
                        gap: 0.5,
                        justifyContent: "flex-end",
                        borderTop: "1px solid",
                        borderColor: "divider",
                        pt: 1,
                        mt: 0.5,
                      }}
                    >
                      {canCambiarContexto && (
                        <Tooltip title="Entrar a esta empresa">
                          <IconButton
                            size="small"
                            onClick={() => handleSwitchEmpresa(empresa)}
                            disabled={
                              !empresa.active || switchMutation.isPending
                            }
                          >
                            <Login
                              fontSize="small"
                              color={empresa.active ? "primary" : "disabled"}
                            />
                          </IconButton>
                        </Tooltip>
                      )}
                      {canEdit && (
                        <Tooltip title="Editar">
                          <IconButton
                            size="small"
                            onClick={() => handleOpenEdit(empresa)}
                          >
                            <Edit fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      )}
                      {tipoEmpresaActual === "holding" && (
                        <FormControl size="small" sx={{ minWidth: 120 }}>
                          <Select
                            value={empresa.estado_empresa?.id || ""}
                            onChange={(e) =>
                              estadoMutation.mutate({
                                empresaId: empresa.id,
                                estadoId: e.target.value,
                              })
                            }
                            variant="standard"
                            displayEmpty
                            sx={{ fontSize: "0.75rem" }}
                          >
                            <MenuItem value="" disabled>
                              <em style={{ color: "#999" }}>Sin estado</em>
                            </MenuItem>
                            {estados.map((est) => (
                              <MenuItem key={est.id} value={est.id}>
                                {est.descripcion}
                              </MenuItem>
                            ))}
                          </Select>
                        </FormControl>
                      )}
                    </Box>
                  </CardContent>
                </Card>
              );
            })
          )}
        </Stack>
      ) : (
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Empresa</TableCell>
                <TableCell>RUC</TableCell>
                <TableCell>Tipo</TableCell>
                <TableCell>Contacto</TableCell>
                <TableCell>Empresa Padre</TableCell>
                <TableCell>Estado</TableCell>
                <TableCell align="right">Acciones</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {empresas.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} align="center" sx={{ py: 4 }}>
                    <Business
                      sx={{ fontSize: 48, color: "text.secondary", mb: 1 }}
                    />
                    <Typography color="text.secondary">
                      No hay empresas registradas
                    </Typography>
                  </TableCell>
                </TableRow>
              ) : (
                empresas.map((empresa) => {
                  const isCurrentEmpresa = empresa.id === currentEmpresaId;
                  return (
                    <TableRow
                      key={empresa.id}
                      sx={{
                        opacity: empresa.active ? 1 : 0.6,
                        backgroundColor: isCurrentEmpresa
                          ? "rgba(248,133,51,0.08)"
                          : "inherit",
                        borderLeft: isCurrentEmpresa
                          ? "3px solid #f88533"
                          : "none",
                      }}
                    >
                      <TableCell>
                        <Box
                          sx={{ display: "flex", alignItems: "center", gap: 1 }}
                        >
                          {isCurrentEmpresa && (
                            <Chip
                              label="Actual"
                              size="small"
                              color="warning"
                              sx={{ height: 20, fontSize: "0.65rem" }}
                            />
                          )}
                          <Box>
                            <Typography fontWeight={500}>
                              {empresa.razon_social}
                            </Typography>
                            {empresa.nombre_fantasia && (
                              <Typography
                                variant="caption"
                                color="text.secondary"
                              >
                                {empresa.nombre_fantasia}
                              </Typography>
                            )}
                          </Box>
                        </Box>
                      </TableCell>
                      <TableCell>
                        {empresa.ruc}-{empresa.dv}
                      </TableCell>
                      <TableCell>
                        <Chip
                          label={getTypeLabel(empresa.type)}
                          size="small"
                          variant="outlined"
                        />
                      </TableCell>
                      <TableCell>
                        <Typography variant="body2">{empresa.email}</Typography>
                        <Typography variant="caption" color="text.secondary">
                          {empresa.celular}
                        </Typography>
                      </TableCell>
                      <TableCell>
                        {getParentName(empresa.parent_id, empresa) ? (
                          <Chip
                            label={getParentName(empresa.parent_id, empresa)}
                            size="small"
                            color="primary"
                            variant="outlined"
                          />
                        ) : (
                          <Typography variant="caption" color="text.secondary">
                            -
                          </Typography>
                        )}
                      </TableCell>
                      <TableCell>
                        {tipoEmpresaActual === "holding" ? (
                          <FormControl size="small" sx={{ minWidth: 130 }}>
                            <Select
                              value={empresa.estado_empresa?.id || ""}
                              onChange={(e) =>
                                estadoMutation.mutate({
                                  empresaId: empresa.id,
                                  estadoId: e.target.value,
                                })
                              }
                              variant="standard"
                              displayEmpty
                              sx={{ fontSize: "0.8rem" }}
                            >
                              <MenuItem value="" disabled>
                                <em style={{ color: "#999" }}>Sin estado</em>
                              </MenuItem>
                              {estados.map((est) => (
                                <MenuItem key={est.id} value={est.id}>
                                  {est.descripcion}
                                </MenuItem>
                              ))}
                            </Select>
                          </FormControl>
                        ) : (
                          <Chip
                            label={
                              empresa.estado_empresa?.descripcion ||
                              (empresa.active ? "Activa" : "Inactiva")
                            }
                            size="small"
                            color={
                              ESTADO_COLORS[empresa.estado_empresa?.codigo] ||
                              "default"
                            }
                          />
                        )}
                      </TableCell>
                      <TableCell align="right">
                        {canCambiarContexto && (
                          <Tooltip title="Entrar a esta empresa">
                            <IconButton
                              size="small"
                              onClick={() => handleSwitchEmpresa(empresa)}
                              disabled={
                                !empresa.active || switchMutation.isPending
                              }
                            >
                              <Login
                                fontSize="small"
                                color={empresa.active ? "primary" : "disabled"}
                              />
                            </IconButton>
                          </Tooltip>
                        )}
                        {canEdit && (
                          <Tooltip title="Editar">
                            <IconButton
                              size="small"
                              onClick={() => handleOpenEdit(empresa)}
                            >
                              <Edit fontSize="small" />
                            </IconButton>
                          </Tooltip>
                        )}
                        {tipoEmpresaActual === "holding" && !isCurrentEmpresa && (
                          <Tooltip title="Eliminar empresa permanentemente">
                            <IconButton
                              size="small"
                              color="error"
                              onClick={() => {
                                setDeleteDialog({ open: true, empresa });
                                setDeleteConfirmText("");
                              }}
                            >
                              <DeleteForever fontSize="small" />
                            </IconButton>
                          </Tooltip>
                        )}
                      </TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      <Dialog open={formOpen} onClose={handleCloseForm} maxWidth="sm" fullWidth>
        <DialogTitle>
          {formMode === "create" ? "Nueva Empresa" : "Editar Empresa"}
        </DialogTitle>
        <form onSubmit={handleSubmit}>
          <DialogContent
            dividers
            sx={{ display: "flex", flexDirection: "column", gap: 2 }}
          >
            <Box sx={{ display: "flex", gap: 2 }}>
              <TextField
                label="RUC *"
                size="small"
                value={formData.ruc}
                onChange={(e) =>
                  setFormData({ ...formData, ruc: e.target.value })
                }
                inputProps={{ maxLength: 8 }}
                sx={{ flex: 1 }}
              />
              <TextField
                label="DV *"
                size="small"
                value={formData.dv}
                onChange={(e) =>
                  setFormData({ ...formData, dv: e.target.value })
                }
                inputProps={{ maxLength: 1 }}
                sx={{ width: 80 }}
              />
            </Box>

            <TextField
              label="Razón Social *"
              size="small"
              fullWidth
              value={formData.razon_social}
              onChange={(e) =>
                setFormData({ ...formData, razon_social: e.target.value })
              }
            />

            <TextField
              label="Nombre Fantasía"
              size="small"
              fullWidth
              value={formData.nombre_fantasia}
              onChange={(e) =>
                setFormData({ ...formData, nombre_fantasia: e.target.value })
              }
            />

            <Box sx={{ display: "flex", gap: 2 }}>
              <TextField
                label="Celular *"
                size="small"
                fullWidth
                value={formData.celular}
                onChange={(e) =>
                  setFormData({ ...formData, celular: e.target.value })
                }
              />
              <TextField
                label="Email *"
                size="small"
                fullWidth
                type="email"
                value={formData.email}
                onChange={(e) =>
                  setFormData({ ...formData, email: e.target.value })
                }
              />
            </Box>

            {tipoEmpresaActual === "holding" && (
              <Box sx={{ display: "flex", gap: 2 }}>
                <FormControl size="small" fullWidth>
                  <InputLabel>Tipo de Empresa</InputLabel>
                  <Select
                    value={formData.type}
                    label="Tipo de Empresa"
                    onChange={(e) =>
                      setFormData({ ...formData, type: e.target.value })
                    }
                  >
                    {tiposEmpresaDisponibles.map((tipo) => (
                      <MenuItem key={tipo.value} value={tipo.value}>
                        {tipo.label}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>

                <Autocomplete
                  size="small"
                  fullWidth
                  options={[
                    { id: "", razon_social: "Sin empresa padre", ruc: "" },
                    ...empresasRaw.filter((e) => e.id !== selectedEmpresa?.id),
                  ]}
                  value={
                    empresasRaw.find((e) => e.id === formData.parent_id) || {
                      id: "",
                      razon_social: "Sin empresa padre",
                      ruc: "",
                    }
                  }
                  onChange={(_, newValue) =>
                    setFormData({
                      ...formData,
                      parent_id: newValue?.id || "",
                    })
                  }
                  getOptionLabel={(option) =>
                    option.ruc
                      ? `${option.razon_social} (${option.ruc})`
                      : option.razon_social
                  }
                  isOptionEqualToValue={(option, value) =>
                    option.id === value.id
                  }
                  renderInput={(params) => (
                    <TextField {...params} label="Empresa Padre" />
                  )}
                  noOptionsText="No se encontraron empresas"
                />
              </Box>
            )}

            {formMode === "create" && (
              <>
                <FormControl size="small" fullWidth>
                  <InputLabel>Plan *</InputLabel>
                  <Select
                    value={formData.plan_id}
                    label="Plan *"
                    onChange={(e) =>
                      setFormData({ ...formData, plan_id: e.target.value })
                    }
                  >
                    {planes.map((plan) => (
                      <MenuItem key={plan.id} value={plan.id}>
                        {plan.descripcion || plan.codigo}
                        {plan.precio
                          ? ` — ${Number(plan.precio).toLocaleString("es-PY")} Gs/mes`
                          : " — Gratis"}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>

                {/* Condiciones comerciales del plan */}
                <Typography variant="subtitle2" color="text.secondary" sx={{ mt: 1 }}>
                  Condiciones del plan
                </Typography>
                <Box sx={{ display: "flex", gap: 2 }}>
                  <TextField
                    label="Precio acordado (Gs.)"
                    size="small"
                    fullWidth
                    type="number"
                    value={formData.precio_acordado}
                    onChange={(e) =>
                      setFormData({ ...formData, precio_acordado: e.target.value })
                    }
                    placeholder={
                      planes.find((p) => p.id === formData.plan_id)
                        ? `Base: ${Number(planes.find((p) => p.id === formData.plan_id).precio).toLocaleString("es-PY")} Gs.`
                        : "Precio del plan por defecto"
                    }
                    helperText="Vacío = precio base del plan"
                  />
                  <TextField
                    label="Día de cobro (1–28)"
                    size="small"
                    fullWidth
                    type="number"
                    value={formData.dia_cobro}
                    onChange={(e) =>
                      setFormData({ ...formData, dia_cobro: e.target.value })
                    }
                    placeholder="Ej: 1, 10, 15..."
                    inputProps={{ min: 1, max: 28 }}
                    helperText="Día fijo del mes para cobrar"
                  />
                </Box>
                <TextField
                  label="Fecha inicio del plan"
                  size="small"
                  fullWidth
                  type="date"
                  value={formData.fecha_inicio_plan}
                  onChange={(e) =>
                    setFormData({ ...formData, fecha_inicio_plan: e.target.value })
                  }
                  helperText="Cuándo empieza a correr (puede ser hoy, futura o pasada)"
                  InputLabelProps={{ shrink: true }}
                />
                {formMode === "create" && formData.fecha_inicio_plan && (
                  <Box
                    sx={{
                      display: "flex",
                      alignItems: "baseline",
                      justifyContent: "space-between",
                      gap: 1,
                      flexWrap: "wrap",
                      px: 1.5,
                      py: 1,
                      mt: -1,
                      borderRadius: 1,
                      bgcolor: "action.hover",
                    }}
                  >
                    <Typography variant="caption" color="text.secondary">
                      Primer vencimiento
                    </Typography>
                    {previewCargando && !previewCobro ? (
                      <Typography variant="caption" color="text.secondary">
                        calculando…
                      </Typography>
                    ) : previewCobro?.primer_cobro ? (
                      <Typography variant="body2" fontWeight={600}>
                        {fmtFechaCalendario(previewCobro.primer_cobro)}
                        <Typography
                          component="span"
                          variant="caption"
                          color="text.secondary"
                          sx={{ ml: 1, fontWeight: 400 }}
                        >
                          {previewCobro.dias_primer_periodo} días de servicio antes de cobrar
                        </Typography>
                      </Typography>
                    ) : (
                      <Typography variant="caption" color="text.secondary">
                        —
                      </Typography>
                    )}
                  </Box>
                )}
                <TextField
                  label="Notas comerciales"
                  size="small"
                  fullWidth
                  multiline
                  rows={2}
                  value={formData.notas_comerciales}
                  onChange={(e) =>
                    setFormData({ ...formData, notas_comerciales: e.target.value })
                  }
                  placeholder="Ej: 2 meses gratis, precio especial por volumen..."
                  inputProps={{ maxLength: 255 }}
                  helperText="Acuerdos o condiciones especiales del trato"
                />

                <Typography
                  variant="subtitle2"
                  color="text.secondary"
                  sx={{ mt: 1 }}
                >
                  Datos del usuario administrador
                </Typography>
                <TextField
                  label="Nombre del usuario"
                  size="small"
                  fullWidth
                  value={formData.nombres_usuario}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      nombres_usuario: e.target.value,
                    })
                  }
                  placeholder="Ej: Juan Pérez"
                />
                <Box sx={{ display: "flex", gap: 2 }}>
                  <TextField
                    label="Usuario *"
                    size="small"
                    fullWidth
                    value={formData.usuario}
                    onChange={(e) =>
                      setFormData({ ...formData, usuario: e.target.value })
                    }
                    placeholder="Ej: admin_empresa"
                    autoComplete="off"
                  />
                  <TextField
                    label="Contraseña *"
                    size="small"
                    fullWidth
                    type="password"
                    value={formData.password}
                    onChange={(e) =>
                      setFormData({ ...formData, password: e.target.value })
                    }
                    placeholder="Mínimo 6 caracteres"
                    autoComplete="new-password"
                  />
                </Box>
              </>
            )}
          </DialogContent>

          <DialogActions sx={{ px: 3, py: 2 }}>
            <Button onClick={handleCloseForm}>Cancelar</Button>
            <Button
              type="submit"
              variant="contained"
              disabled={createMutation.isPending || updateMutation.isPending}
              startIcon={
                (createMutation.isPending || updateMutation.isPending) && (
                  <CircularProgress size={16} />
                )
              }
            >
              {createMutation.isPending || updateMutation.isPending
                ? "Guardando..."
                : formMode === "create"
                  ? "Crear"
                  : "Guardar"}
            </Button>
          </DialogActions>
        </form>
      </Dialog>

      {/* Diálogo de eliminación permanente */}
      <Dialog
        open={deleteDialog.open}
        onClose={() => setDeleteDialog({ open: false, empresa: null })}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle sx={{ color: "error.main", display: "flex", alignItems: "center", gap: 1 }}>
          <DeleteForever fontSize="small" />
          Eliminar empresa permanentemente
        </DialogTitle>
        <DialogContent dividers sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <Typography variant="body2" color="text.secondary">
            Esta acción eliminará <strong>todos los datos</strong> de la empresa{" "}
            <strong>{deleteDialog.empresa?.razon_social}</strong> incluyendo facturas,
            usuarios, suscripciones y todos sus registros. Esta acción es{" "}
            <strong style={{ color: "red" }}>irreversible</strong>.
          </Typography>
          <Typography variant="body2">
            Escribe el nombre de la empresa para confirmar:
          </Typography>
          <TextField
            size="small"
            fullWidth
            placeholder={deleteDialog.empresa?.razon_social}
            value={deleteConfirmText}
            onChange={(e) => setDeleteConfirmText(e.target.value)}
            error={deleteConfirmText.length > 0 && deleteConfirmText !== deleteDialog.empresa?.razon_social}
            helperText={
              deleteConfirmText.length > 0 && deleteConfirmText !== deleteDialog.empresa?.razon_social
                ? "El nombre no coincide"
                : " "
            }
          />
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => setDeleteDialog({ open: false, empresa: null })}
            color="inherit"
          >
            Cancelar
          </Button>
          <Button
            variant="contained"
            color="error"
            disabled={
              deleteConfirmText !== deleteDialog.empresa?.razon_social ||
              deleteMutation.isPending
            }
            startIcon={deleteMutation.isPending ? <CircularProgress size={16} /> : <DeleteForever />}
            onClick={() => deleteMutation.mutate(deleteDialog.empresa?.id)}
          >
            {deleteMutation.isPending ? "Eliminando..." : "Eliminar permanentemente"}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};