import { useState } from "react";
import "./PosCatalog.css";

import scan1 from "../../assets/images/I-1915.jpg";
import scan2 from "../../assets/images/IMPRE1.jpg";
import scan3 from "../../assets/images/gaveta1.jpg";
import scan4 from "../../assets/images/generadora1.jpg";

const products = [
  {
    id: 1,
    name: "Lector “I-1915”",
    category: "Lector de barras",
    brand: "Imlegamo",
    system: "Windows",
    img: scan1,
    desc: "El lector de códigos de barras I-1915 es la herramienta indispensable para optimizar tus operaciones.",
    specs: [
      "Lea el código de barras sobre pantallas de celulares.",
      "Nuevo chip decodificador para interpretar varios códigos 1D.",
      "Lee códigos de barras unidimensionales con arrugas, rayones.",
      "Con una velocidad de lectura de 350 lecturas por segundo"
    ]
  },
  {
    id: 2,
    name: "Impresora Térmica POS-805L",
    category: "Impresoras",
    brand: "Xprinter",
    system: "Universal",
    img: scan2,
    desc: "Impresión rápida y confiable.",
    specs: [
      "Corte automático",
      "USB / Ethernet",
      "ESC/POS"
    ]
  },
  {
    id: 3,
    name: "Gaveta de dinero CS 410G",
    category: "Gavetas",
    brand: "CBX",
    system: "Universal",
    img: scan3,
    desc: "Moderna gaveta de dinero de metal, proporcionando una mayor seguridad y durabilidad.",
    specs: [
      "Peso: 8Kgs Aprox.",
      "Comunicación: RJ 11P.",
      "Clips de metal para sujetar los billetes.",
      "5 compartimientos de billetes removibles.",
      "8 compartimientos de monedas removible.",
      "Frente de metal (acero inoxidable) para una maxima protección.",
      "Dimensiones: 410W * 412L * 100H mm",
      "USB"
    ]
  },
    {
    id: 4,
    name: "Generadora de etiquetas T40",
    category: "Generadora",
    brand: "CBX",
    system: "Universal",
    img: scan4,
    desc: "La T40 es una impresora de etiquetas de escritorio confiable y eficiente.",
    specs: [
      "Impresión de hasta 6ips (203dpi) | 5ips (300 dpi).",
      "Exclusivos sensores de detección de espacio, cabezal abierto y marca negra (posición ajustable).",
      "Soporte para simulación ZPL, EPL y TSPL.",
      "Rendimiento confiable que asegura continuidad y productividad en cada operación."
    ]
  },
    {
    id: 5,
    name: "Lector Código Barras",
    category: "Scanners",
    brand: "Zebra",
    system: "Universal",
    price: 320,
    img: scan1,
    desc: "Lectura 1D y 2D.",
    specs: [
      "Alta velocidad",
      "Plug & Play",
      "USB"
    ]
  }
];

export default function PosCatalog() {
  const [filters, setFilters] = useState([]);
  const [cart, setCart] = useState([]);
  const [selected, setSelected] = useState(null);
  const [cartOpen, setCartOpen] = useState(false);

  const toggleFilter = (value) => {
    setFilters(prev =>
      prev.includes(value)
        ? prev.filter(f => f !== value)
        : [...prev, value]
    );
  };

  const filteredProducts =
    filters.length === 0
      ? products
      : products.filter(p =>
          filters.includes(p.category) ||
          filters.includes(p.brand) ||
          filters.includes(p.system)
        );

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const removeFromCart = (index) => {
    const newCart = [...cart];
    newCart.splice(index, 1);
    setCart(newCart);
  };

  const handleCotizar = () => {
    if (cart.length === 0) return;

    let mensaje = "Hola! Quiero cotizar los siguientes productos:\n\n";
    cart.forEach((p, i) => {
      mensaje += `${i + 1}. ${p.name} - S/ ${p.price}\n`;
    });
    mensaje += `\nTotal: S/ ${cart.reduce((a, b) => a + b.price, 0)}`;

    // Reemplaza con tu número de WhatsApp
    const numero = "51960616089";
    const url = `https://wa.me/${numero}?text=${encodeURIComponent(mensaje)}`;
    window.open(url, "_blank");
  };

  return (
    <section className="pos-section">

      {/* CARRITO FLOTANTE */}
      <div
        className={`cart-float ${cart.length ? "active" : ""}`}
        onClick={() => setCartOpen(true)}
      >
        🛒 <span>{cart.length}</span>
      </div>

      <h2 className="pos-title">Equipos para Punto de Venta</h2>

      <div className="catalog-layout">

        {/* FILTROS */}
        <aside className="filters">
          <h4>Categorías</h4>
          {["Impresoras Térmica de Tickets", "Lector de barras", "Monitor", "Gavetas", "All in One", "Impresora de Código de Barras", "Kioscos de Autoservicio"].map(f => (
            <label key={f} className="check">
              <input
                type="checkbox"
                checked={filters.includes(f)}
                onChange={() => toggleFilter(f)}
              />
              <span></span> {f}
            </label>
          ))}

          <h4>Marca</h4>
          {["iMin", "Xprinter", "Zebra"].map(f => (
            <label key={f} className="check">
              <input
                type="checkbox"
                checked={filters.includes(f)}
                onChange={() => toggleFilter(f)}
              />
              <span></span> {f}
            </label>
          ))}

          <h4>Sistema</h4>
          {["Windows", "Android", "Universal"].map(f => (
            <label key={f} className="check">
              <input
                type="checkbox"
                checked={filters.includes(f)}
                onChange={() => toggleFilter(f)}
              />
              <span></span> {f}
            </label>
          ))}
        </aside>

        {/* PRODUCTOS */}
        <div className="pos-grid">
          {filteredProducts.map(p => (
            <div className="pos-card" key={p.id}>
              <div className="img-box">
                <img src={p.img} alt={p.name} />
              </div>

              <h3>{p.name}</h3>
              <p className="desc">{p.desc}</p>
              

              <div className="actions">
                <button
                  className="btn-outline"
                  onClick={() => setSelected(p)}
                >
                  Ver detalle
                </button>
                <button
                  className="btn-primary"
                  onClick={() => addToCart(p)}
                >
                  🛒 Agregar
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* MODAL DETALLE */}
      {selected && (
        <div className="modal-bg" onClick={() => setSelected(null)}>
          <div className="modal-card" onClick={e => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setSelected(null)}>✕</button>

            <img src={selected.img} alt={selected.name} />
            <h3>{selected.name}</h3>
            <p>{selected.desc}</p>

            <ul>
              {selected.specs.map((s, i) => (
                <li key={i}>✔ {s}</li>
              ))}
            </ul>

            <button
              className="btn-primary"
              onClick={() => {
                addToCart(selected);
                setSelected(null);
              }}
            >
              Agregar al carrito
            </button>
          </div>
        </div>
      )}

      {/* MODAL CARRITO */}
      {cartOpen && (
        <div className="modal-bg" onClick={() => setCartOpen(false)}>
          <div className="modal-card" onClick={e => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setCartOpen(false)}>✕</button>

            <h3>Mi Carrito</h3>

            {cart.length === 0 ? (
              <p>El carrito está vacío.</p>
            ) : (
              <div className="cart-items">
                {cart.map((p, i) => (
                  <div key={i} className="cart-item">
                    <span>{p.name}</span>
                    <button className="remove-btn" onClick={() => removeFromCart(i)}>✕</button>
                  </div>
                ))}

                <button className="btn-primary" onClick={handleCotizar}>
                  Cotizar por WhatsApp
                </button>
              </div>
            )}
          </div>
        </div>
      )}

    </section>
  );
}
