import { useState } from "react";
import {
  Box,
  Button,
  Chip,
  IconButton,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tooltip,
  Typography,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
import EditIcon from "@mui/icons-material/Edit";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { EmptyState, ScreenGuia } from "../components/_standards";
import PerfilEditorDialog from "../components/organismos/Seguridad/PerfilEditorDialog";
import { useConfirmDialog } from "../hooks/useConfirmDialog";
import {
  useCargarPerfilesSugeridosMutation,
  useClonarPerfilMutation,
  useEliminarPerfilMutation,
  usePerfilesV2Query,
} from "../tanstack/SeguridadStack";

export default function SeguridadPerfiles() {
  const perfilesQ = usePerfilesV2Query();
  const cargarSugeridosM = useCargarPerfilesSugeridosMutation();
  const clonarM = useClonarPerfilMutation();
  const eliminarM = useEliminarPerfilMutation();

  const [editorOpen, setEditorOpen] = useState(false);
  const [perfilEditando, setPerfilEditando] = useState(null);
  const { confirm, dialogs } = useConfirmDialog();

  const perfiles = perfilesQ.data || [];
  const haySistema = perfiles.some((p) => p.is_sistema);

  const abrirNuevo = () => {
    setPerfilEditando(null);
    setEditorOpen(true);
  };

  const abrirEdicion = (p) => {
    setPerfilEditando(p.id);
    setEditorOpen(true);
  };

  const handleClonar = async (p) => {
    const ok = await confirm({
      title: `¿Clonar el perfil "${p.perfil}"?`,
      message:
        'Se creará una copia editable llamada "Copia de ' +
        p.perfil +
        '" con los mismos privilegios.',
      confirmText: "Clonar",
      cancelText: "Cancelar",
    });
    if (!ok) return;
    await clonarM.mutateAsync(p.id);
  };

  const handleEliminar = async (p) => {
    const ok = await confirm({
      title: `¿Eliminar el perfil "${p.perfil}"?`,
      message:
        "Esta acción no se puede deshacer. Si el perfil tiene usuarios asignados, primero desasignalos.",
      confirmText: "Eliminar",
      cancelText: "Cancelar",
      confirmColor: "error",
    });
    if (!ok) return;
    await eliminarM.mutateAsync(p.id);
  };

  return (
    <Box sx={{ p: { xs: 2, md: 3 } }}>
      <ScreenGuia
        titulo="Perfiles y permisos"
        intro="Los perfiles agrupan privilegios que luego se asignan a los usuarios."
        pasos={[
          {
            titulo: "Cargar sugeridos",
            desc: 'Si la empresa no tiene perfiles base, usá "Cargar perfiles sugeridos" para sembrar Cajero, Vendedor, Cobrador, etc.',
          },
          {
            titulo: "Personalizar uno del sistema",
            desc: "Los perfiles marcados como 'Sistema' son solo lectura. Cloná y editá la copia.",
          },
          {
            titulo: "Eliminar",
            desc: "Un perfil con usuarios asignados no se puede eliminar — desasignalos primero.",
          },
        ]}
      />

      <Stack
        direction={{ xs: "column", sm: "row" }}
        spacing={1}
        justifyContent="space-between"
        alignItems={{ xs: "stretch", sm: "center" }}
        sx={{ mb: 2, mt: 2 }}
      >
        <Typography variant="h5">Perfiles ({perfiles.length})</Typography>
        <Stack direction="row" spacing={1}>
          {!haySistema && (
            <Button
              variant="outlined"
              startIcon={<AutoFixHighIcon />}
              onClick={() => cargarSugeridosM.mutate()}
              disabled={cargarSugeridosM.isPending}
            >
              Cargar perfiles sugeridos
            </Button>
          )}
          <Button variant="contained" startIcon={<AddIcon />} onClick={abrirNuevo}>
            Nuevo perfil
          </Button>
        </Stack>
      </Stack>

      {perfiles.length === 0 && !perfilesQ.isLoading ? (
        <EmptyState
          icon="mdi:shield-account-outline"
          title="Aún no tenés perfiles cargados"
          description='Empezá con "Cargar perfiles sugeridos" para tener una base lista (Cajero, Vendedor, Cobrador, etc.) o creá uno desde cero.'
          ctaLabel="Cargar perfiles sugeridos"
          ctaIcon="mdi:auto-fix"
          onCta={() => cargarSugeridosM.mutate()}
        />
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Perfil</TableCell>
                <TableCell>Descripción</TableCell>
                <TableCell align="center">Privilegios</TableCell>
                <TableCell align="center">Usuarios</TableCell>
                <TableCell align="right">Acciones</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {perfiles.map((p) => (
                <TableRow key={p.id} hover>
                  <TableCell>
                    <Stack direction="row" spacing={1} alignItems="center">
                      <Typography fontWeight={500}>{p.perfil}</Typography>
                      {p.is_sistema && (
                        <Chip
                          size="small"
                          color="warning"
                          variant="outlined"
                          icon={<LockOutlinedIcon />}
                          label="Sistema"
                        />
                      )}
                    </Stack>
                  </TableCell>
                  <TableCell sx={{ color: "text.secondary" }}>
                    {p.desc_perfil || "—"}
                  </TableCell>
                  <TableCell align="center">
                    {p._count?.perfiles_privilegios ?? 0}
                  </TableCell>
                  <TableCell align="center">
                    {p._count?.usuario_perfiles ?? 0}
                  </TableCell>
                  <TableCell align="right">
                    <Tooltip title={p.is_sistema ? "Ver" : "Editar"}>
                      <IconButton size="small" onClick={() => abrirEdicion(p)}>
                        <EditIcon fontSize="small" />
                      </IconButton>
                    </Tooltip>
                    <Tooltip title="Clonar">
                      <IconButton
                        size="small"
                        onClick={() => handleClonar(p)}
                        disabled={clonarM.isPending}
                      >
                        <ContentCopyIcon fontSize="small" />
                      </IconButton>
                    </Tooltip>
                    <Tooltip
                      title={
                        p.is_sistema
                          ? "No se puede eliminar un perfil del sistema"
                          : "Eliminar"
                      }
                    >
                      <span>
                        <IconButton
                          size="small"
                          onClick={() => handleEliminar(p)}
                          disabled={
                            p.is_sistema ||
                            (p._count?.usuario_perfiles ?? 0) > 0 ||
                            eliminarM.isPending
                          }
                        >
                          <DeleteOutlineIcon fontSize="small" />
                        </IconButton>
                      </span>
                    </Tooltip>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      <PerfilEditorDialog
        open={editorOpen}
        onClose={() => setEditorOpen(false)}
        perfilId={perfilEditando}
      />

      {dialogs}
    </Box>
  );
}