import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { PantallaAperturaCaja } from "../components/organismos/POSDesign/CajaDesign/PantallaAperturaCaja";
import { POSAdminTemplate } from "../components/templates/POSAdminTemplate";
import { POSRetailTemplate } from "../components/templates/POSRetailTemplate";
import { UserAuth } from "../context/AuthContent";
import { Layout, SpinnerSecundario } from "../index";
import { getCachedCajaSession } from "../offline/db";
import { useMostrarAperturasCajaPorUsuarioQuery } from "../tanstack/CierresCajaStack";
import { usePosConfigQuery } from "../tanstack/PosConfigStack";

export function POSAdmin() {
  const { user } = UserAuth();
  const location = useLocation();
  const {
    data: dataCajaAbierta,
    isLoading,
    error,
  } = useMostrarAperturasCajaPorUsuarioQuery();

  // Fallback offline: restaurar sesión desde cache de IndexedDB
  const [cachedSesion, setCachedSesion] = useState(null);
  const [cacheChecked, setCacheChecked] = useState(false);

  useEffect(() => {
    // Solo intentar cache si la query falló (offline) o no hay datos
    if (!isLoading && (error || !dataCajaAbierta)) {
      getCachedCajaSession()
        .then((cached) => {
          const sesion = cached?.sesion?.id
            ? cached.sesion
            : cached?.sesion?.data?.id
              ? cached.sesion.data
              : null;
          if (sesion) {
            console.log(
              "POSAdmin: sesión restaurada desde cache offline:",
              sesion.id,
            );
            setCachedSesion(sesion);
          }
        })
        .catch((e) => console.warn("POSAdmin: error leyendo cache:", e))
        .finally(() => setCacheChecked(true));
    } else {
      setCacheChecked(true);
    }
  }, [isLoading, error, dataCajaAbierta]);

  // Usar datos de API o fallback de cache
  const sesionActiva = dataCajaAbierta || cachedSesion;

  // Obtener configuración del POS para la caja abierta
  const { data: posConfig, isLoading: loadingConfig } = usePosConfigQuery(
    sesionActiva?.caja_id,
  );

  if (isLoading || (!cacheChecked && !dataCajaAbierta)) {
    return <SpinnerSecundario texto="Verificando apertura de caja..." />;
  }

  // Si hay error pero tenemos cache, no mostrar error
  if (error && !sesionActiva) {
    // Si ya revisamos cache y no hay nada, mostrar apertura
    if (cacheChecked) {
      return <PantallaAperturaCaja />;
    }
    return <SpinnerSecundario texto="Verificando apertura de caja..." />;
  }

  // Si no hay caja abierta (ni API ni cache), mostrar pantalla de apertura
  if (!sesionActiva) {
    return <PantallaAperturaCaja />;
  }

  // Esperar config solo si estamos online (no cache fallback) y cargando
  if (loadingConfig && !error && !cachedSesion) {
    return <SpinnerSecundario texto="Cargando configuración..." />;
  }

  // Seleccionar template según configuración
  const tipoPOS = posConfig?.tipo_pos || "retail";

  // Retail → fullscreen (sin sidebar)
  if (tipoPOS === "retail") {
    return <POSRetailTemplate />;
  }

  // Admin → con sidebar si estamos en /pos (ruta sin Layout),
  // sin wrappear si ya estamos dentro de /pos-admin (que tiene Layout en la ruta)
  const needsLayout = location.pathname === "/pos";

  if (needsLayout) {
    return (
      <Layout>
        <POSAdminTemplate />
      </Layout>
    );
  }

  return <POSAdminTemplate />;
}