"use client";

import Image from "next/image";
import { ChevronLeft, ChevronRight, Loader2, Package, Plus, Search, X } from "lucide-react";
import { formatMoney, formatMoneyInput } from "@/utils/formatters";
import type { CategoryRow, ProductRow } from "@/lib/pdv/carrinho";

/*
  A vitrine: onde se acha o produto.

  Busca em cima (leitor de código de barras cai aqui), categorias numa fita
  horizontal e a grade de produtos embaixo. O item livre — o que não está no
  catálogo — abre no rodapé, sem sair do lugar.
*/

const passthroughLoader = ({ src }: { src: string }) => src;

export function Vitrine({
  query,
  setQuery,
  searchInputRef,
  aoConfirmarBusca,
  categoryItems,
  selectedCategory,
  setSelectedCategory,
  categoryButtonRefs,
  loading,
  visibleProducts,
  totalFiltrado,
  safePage,
  totalPages,
  setCurrentPage,
  addProduct,
  showFreeItemForm,
  setShowFreeItemForm,
  freeItemName,
  setFreeItemName,
  freeItemPriceInput,
  setFreeItemPriceInput,
  addFreeItem,
  esgotado,
}: {
  query: string;
  setQuery: (valor: string) => void;
  searchInputRef: React.RefObject<HTMLInputElement | null>;
  aoConfirmarBusca: (valor: string) => void;
  categoryItems: CategoryRow[];
  selectedCategory: string;
  setSelectedCategory: (id: string) => void;
  categoryButtonRefs: React.RefObject<Record<string, HTMLButtonElement | null>>;
  loading: boolean;
  visibleProducts: ProductRow[];
  totalFiltrado: number;
  safePage: number;
  totalPages: number;
  setCurrentPage: (atualizar: (antes: number) => number) => void;
  addProduct: (produto: ProductRow) => void;
  showFreeItemForm: boolean;
  setShowFreeItemForm: (atualizar: (antes: boolean) => boolean) => void;
  freeItemName: string;
  setFreeItemName: (valor: string) => void;
  freeItemPriceInput: string;
  setFreeItemPriceInput: (valor: string) => void;
  addFreeItem: () => void;
  /* Estoque v2: produto que não cabe nem 1 (sem escolha). Continua clicável:
     o cupom diz o que falta e a venda não fecha sem estoque. */
  esgotado?: (id: string) => boolean;
}) {
  return (
    <section className="pdv-folha">
      <div className="pdv-busca">
        <Search size={17} />
        <input
          ref={searchInputRef}
          value={query}
          onChange={(evento) => setQuery(evento.target.value)}
          onKeyDown={(evento) => {
            if (evento.key === "Enter") {
              evento.preventDefault();
              aoConfirmarBusca(evento.currentTarget.value);
            }
          }}
          placeholder="Buscar produto, código ou ler o código de barras"
          autoComplete="off"
        />
        {query ? (
          <button type="button" className="ks-icon-button ks-icon-button-sm" onClick={() => setQuery("")} aria-label="Limpar busca">
            <X size={14} />
          </button>
        ) : (
          <kbd>F2</kbd>
        )}
      </div>

      <div className="pdv-categorias" role="tablist" aria-label="Categorias">
        {categoryItems.map((categoria) => {
          const ativa = selectedCategory === categoria.id;
          return (
            <button
              key={categoria.id}
              ref={(elemento) => {
                categoryButtonRefs.current[categoria.id] = elemento;
              }}
              type="button"
              role="tab"
              aria-selected={ativa}
              className={`pdv-categoria ${ativa ? "pdv-categoria-ativa" : ""}`}
              onClick={() => setSelectedCategory(categoria.id)}
            >
              {categoria.name}
            </button>
          );
        })}
      </div>

      <div className="pdv-produtos">
        {loading ? (
          <div className="pdv-produtos-vazio">
            <Loader2 size={18} className="pdv-girando mx-auto" />
          </div>
        ) : visibleProducts.length === 0 ? (
          <div className="pdv-produtos-vazio">
            {query ? `Nada com "${query}". Tente outro nome ou use um item livre.` : "Nenhum produto ativo nesta categoria."}
          </div>
        ) : (
          visibleProducts.map((produto) => (
            <button key={produto.id} type="button" className="pdv-produto" onClick={() => addProduct(produto)}>
              <div className="pdv-produto-foto">
                {produto.image_url ? (
                  <Image
                    src={produto.image_url}
                    alt={produto.name}
                    fill
                    sizes="200px"
                    loader={passthroughLoader}
                    unoptimized
                  />
                ) : (
                  <Package size={22} />
                )}
                {produto.product_kind === "digital" ? (
                  <span className="absolute bottom-1.5 left-1.5 rounded-full bg-slate-900/90 px-1.5 py-0.5 text-[10px] font-bold text-white">Digital</span>
                ) : null}
                {esgotado?.(produto.id) ? (
                  <span className="absolute right-1.5 top-1.5 rounded-full bg-rose-600 px-1.5 py-0.5 text-[10px] font-bold text-white">Esgotado</span>
                ) : null}
              </div>
              <div className="pdv-produto-nome">{produto.name}</div>
              <div className="pdv-produto-preco">{formatMoney(Number(produto.price ?? 0) || 0)}</div>
            </button>
          ))
        )}
      </div>

      {showFreeItemForm ? (
        <div className="pdv-item-livre">
          <input
            value={freeItemName}
            onChange={(evento) => setFreeItemName(evento.target.value)}
            placeholder="Nome do item livre"
            className="pdv-campo"
            autoFocus
            onKeyDown={(evento) => {
              if (evento.key === "Enter") {
                evento.preventDefault();
                addFreeItem();
              }
            }}
          />
          <input
            value={freeItemPriceInput}
            onChange={(evento) => setFreeItemPriceInput(formatMoneyInput(evento.target.value))}
            placeholder="Preço"
            className="pdv-campo pdv-campo-num"
            onKeyDown={(evento) => {
              if (evento.key === "Enter") {
                evento.preventDefault();
                addFreeItem();
              }
            }}
          />
          <button type="button" className="pdv-botao pdv-botao-cheio" onClick={addFreeItem}>
            Adicionar
          </button>
        </div>
      ) : null}

      <div className="pdv-vitrine-pe">
        <span>{totalFiltrado} {totalFiltrado === 1 ? "produto" : "produtos"}</span>
        <button
          type="button"
          className={`pdv-botao ${showFreeItemForm ? "pdv-seg-ativo" : ""}`}
          onClick={() => setShowFreeItemForm((antes) => !antes)}
          title="Alt+N"
        >
          <Plus size={14} />
          Item livre
          <kbd>Alt+N</kbd>
        </button>
        <div className="pdv-pager">
          <button
            type="button"
            onClick={() => setCurrentPage((antes) => Math.max(1, antes - 1))}
            disabled={safePage <= 1}
            aria-label="Página anterior"
          >
            <ChevronLeft size={15} />
          </button>
          <span>
            {safePage} / {totalPages}
          </span>
          <button
            type="button"
            onClick={() => setCurrentPage((antes) => Math.min(totalPages, antes + 1))}
            disabled={safePage >= totalPages}
            aria-label="Próxima página"
          >
            <ChevronRight size={15} />
          </button>
        </div>
      </div>
    </section>
  );
}