import { Icon } from "@iconify/react";
import { Alert, Box, CircularProgress, Stack, Typography } from "@mui/material";
import { useEffect, useMemo, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { PrereqChecklist, ScreenGuia } from "../../_standards";
import { useAuthStore } from "../../../store/AuthStore";
import { usePermission } from "../../../hooks/usePermission";
import { BusquedaEnCursoCard } from "./BusquedaEnCursoCard";
import { NuevaBusquedaCard } from "./NuevaBusquedaCard";
import { RevisionSugerencias } from "./RevisionSugerencias";
import { useBusquedasImagenes, useEstadoImagenesIa } from "./useImagenesIa";

/**
 * Tab "Imágenes IA" de Inventario (submódulo addon INV_IMAGENES_IA).
 * Busca imágenes de referencia en internet, las filtra con IA y las deja como
 * sugerencias: nada se publica hasta que una persona aprueba.
 */
export function ImagenesIaTab() {
  const navigate = useNavigate();
  const location = useLocation();
  const hasModule = useAuthStore((s) => s.hasModule);
  const { can } = usePermission("INVENTARIO");
  const puedeCrear = can("INV_IMG_BUSQUEDA_CREAR");
  const puedeAprobar = can("INV_IMG_SUGERENCIA_APROBAR");

  // Ids que llegan desde la barra de acciones masivas de Productos.
  const seleccionIds = useMemo(() => location.state?.producto_ids ?? [], [location.state]);

  const { data: estado, isLoading } = useEstadoImagenesIa();
  const { data: historial } = useBusquedasImagenes({ page: 1, limit: 5 });
  const guiaRef = useRef(null);

  const activa = estado?.busqueda_activa ?? null;
  const ultima = historial?.items?.[0] ?? null;
  const [seguirId, setSeguirId] = useState(null);
  useEffect(() => {
    setSeguirId(activa?.id ?? ultima?.id ?? null);
  }, [activa?.id, ultima?.id]);

  // Al terminar una búsqueda, "Revisar" baja a la lista mostrando solo lo que trajo
  // esa búsqueda (si no, se mezcla con lo pendiente de búsquedas anteriores).
  const [filtroBusqueda, setFiltroBusqueda] = useState(null);
  const irARevisar = (busquedaId) => {
    setFiltroBusqueda(busquedaId ?? null);
    requestAnimationFrame(() => document.getElementById("imagenes-ia-revision")?.scrollIntoView({ behavior: "smooth" }));
  };

  const bloqueo = !estado
    ? null
    : !estado.busqueda_disponible
      ? "La búsqueda de imágenes no está habilitada en esta instalación. Avisale al soporte para que configure el buscador."
      : !estado.ia_configurada
        ? "Falta configurar la IA de la empresa (Configuración → IA)."
        : activa
          ? "Ya hay una búsqueda en curso. Esperá a que termine o cancelala."
          : null;

  const prereqs = [
    {
      key: "ia",
      label: "IA configurada para la empresa",
      ok: !!estado?.ia_configurada,
      hint: estado?.ia_configurada ? `${estado.proveedor} · ${estado.modelo}` : "Configuración → IA",
      ctaLabel: "Ir a Configuración",
      onGoTo: () => navigate("/configuracion?tab=ia"),
    },
    {
      key: "buscador",
      label: "Buscador de imágenes disponible",
      ok: !!estado?.busqueda_disponible,
      hint: estado?.busqueda_disponible ? undefined : "Lo habilita el soporte en el servidor",
    },
    {
      key: "permiso",
      label: "Permiso para lanzar búsquedas",
      ok: puedeCrear,
      hint: puedeCrear ? undefined : "Pedí el privilegio INV_IMG_BUSQUEDA_CREAR",
    },
    {
      key: "tienda",
      label: "Tienda online activa (opcional)",
      ok: hasModule("ECOMMERCE"),
      hint: hasModule("ECOMMERCE") ? undefined : "Sin tienda igual sirve: las imágenes quedan en la ficha del producto",
    },
  ];

  return (
    <Stack spacing={1.5}>
      <ScreenGuia
        ref={guiaRef}
        id="imagenes-ia-guia"
        moduloPadre="Inventario"
        titulo="Imágenes de productos con IA"
        intro="Busca en internet imágenes de referencia de tus productos, las filtra con IA y te las deja como sugerencias para aprobar."
        pasos={[
          { icon: "mdi:selection-search", color: "#0ea5e9", titulo: "1. Elegí el alcance", desc: "Los productos que seleccionaste en la lista o todo el catálogo. Por defecto solo se buscan imágenes para los productos que no tienen ninguna." },
          { icon: "mdi:robot-outline", color: "#8b5cf6", titulo: "2. La IA busca y filtra", desc: "Descarta lo que no es el mismo producto, lo que no tiene fondo blanco y lo que tiene marca de agua de otra tienda. Deja hasta 5 candidatas por producto." },
          { icon: "mdi:image-check-outline", color: "#22c55e", titulo: "3. Vos aprobás", desc: "Revisás las candidatas y aprobás las que sirven. Al aprobar, la imagen pasa a ser imagen del producto." },
        ]}
        notas={[
          { icon: "mdi:shield-alert-outline", text: "Son imágenes de referencia de terceros (fabricantes, distribuidores). Vos decidís qué publicás en tu tienda." },
          { icon: "mdi:eye-off-outline", text: "Nada se muestra en la tienda ni en la ficha del producto hasta que lo aprobás." },
          { icon: "mdi:currency-usd", text: "Cada búsqueda consume tokens de IA y consultas del buscador: antes de lanzarla te mostramos la estimación." },
          { icon: "mdi:image-multiple-outline", text: "Un producto admite hasta 5 imágenes. La primera que apruebes queda como principal." },
        ]}
      />

      <PrereqChecklist items={prereqs} />

      {isLoading ? (
        <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
          <CircularProgress size={28} />
        </Box>
      ) : (
        <>
          <NuevaBusquedaCard seleccionIds={seleccionIds} puedeCrear={puedeCrear} bloqueo={bloqueo} />

          {seguirId && (
            <BusquedaEnCursoCard busquedaId={seguirId} puedeCrear={puedeCrear} onRevisar={irARevisar} />
          )}

          <Box id="imagenes-ia-revision">
            <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
              <Icon icon="mdi:image-check-outline" width={20} />
              <Typography variant="subtitle2" fontWeight={600}>
                Revisar sugerencias
              </Typography>
            </Box>
            {!puedeAprobar && (
              <Alert severity="info" sx={{ mb: 1 }}>
                Podés ver las sugerencias, pero no tenés permiso para aprobarlas ni rechazarlas.
              </Alert>
            )}
            <RevisionSugerencias
              puedeAprobar={puedeAprobar}
              busquedaId={filtroBusqueda}
              onQuitarFiltroBusqueda={() => setFiltroBusqueda(null)}
              onNuevaBusqueda={() => document.getElementById("imagenes-ia-guia")?.scrollIntoView({ behavior: "smooth" })}
            />
          </Box>
        </>
      )}
    </Stack>
  );
}