import { useMemo, useState } from "react";
import styled from "styled-components";
import { Device } from "../../styles/breakpoints";
import { blur_in } from "../../styles/keyframes";
import { PantallaCierreCaja } from "../organismos/POSDesign/CajaDesign/PantallaCierreCaja";
import { PantallaIngresoSalidaDinero } from "../organismos/POSDesign/CajaDesign/PantallaIngresoSalidaDinero";
import { CartPanel } from "../organismos/POSDesign/CartPanel";
import { CategoryBar } from "../organismos/POSDesign/CategoryBar";
import { FooterPos } from "../organismos/POSDesign/FooterPos";
import { HeaderPos } from "../organismos/POSDesign/HeaderPos";
import { MenuFlotante } from "../organismos/POSDesign/MenuFlotante";
import { PantallaCobro } from "../organismos/POSDesign/PantallaCobro";
import { ProductGrid } from "../organismos/POSDesign/ProductGrid";
import { SelectAlmacenModal } from "../organismos/POSDesign/SelectAlmacenModal";

import { UserAuth } from "../../context/AuthContent";
import { useCierreCajaStore } from "../../store/CierreCajaStore";
import { useDetalleVentasStore } from "../../store/DetalleVentasStore";
import { useProductosStore } from "../../store/ProductosStore";
import { useStockStore } from "../../store/StockStore";
import { useVentasStore } from "../../store/VentasStore";
import { useMostrarAlmacenesXSucursalQuery } from "../../tanstack/AlmacenesStack";
import { useMostrarAperturasCajaPorUsuarioQuery } from "../../tanstack/CierresCajaStack";
import { useMostrasrImpresorasPorCajaQuery } from "../../tanstack/ImpresorasStack";
import { usePosConfigQuery } from "../../tanstack/PosConfigStack";
import { useBuscarProductosQuery } from "../../tanstack/ProductosStack";
import { useMostrarSerializacionesVentasQuery } from "../../tanstack/SerializacionStack";

const DEFAULT_CONFIG = {
  fullscreen: true,
  layout: "grid",
  show_product_image: true,
  show_product_price: true,
  show_product_stock: false,
  card_size: "medium",
  categories_position: "top",
  numpad_position: "right",
  enable_quick_sale: true,
  default_view: "products",
};

export function POSTemplateDynamic() {
  const { user } = UserAuth();

  const { data: dataCajaAbierta } = useMostrarAperturasCajaPorUsuarioQuery();
  const { data: posConfig } = usePosConfigQuery(dataCajaAbierta?.caja_id);
  const config = { ...DEFAULT_CONFIG, ...posConfig };
  const { statePantallaCobro, setStatePantallaCobro } = useVentasStore();
  const { stateIngresoSalida, stateCierreCaja } = useCierreCajaStore();
  const { stateModal } = useStockStore();
  const { dataProductos } = useProductosStore();
  const { datadetalleventa } = useDetalleVentasStore();

  const [categoriaActiva, setCategoriaActiva] = useState(null);
  const [searchTerm] = useState("");

  // Queries
  useBuscarProductosQuery();
  useMostrarAlmacenesXSucursalQuery();
  useMostrarSerializacionesVentasQuery();
  useMostrasrImpresorasPorCajaQuery();

  // Extraer categorías únicas de productos
  const categorias = useMemo(() => {
    if (!dataProductos?.length) return [];
    const cats = new Map();
    dataProductos.forEach((p) => {
      if (p.categoria_id && p.categoria) {
        cats.set(p.categoria_id, {
          id: p.categoria_id,
          nombre: p.categoria?.nombre || p.categoria,
          color: p.categoria?.color,
        });
      }
    });
    return Array.from(cats.values());
  }, [dataProductos]);

  // Filtrar productos
  const productosFiltrados = useMemo(() => {
    let productos = dataProductos || [];

    if (categoriaActiva) {
      productos = productos.filter(
        (p) => p.categoria_id === categoriaActiva.id,
      );
    }

    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      productos = productos.filter(
        (p) =>
          p.descripcion?.toLowerCase().includes(term) ||
          p.codigo?.toLowerCase().includes(term),
      );
    }

    return productos;
  }, [dataProductos, categoriaActiva, searchTerm]);

  const handleProductClick = (producto) => {
    // TODO: Agregar producto al carrito via API
    console.log("Producto seleccionado:", producto);
  };

  const handleCheckout = () => {
    setStatePantallaCobro({ data: datadetalleventa, tipocobro: "efectivo" });
  };

  return (
    <Container $fullscreen={config.fullscreen}>
      {stateModal && <SelectAlmacenModal />}
      {statePantallaCobro && <PantallaCobro />}

      <HeaderPos />

      <MainContent $categoriesPosition={config.categories_position}>

        {/* Categorías - posición izquierda */}
        {config.categories_position === "left" && (
          <CategoryBar
            categorias={categorias}
            categoriaActiva={categoriaActiva}
            onCategoriaClick={setCategoriaActiva}
            position="left"
          />
        )}

        <ProductArea>
          {/* Categorías - posición arriba */}
          {config.categories_position === "top" && (
            <CategoryBar
              categorias={categorias}
              categoriaActiva={categoriaActiva}
              onCategoriaClick={setCategoriaActiva}
              position="top"
            />
          )}

          {/* Grid de productos */}
          <ProductGrid
            productos={productosFiltrados}
            onProductClick={handleProductClick}
            cardSize={config.card_size}
            showImage={config.show_product_image}
            showPrice={config.show_product_price}
            showStock={config.show_product_stock}
            layout={config.layout}
          />
        </ProductArea>

        {/* Panel de carrito */}
        {config.numpad_position === "right" && (
          <CartPanel onCheckout={handleCheckout} />
        )}
      </MainContent>

      {/* Carrito en posición inferior */}
      {config.numpad_position === "bottom" && (
        <BottomCart>
          <CartPanel onCheckout={handleCheckout} />
        </BottomCart>
      )}

      <FooterPos />
      <MenuFlotante />
      {stateIngresoSalida && <PantallaIngresoSalidaDinero />}
      {stateCierreCaja && <PantallaCierreCaja />}
    </Container>
  );
}

const Container = styled.div`
  height: ${({ $fullscreen }) =>
    $fullscreen ? "100vh" : "calc(100vh - 60px)"};
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: ${blur_in} 0.5s linear both;
  overflow: hidden;
`;

const MainContent = styled.div`
  flex: 1;
  display: flex;
  gap: 16px;
  overflow: hidden;
  flex-direction: ${({ $categoriesPosition }) =>
    $categoriesPosition === "left" ? "row" : "column"};

  @media ${Device.desktop} {
    flex-direction: row;
  }
`;

const ProductArea = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: ${({ theme }) => theme.bg2 || "#1a1a1a"};
  border-radius: 16px;
  border: 1px solid ${({ theme }) => theme.color2 || "#333"};
`;

const BottomCart = styled.div`
  height: 200px;

  @media ${Device.desktop} {
    display: none;
  }
`;