import {
  Add,
  Circle,
  Close,
  Delete,
  Edit,
  ExpandMore,
  Palette,
  PowerSettingsNew,
} from "@mui/icons-material";
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Button,
  Chip,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Paper,
  Skeleton,
  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 {
  createAtributo,
  createAtributoValor,
  deleteAtributo,
  deleteAtributoValor,
  getAtributos,
  toggleAtributo,
  toggleAtributoValor,
  updateAtributo,
  updateAtributoValor,
} from "../../api/productos.service";
import { getErrorApi } from "../../utils/errorUtils";
import { usePermission } from "../../hooks/usePermission";
import { AccesoRestringido } from "../common/AccesoRestringido";

export function AtributosTab() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const queryClient = useQueryClient();
  const { can } = usePermission("INVENTARIO");
  const canRead = can("INV_ATR_ATRIBUTO_VER");
  const canCreate = can("INV_ATR_ATRIBUTO_CREAR");
  const canEdit = can("INV_ATR_ATRIBUTO_EDITAR");
  const canDelete = can("INV_ATR_ATRIBUTO_ELIMINAR");

  // ── State ──────────────────────────────────────────────────
  const [atributoDialogOpen, setAtributoDialogOpen] = useState(false);
  const [atributoFormMode, setAtributoFormMode] = useState("create");
  const [selectedAtributo, setSelectedAtributo] = useState(null);
  const [atributoForm, setAtributoForm] = useState({
    nombre: "",
    descripcion: "",
    orden: 0,
  });

  const [valorDialogOpen, setValorDialogOpen] = useState(false);
  const [valorFormMode, setValorFormMode] = useState("create");
  const [selectedValor, setSelectedValor] = useState(null);
  const [valorForm, setValorForm] = useState({
    atributo_id: "",
    valor: "",
    codigo: "",
    color_hex: "",
    orden: 0,
  });

  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState(null); // { type, id, label }
  const [expandedAtributo, setExpandedAtributo] = useState(null);

  // ── Queries ────────────────────────────────────────────────
  const {
    data: atributos = [],
    isLoading,
    error: atributosError,
  } = useQuery({
    queryKey: ["producto-atributos"],
    queryFn: getAtributos,
  });

  const errorModulo = getErrorApi(atributosError);

  // ── Mutations: Atributos ───────────────────────────────────
  const createAtributoMut = useMutation({
    mutationFn: createAtributo,
    onSuccess: () => {
      toast.success("Atributo creado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
      handleCloseAtributoForm();
    },
    onError: (e) => toast.error(e.response?.data?.message || "Error al crear"),
  });

  const updateAtributoMut = useMutation({
    mutationFn: ({ id, data }) => updateAtributo(id, data),
    onSuccess: () => {
      toast.success("Atributo actualizado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
      handleCloseAtributoForm();
    },
    onError: (e) =>
      toast.error(e.response?.data?.message || "Error al actualizar"),
  });

  const toggleAtributoMut = useMutation({
    mutationFn: toggleAtributo,
    onSuccess: () => {
      toast.success("Estado actualizado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
    },
    onError: (e) =>
      toast.error(e.response?.data?.message || "Error al cambiar estado"),
  });

  const deleteAtributoMut = useMutation({
    mutationFn: deleteAtributo,
    onSuccess: () => {
      toast.success("Atributo eliminado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
      handleCloseDelete();
    },
    onError: (e) =>
      toast.error(e.response?.data?.message || "Error al eliminar"),
  });

  // ── Mutations: Valores ─────────────────────────────────────
  const createValorMut = useMutation({
    mutationFn: createAtributoValor,
    onSuccess: () => {
      toast.success("Valor creado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
      handleCloseValorForm();
    },
    onError: (e) => toast.error(e.response?.data?.message || "Error al crear"),
  });

  const updateValorMut = useMutation({
    mutationFn: ({ id, data }) => updateAtributoValor(id, data),
    onSuccess: () => {
      toast.success("Valor actualizado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
      handleCloseValorForm();
    },
    onError: (e) =>
      toast.error(e.response?.data?.message || "Error al actualizar"),
  });

  const toggleValorMut = useMutation({
    mutationFn: toggleAtributoValor,
    onSuccess: () => {
      toast.success("Estado actualizado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
    },
    onError: (e) =>
      toast.error(e.response?.data?.message || "Error al cambiar estado"),
  });

  const deleteValorMut = useMutation({
    mutationFn: deleteAtributoValor,
    onSuccess: () => {
      toast.success("Valor eliminado");
      queryClient.invalidateQueries({ queryKey: ["producto-atributos"] });
      handleCloseDelete();
    },
    onError: (e) =>
      toast.error(e.response?.data?.message || "Error al eliminar"),
  });

  // ── Handlers: Atributo form ────────────────────────────────
  const handleOpenCreateAtributo = () => {
    setAtributoFormMode("create");
    setSelectedAtributo(null);
    setAtributoForm({ nombre: "", descripcion: "", orden: 0 });
    setAtributoDialogOpen(true);
  };

  const handleOpenEditAtributo = (atributo) => {
    setAtributoFormMode("edit");
    setSelectedAtributo(atributo);
    setAtributoForm({
      nombre: atributo.nombre || "",
      descripcion: atributo.descripcion || "",
      orden: atributo.orden ?? 0,
    });
    setAtributoDialogOpen(true);
  };

  const handleCloseAtributoForm = () => {
    setAtributoDialogOpen(false);
    setSelectedAtributo(null);
  };

  const handleSubmitAtributo = () => {
    if (!atributoForm.nombre.trim()) {
      toast.error("El nombre es requerido");
      return;
    }
    if (atributoFormMode === "create") {
      createAtributoMut.mutate(atributoForm);
    } else {
      updateAtributoMut.mutate({
        id: selectedAtributo.id,
        data: atributoForm,
      });
    }
  };

  // ── Handlers: Valor form ───────────────────────────────────
  const handleOpenCreateValor = (atributoId) => {
    setValorFormMode("create");
    setSelectedValor(null);
    setValorForm({
      atributo_id: atributoId,
      valor: "",
      codigo: "",
      color_hex: "",
      orden: 0,
    });
    setValorDialogOpen(true);
  };

  const handleOpenEditValor = (valor, atributoId) => {
    setValorFormMode("edit");
    setSelectedValor(valor);
    setValorForm({
      atributo_id: atributoId,
      valor: valor.valor || "",
      codigo: valor.codigo || "",
      color_hex: valor.color_hex || "",
      orden: valor.orden ?? 0,
    });
    setValorDialogOpen(true);
  };

  const handleCloseValorForm = () => {
    setValorDialogOpen(false);
    setSelectedValor(null);
  };

  const handleSubmitValor = () => {
    if (!valorForm.valor.trim()) {
      toast.error("El valor es requerido");
      return;
    }
    const payload = { ...valorForm };
    if (!payload.codigo) delete payload.codigo;
    if (!payload.color_hex) delete payload.color_hex;

    if (valorFormMode === "create") {
      createValorMut.mutate(payload);
    } else {
      updateValorMut.mutate({ id: selectedValor.id, data: payload });
    }
  };

  // ── Handlers: Delete ───────────────────────────────────────
  const handleOpenDelete = (type, id, label) => {
    setDeleteTarget({ type, id, label });
    setDeleteDialogOpen(true);
  };

  const handleCloseDelete = () => {
    setDeleteDialogOpen(false);
    setDeleteTarget(null);
  };

  const handleConfirmDelete = () => {
    if (!deleteTarget) return;
    if (deleteTarget.type === "atributo") {
      deleteAtributoMut.mutate(deleteTarget.id);
    } else {
      deleteValorMut.mutate(deleteTarget.id);
    }
  };

  // ── Render ─────────────────────────────────────────────────
  if (!canRead) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver los atributos." />
    );
  }

  if (errorModulo) {
    return (
      <AccesoRestringido titulo="Módulo no disponible" mensaje={errorModulo} />
    );
  }

  return (
    <Box sx={{ p: { xs: 1, md: 2 }, height: "100%" }}>
      <Paper
        sx={{
          p: { xs: 1, md: 2 },
          height: "100%",
          display: "flex",
          flexDirection: "column",
        }}
      >
        {/* Header */}
        <Box
          sx={{
            display: "flex",
            flexDirection: { xs: "column", sm: "row" },
            justifyContent: "space-between",
            alignItems: { xs: "stretch", sm: "center" },
            gap: 1,
            mb: 2,
          }}
        >
          <Box>
            <Typography
              variant="h6"
              sx={{ fontSize: { xs: "1rem", md: "1.25rem" } }}
            >
              <Palette
                sx={{ fontSize: 20, verticalAlign: "middle", mr: 0.5 }}
              />
              Atributos de Producto
            </Typography>
            <Typography variant="caption" color="text.secondary">
              Define atributos (Color, Talla, etc.) y sus valores para crear
              variantes
            </Typography>
          </Box>
          {canCreate && (
            <Button
              variant="contained"
              startIcon={<Add />}
              onClick={handleOpenCreateAtributo}
              size={isMobile ? "small" : "medium"}
            >
              Nuevo Atributo
            </Button>
          )}
        </Box>

        {/* Content */}
        <Box sx={{ flex: 1, overflow: "auto" }}>
          {isLoading ? (
            <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
              {[1, 2, 3].map((i) => (
                <Skeleton key={i} variant="rounded" height={60} />
              ))}
            </Box>
          ) : atributos.length === 0 ? (
            <Box sx={{ textAlign: "center", py: 4 }}>
              <Palette
                sx={{ fontSize: 48, color: "text.disabled", mb: 1 }}
              />
              <Typography color="text.secondary">
                No hay atributos registrados
              </Typography>
              <Typography variant="caption" color="text.secondary">
                Crea atributos como &ldquo;Color&rdquo;, &ldquo;Talla&rdquo;,
                &ldquo;Material&rdquo; para definir variantes de productos
              </Typography>
            </Box>
          ) : (
            atributos.map((atributo) => (
              <Accordion
                key={atributo.id}
                expanded={expandedAtributo === atributo.id}
                onChange={(_, isExpanded) =>
                  setExpandedAtributo(isExpanded ? atributo.id : null)
                }
                sx={{
                  mb: 1,
                  borderRadius: "8px !important",
                  "&:before": { display: "none" },
                  border: 1,
                  borderColor: "divider",
                  opacity: atributo.active === false ? 0.6 : 1,
                }}
              >
                <AccordionSummary
                  expandIcon={<ExpandMore />}
                  sx={{ minHeight: 48, "& .MuiAccordionSummary-content": { my: 1 } }}
                >
                  <Box
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      gap: 1,
                      flex: 1,
                      mr: 1,
                    }}
                  >
                    <Typography fontWeight={600} variant="body1">
                      {atributo.nombre}
                    </Typography>
                    {atributo.descripcion && (
                      <Typography
                        variant="caption"
                        color="text.secondary"
                        sx={{ display: { xs: "none", sm: "block" } }}
                      >
                        — {atributo.descripcion}
                      </Typography>
                    )}
                    <Chip
                      label={`${atributo.valores?.length || 0} valores`}
                      size="small"
                      variant="outlined"
                      sx={{ height: 22, fontSize: "0.7rem" }}
                    />
                    {atributo.active === false && (
                      <Chip
                        label="Inactivo"
                        size="small"
                        color="error"
                        variant="outlined"
                        sx={{ height: 22, fontSize: "0.65rem" }}
                      />
                    )}
                  </Box>
                  <Box
                    sx={{ display: "flex", gap: 0.5 }}
                    onClick={(e) => e.stopPropagation()}
                  >
                    {canEdit && (
                      <Tooltip title="Editar atributo">
                        <IconButton
                          size="small"
                          onClick={() => handleOpenEditAtributo(atributo)}
                          color="warning"
                        >
                          <Edit sx={{ fontSize: 18 }} />
                        </IconButton>
                      </Tooltip>
                    )}
                    {canDelete && (
                      <Tooltip
                        title={
                          atributo.active !== false ? "Desactivar" : "Activar"
                        }
                      >
                        <IconButton
                          size="small"
                          onClick={() => toggleAtributoMut.mutate(atributo.id)}
                          color={
                            atributo.active !== false ? "error" : "success"
                          }
                        >
                          <PowerSettingsNew sx={{ fontSize: 18 }} />
                        </IconButton>
                      </Tooltip>
                    )}
                    {canDelete && (
                      <Tooltip title="Eliminar atributo">
                        <IconButton
                          size="small"
                          onClick={() =>
                            handleOpenDelete(
                              "atributo",
                              atributo.id,
                              atributo.nombre,
                            )
                          }
                          color="error"
                        >
                          <Delete sx={{ fontSize: 18 }} />
                        </IconButton>
                      </Tooltip>
                    )}
                  </Box>
                </AccordionSummary>
                <AccordionDetails sx={{ pt: 0 }}>
                  {/* Valores header */}
                  <Box
                    sx={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      mb: 1.5,
                    }}
                  >
                    <Typography variant="body2" fontWeight={500}>
                      Valores
                    </Typography>
                    {canCreate && (
                      <Button
                        size="small"
                        startIcon={<Add />}
                        onClick={() => handleOpenCreateValor(atributo.id)}
                        sx={{ textTransform: "none" }}
                      >
                        Agregar Valor
                      </Button>
                    )}
                  </Box>

                  {/* Valores list */}
                  {!atributo.valores || atributo.valores.length === 0 ? (
                    <Typography
                      variant="body2"
                      color="text.secondary"
                      sx={{ py: 1 }}
                    >
                      Sin valores. Agrega valores como &ldquo;Rojo&rdquo;,
                      &ldquo;Azul&rdquo;, &ldquo;S&rdquo;, &ldquo;M&rdquo;,
                      &ldquo;L&rdquo;...
                    </Typography>
                  ) : (
                    <Box
                      sx={{
                        display: "flex",
                        gap: 1,
                        flexWrap: "wrap",
                      }}
                    >
                      {atributo.valores.map((val) => (
                        <Chip
                          key={val.id}
                          label={
                            <Box
                              sx={{
                                display: "flex",
                                alignItems: "center",
                                gap: 0.5,
                              }}
                            >
                              {val.color_hex && (
                                <Circle
                                  sx={{
                                    fontSize: 14,
                                    color: val.color_hex,
                                  }}
                                />
                              )}
                              <span>{val.valor}</span>
                              {val.codigo && (
                                <Typography
                                  component="span"
                                  variant="caption"
                                  color="text.secondary"
                                  sx={{ ml: 0.25 }}
                                >
                                  ({val.codigo})
                                </Typography>
                              )}
                            </Box>
                          }
                          variant={val.active !== false ? "filled" : "outlined"}
                          color={val.active !== false ? "default" : "error"}
                          sx={{
                            height: 32,
                            ...(val.color_hex &&
                              val.active !== false && {
                                borderColor: val.color_hex,
                                border: "1px solid",
                              }),
                          }}
                          onDelete={
                            canEdit
                              ? () => handleOpenEditValor(val, atributo.id)
                              : undefined
                          }
                          deleteIcon={
                            <Edit sx={{ fontSize: "16px !important" }} />
                          }
                        />
                      ))}
                    </Box>
                  )}
                </AccordionDetails>
              </Accordion>
            ))
          )}
        </Box>
      </Paper>

      {/* ═══════════ Dialog: Crear/Editar Atributo ═══════════ */}
      <Dialog
        open={atributoDialogOpen}
        onClose={handleCloseAtributoForm}
        maxWidth="xs"
        fullWidth
        fullScreen={isMobile}
      >
        <DialogTitle>
          {atributoFormMode === "create"
            ? "Nuevo Atributo"
            : "Editar Atributo"}
        </DialogTitle>
        <DialogContent>
          <Box
            sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 1 }}
          >
            <TextField
              fullWidth
              size="small"
              label="Nombre *"
              value={atributoForm.nombre}
              onChange={(e) =>
                setAtributoForm({ ...atributoForm, nombre: e.target.value })
              }
              placeholder="Ej: Color, Talla, Material"
              autoFocus
              inputProps={{ maxLength: 100 }}
            />
            <TextField
              fullWidth
              size="small"
              label="Descripción"
              value={atributoForm.descripcion}
              onChange={(e) =>
                setAtributoForm({
                  ...atributoForm,
                  descripcion: e.target.value,
                })
              }
              placeholder="Ej: Color del producto"
              inputProps={{ maxLength: 255 }}
            />
            <TextField
              fullWidth
              size="small"
              label="Orden"
              type="number"
              value={atributoForm.orden}
              onChange={(e) =>
                setAtributoForm({
                  ...atributoForm,
                  orden: parseInt(e.target.value) || 0,
                })
              }
              inputProps={{ min: 0 }}
            />
          </Box>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={handleCloseAtributoForm}>Cancelar</Button>
          <Button
            variant="contained"
            onClick={handleSubmitAtributo}
            disabled={
              createAtributoMut.isPending || updateAtributoMut.isPending
            }
          >
            {createAtributoMut.isPending || updateAtributoMut.isPending
              ? "Guardando..."
              : atributoFormMode === "create"
                ? "Crear"
                : "Guardar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* ═══════════ Dialog: Crear/Editar Valor ═══════════ */}
      <Dialog
        open={valorDialogOpen}
        onClose={handleCloseValorForm}
        maxWidth="xs"
        fullWidth
        fullScreen={isMobile}
      >
        <DialogTitle>
          {valorFormMode === "create" ? "Nuevo Valor" : "Editar Valor"}
          {isMobile && (
            <IconButton
              onClick={handleCloseValorForm}
              sx={{ position: "absolute", right: 8, top: 8 }}
            >
              <Close />
            </IconButton>
          )}
        </DialogTitle>
        <DialogContent>
          <Box
            sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 1 }}
          >
            <TextField
              fullWidth
              size="small"
              label="Valor *"
              value={valorForm.valor}
              onChange={(e) =>
                setValorForm({ ...valorForm, valor: e.target.value })
              }
              placeholder="Ej: Rojo, S, Algodón"
              autoFocus
              inputProps={{ maxLength: 100 }}
            />
            <TextField
              fullWidth
              size="small"
              label="Código"
              value={valorForm.codigo}
              onChange={(e) =>
                setValorForm({ ...valorForm, codigo: e.target.value })
              }
              placeholder="Ej: ROJ, S, ALG"
              inputProps={{ maxLength: 20 }}
            />
            <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
              <TextField
                fullWidth
                size="small"
                label="Color (hex)"
                value={valorForm.color_hex}
                onChange={(e) =>
                  setValorForm({ ...valorForm, color_hex: e.target.value })
                }
                placeholder="#FF0000"
                inputProps={{ maxLength: 7 }}
              />
              {valorForm.color_hex && (
                <Box
                  sx={{
                    width: 36,
                    height: 36,
                    borderRadius: 1,
                    bgcolor: valorForm.color_hex,
                    border: "1px solid rgba(0,0,0,0.2)",
                    flexShrink: 0,
                  }}
                />
              )}
              <input
                type="color"
                value={valorForm.color_hex || "#000000"}
                onChange={(e) =>
                  setValorForm({ ...valorForm, color_hex: e.target.value })
                }
                style={{
                  width: 36,
                  height: 36,
                  padding: 0,
                  border: "none",
                  cursor: "pointer",
                  flexShrink: 0,
                }}
              />
            </Box>
            <TextField
              fullWidth
              size="small"
              label="Orden"
              type="number"
              value={valorForm.orden}
              onChange={(e) =>
                setValorForm({
                  ...valorForm,
                  orden: parseInt(e.target.value) || 0,
                })
              }
              inputProps={{ min: 0 }}
            />

            {/* Actions for valor in edit mode */}
            {valorFormMode === "edit" && selectedValor && (
              <Box
                sx={{
                  display: "flex",
                  gap: 1,
                  pt: 1,
                  borderTop: 1,
                  borderColor: "divider",
                }}
              >
                {canDelete && (
                  <Button
                    size="small"
                    color={
                      selectedValor.active !== false ? "error" : "success"
                    }
                    startIcon={<PowerSettingsNew />}
                    onClick={() => {
                      toggleValorMut.mutate(selectedValor.id);
                      handleCloseValorForm();
                    }}
                  >
                    {selectedValor.active !== false
                      ? "Desactivar"
                      : "Activar"}
                  </Button>
                )}
                {canDelete && (
                  <Button
                    size="small"
                    color="error"
                    startIcon={<Delete />}
                    onClick={() => {
                      handleCloseValorForm();
                      handleOpenDelete(
                        "valor",
                        selectedValor.id,
                        selectedValor.valor,
                      );
                    }}
                  >
                    Eliminar
                  </Button>
                )}
              </Box>
            )}
          </Box>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={handleCloseValorForm}>Cancelar</Button>
          <Button
            variant="contained"
            onClick={handleSubmitValor}
            disabled={createValorMut.isPending || updateValorMut.isPending}
          >
            {createValorMut.isPending || updateValorMut.isPending
              ? "Guardando..."
              : valorFormMode === "create"
                ? "Crear"
                : "Guardar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* ═══════════ Dialog: Confirmar eliminación ═══════════ */}
      <Dialog
        open={deleteDialogOpen}
        onClose={handleCloseDelete}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle sx={{ pb: 1 }}>Confirmar eliminación</DialogTitle>
        <DialogContent>
          <Typography>
            ¿Está seguro de eliminar el {deleteTarget?.type}{" "}
            <strong>&quot;{deleteTarget?.label}&quot;</strong>?
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
            Esta acción no se puede deshacer.
          </Typography>
        </DialogContent>
        <DialogActions sx={{ p: 2, pt: 1 }}>
          <Button onClick={handleCloseDelete} variant="outlined">
            Cancelar
          </Button>
          <Button
            variant="contained"
            color="error"
            onClick={handleConfirmDelete}
            disabled={deleteAtributoMut.isPending || deleteValorMut.isPending}
          >
            {deleteAtributoMut.isPending || deleteValorMut.isPending
              ? "Eliminando..."
              : "Eliminar"}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}