import { Icon } from "@iconify/react";
import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Skeleton,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useMemo, useState } from "react";
import styled from "styled-components";
import { toast } from "sonner";
import { usePermission } from "../../hooks/usePermission";
import {
  useCreateMarcaMutation,
  useDeleteMarcaMutation,
  useMarcasQuery,
  useToggleMarcaMutation,
  useUpdateMarcaMutation,
} from "../../tanstack/MarcasStack";
import { getErrorApi } from "../../utils/errorUtils";
import { AccesoRestringido } from "../common/AccesoRestringido";
import { EmptyState, ScreenGuia } from "../_standards";

const GUIA_PASOS = [
  {
    icon: "lucide:tag",
    color: "#3b82f6",
    titulo: "1. Registrá tus marcas",
    desc: "Las marcas identifican al fabricante o sello del producto (Samsung, LG, etc.).",
  },
  {
    icon: "lucide:link",
    color: "#f59e0b",
    titulo: "2. Asocialas a productos",
    desc: "Desde la ficha del producto seleccionás la marca para mejorar reportes y filtros.",
  },
  {
    icon: "lucide:filter",
    color: "#22c55e",
    titulo: "3. Filtrá y reportá",
    desc: "Las marcas habilitan filtros en el listado de productos y reportes de ventas.",
  },
];

// ── Styled ────────────────────────────────────────────────────────
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
`;
const SectionBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  .title-block {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    .title { font-size: 1.05rem; font-weight: 700; color: ${(p) => p.theme.text}; line-height: 1.2; }
    .subtitle { font-size: 0.78rem; color: ${(p) => p.theme.textSecondary}; }
  }
`;
const PrimaryBtn = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: ${(p) => p.theme.primary};
  color: #fff;
  white-space: nowrap;
  &:hover { opacity: 0.88; }
`;
const Toolbar = styled.div`
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
`;
const SearchWrap = styled.div`
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  max-width: 360px;
  min-width: 220px;
  svg { position: absolute; left: 0.55rem; opacity: 0.5; pointer-events: none; }
  input {
    background: ${(p) => p.theme.inputBg};
    border: 1px solid ${(p) => p.theme.inputBorder};
    border-radius: 8px;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    color: ${(p) => p.theme.text};
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    font-family: inherit;
    &:focus { border-color: ${(p) => p.theme.primary}; }
  }
`;
const ListBox = styled.div`
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 12px;
  background: ${(p) => p.theme.bg};
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
`;
const Row = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid ${(p) => p.theme.borderColor};
  background: ${(p) => p.theme.inputBg};
  transition: background 0.12s, border-color 0.12s;
  opacity: ${(p) => (p.$inactive ? 0.55 : 1)};
  &:hover { border-color: ${(p) => p.theme.primary}55; }
`;
const Avatar = styled.div`
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: ${(p) => p.theme.primary}18;
  color: ${(p) => p.theme.primary};
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.95rem;
`;
const RowInfo = styled.div`
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  .name { font-size: 0.92rem; font-weight: 600; color: ${(p) => p.theme.text}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .code { font-size: 0.72rem; color: ${(p) => p.theme.textSecondary}; }
`;
const Badge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  color: ${(p) => p.$color};
  background: ${(p) => p.$color}14;
  border: 1px solid ${(p) => p.$color}30;
  white-space: nowrap;
`;
const ActionIcon = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: ${(p) => p.$color || p.theme.textSecondary};
  font-size: 1.05rem;
  &:hover { background: ${(p) => p.theme.bgAlpha}; }
  &:disabled { opacity: 0.35; cursor: not-allowed; }
`;

const initials = (s) => {
  const t = (s || "").trim();
  if (!t) return "?";
  const parts = t.split(/\s+/);
  return ((parts[0]?.[0] || "") + (parts[1]?.[0] || "")).toUpperCase() || t[0].toUpperCase();
};

export function MarcasTab() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const { can } = usePermission("INVENTARIO");
  const canRead = can("INV_MAR_MARCA_VER");
  const canCreate = can("INV_MAR_MARCA_CREAR");
  const canEdit = can("INV_MAR_MARCA_EDITAR");
  const canDelete = can("INV_MAR_MARCA_ELIMINAR");

  const [formDialogOpen, setFormDialogOpen] = useState(false);
  const [formMode, setFormMode] = useState("create");
  const [selectedMarca, setSelectedMarca] = useState(null);
  const [formData, setFormData] = useState({ codigo: "", descripcion: "" });
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [marcaToDelete, setMarcaToDelete] = useState(null);
  const [busqueda, setBusqueda] = useState("");

  const { data: marcas = [], isLoading, error: marcasError } = useMarcasQuery();

  const marcasFiltradas = useMemo(() => {
    const q = busqueda.trim().toLowerCase();
    if (!q) return marcas;
    return marcas.filter(
      (m) =>
        m.descripcion?.toLowerCase().includes(q) ||
        m.codigo?.toLowerCase().includes(q),
    );
  }, [marcas, busqueda]);

  const errorModulo = getErrorApi(marcasError);

  const createMutation = useCreateMarcaMutation();
  const updateMutation = useUpdateMarcaMutation();
  const toggleMutation = useToggleMarcaMutation();
  const deleteMutation = useDeleteMarcaMutation();

  const handleOpenCreate = () => {
    setFormMode("create");
    setSelectedMarca(null);
    setFormData({ codigo: "", descripcion: "" });
    setFormDialogOpen(true);
  };

  const handleOpenEdit = (marca) => {
    setFormMode("edit");
    setSelectedMarca(marca);
    setFormData({ codigo: marca.codigo || "", descripcion: marca.descripcion || "" });
    setFormDialogOpen(true);
  };

  const handleCloseForm = () => {
    setFormDialogOpen(false);
    setSelectedMarca(null);
  };

  const handleSubmit = () => {
    if (!formData.descripcion.trim()) {
      toast.error("La descripción es requerida");
      return;
    }
    if (formMode === "create") {
      createMutation.mutate(formData, { onSuccess: () => handleCloseForm() });
    } else {
      updateMutation.mutate(
        { id: selectedMarca.id, data: formData },
        { onSuccess: () => handleCloseForm() },
      );
    }
  };

  const handleOpenDelete = (marca) => {
    setMarcaToDelete(marca);
    setDeleteDialogOpen(true);
  };

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

  const handleConfirmDelete = () => {
    if (marcaToDelete) {
      deleteMutation.mutate(marcaToDelete.id, { onSuccess: () => handleCloseDelete() });
    }
  };

  if (!canRead) {
    return <AccesoRestringido mensaje="No tienes permisos para ver las marcas." />;
  }
  if (errorModulo) {
    return <AccesoRestringido titulo="Módulo no disponible" mensaje={errorModulo} />;
  }

  const total = marcas.length;
  const visibles = marcasFiltradas.length;

  return (
    <Wrapper>
      <ScreenGuia
        titulo="¿Cómo funcionan las Marcas?"
        intro="Las marcas son sellos o fabricantes que asignás a tus productos para filtrar y reportar mejor."
        pasos={GUIA_PASOS}
      />

      <SectionBar>
        <div className="title-block">
          <Icon icon="lucide:tag" width={22} />
          <div>
            <div className="title">Marcas</div>
            <div className="subtitle">
              {busqueda
                ? `${visibles} resultado${visibles === 1 ? "" : "s"} de ${total}`
                : `${total} marca${total === 1 ? "" : "s"} registrada${total === 1 ? "" : "s"}`}
            </div>
          </div>
        </div>
        {canCreate && (
          <PrimaryBtn onClick={handleOpenCreate}>
            <Icon icon="lucide:plus" /> Nueva Marca
          </PrimaryBtn>
        )}
      </SectionBar>

      <Toolbar>
        <SearchWrap>
          <Icon icon="lucide:search" width={16} />
          <input
            placeholder="Buscar por código o descripción..."
            value={busqueda}
            onChange={(e) => setBusqueda(e.target.value)}
          />
        </SearchWrap>
      </Toolbar>

      {isLoading ? (
        <ListBox>
          {[...Array(5)].map((_, i) => (
            <Skeleton key={i} variant="rectangular" height={56} sx={{ borderRadius: 1.5 }} />
          ))}
        </ListBox>
      ) : marcasFiltradas.length === 0 ? (
        busqueda ? (
          <EmptyState
            icon="lucide:search-x"
            title="Sin coincidencias"
            description={`Ninguna marca coincide con "${busqueda}".`}
          />
        ) : (
          <EmptyState
            icon="lucide:tag"
            title="Aún no hay marcas"
            description="Creá tu primera marca para empezar a clasificar productos."
            ctaLabel={canCreate ? "Nueva Marca" : undefined}
            ctaIcon="lucide:plus"
            onCta={canCreate ? handleOpenCreate : undefined}
          />
        )
      ) : (
        <ListBox>
          {marcasFiltradas.map((marca) => (
            <Row key={marca.id} $inactive={!marca.active}>
              <Avatar>{initials(marca.descripcion)}</Avatar>
              <RowInfo>
                <span className="name">{marca.descripcion}</span>
                <span className="code">{marca.codigo || "Sin código"}</span>
              </RowInfo>
              <Badge $color={marca.active ? "#22c55e" : "#94a3b8"}>
                <Icon icon={marca.active ? "lucide:check-circle" : "lucide:circle-off"} style={{ fontSize: "0.7rem" }} />
                {marca.active ? "Activo" : "Inactivo"}
              </Badge>
              <Box sx={{ display: "flex", gap: 0.25 }}>
                {canEdit && (
                  <ActionIcon $color="#f59e0b" title="Editar" onClick={() => handleOpenEdit(marca)}>
                    <Icon icon="lucide:edit-3" />
                  </ActionIcon>
                )}
                {canDelete && (
                  <ActionIcon
                    $color={marca.active ? "#94a3b8" : "#22c55e"}
                    title={marca.active ? "Desactivar" : "Activar"}
                    onClick={() => toggleMutation.mutate(marca.id)}
                  >
                    <Icon icon="lucide:power" />
                  </ActionIcon>
                )}
                {canDelete && (
                  <ActionIcon $color="#ef4444" title="Eliminar" onClick={() => handleOpenDelete(marca)}>
                    <Icon icon="lucide:trash-2" />
                  </ActionIcon>
                )}
              </Box>
            </Row>
          ))}
        </ListBox>
      )}

      {/* Dialog crear/editar */}
      <Dialog
        open={formDialogOpen}
        onClose={handleCloseForm}
        maxWidth="xs"
        fullWidth
        fullScreen={isMobile}
        PaperProps={{ sx: { borderRadius: 2 } }}
      >
        <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
          <Box
            sx={{
              width: "2.2rem", height: "2.2rem", borderRadius: "10px",
              bgcolor: "action.hover", display: "flex", alignItems: "center", justifyContent: "center",
              color: "primary.main", flexShrink: 0,
            }}
          >
            <Icon icon={formMode === "create" ? "lucide:tag" : "lucide:edit-3"} width={20} />
          </Box>
          <Box sx={{ flex: 1, minWidth: 0 }}>
            <Typography variant="subtitle1" fontWeight={700} lineHeight={1.2}>
              {formMode === "create" ? "Nueva Marca" : "Editar Marca"}
            </Typography>
            <Typography variant="caption" color="text.secondary">
              {formMode === "create" ? "Registrá un nuevo fabricante o sello" : selectedMarca?.descripcion}
            </Typography>
          </Box>
          <IconButton onClick={handleCloseForm} size="small">
            <Icon icon="lucide:x" width={18} />
          </IconButton>
        </DialogTitle>
        <DialogContent dividers>
          <Box sx={{ display: "flex", flexDirection: "column", gap: 2, pt: 1 }}>
            <TextField
              fullWidth
              size="small"
              label="Código"
              value={formData.codigo}
              onChange={(e) => setFormData({ ...formData, codigo: e.target.value })}
              placeholder="Ej: SAMSUNG"
              inputProps={{ maxLength: 20 }}
              helperText="Identificador corto opcional. Útil para búsquedas rápidas."
            />
            <TextField
              fullWidth
              size="small"
              label="Descripción *"
              value={formData.descripcion}
              onChange={(e) => setFormData({ ...formData, descripcion: e.target.value })}
              placeholder="Ej: Samsung Electronics"
              autoFocus
              inputProps={{ maxLength: 100 }}
            />
          </Box>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={handleCloseForm} startIcon={<Icon icon="lucide:x" width={16} />}>
            Cancelar
          </Button>
          <Button
            variant="contained"
            onClick={handleSubmit}
            disabled={createMutation.isPending || updateMutation.isPending}
            startIcon={<Icon icon={formMode === "create" ? "lucide:plus" : "lucide:save"} width={16} />}
          >
            {createMutation.isPending || updateMutation.isPending
              ? "Guardando..."
              : formMode === "create" ? "Crear" : "Guardar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Confirmación eliminar */}
      <Dialog
        open={deleteDialogOpen}
        onClose={handleCloseDelete}
        maxWidth="xs"
        fullWidth
        PaperProps={{ sx: { borderRadius: 2 } }}
      >
        <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
          <Box
            sx={{
              width: "2.2rem", height: "2.2rem", borderRadius: "10px",
              bgcolor: "error.lighter", display: "flex", alignItems: "center", justifyContent: "center",
              color: "error.main", flexShrink: 0,
            }}
          >
            <Icon icon="lucide:trash-2" width={20} />
          </Box>
          <Typography variant="subtitle1" fontWeight={700}>Confirmar eliminación</Typography>
        </DialogTitle>
        <DialogContent dividers>
          <Typography>
            ¿Está seguro de eliminar la marca{" "}
            <strong>&quot;{marcaToDelete?.descripcion}&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 }}>
          <Button onClick={handleCloseDelete} startIcon={<Icon icon="lucide:x" width={16} />}>
            Cancelar
          </Button>
          <Button
            variant="contained"
            color="error"
            onClick={handleConfirmDelete}
            disabled={deleteMutation.isPending}
            startIcon={<Icon icon="lucide:trash-2" width={16} />}
          >
            {deleteMutation.isPending ? "Eliminando..." : "Eliminar"}
          </Button>
        </DialogActions>
      </Dialog>
    </Wrapper>
  );
}