import React, { useState } from "react";
import { Product } from "../types";
import NoImagePlaceholder from "./NoImagePlaceholder";
import ImageZoomModal from "./ImageZoomModal";
import ProductStoreDeliveryModal from "./ProductStoreDeliveryModal";
import { authService } from "../src/services/auth.service";

interface ProductListItemProps {
  product: Product;
  quantity: number;
  onQuantityChange: (quantity: number) => void;
  onAddToCart: (
    product: Product,
    quantity: number,
    stockStore?: string,
    deliveryType?: string
  ) => void;
  onViewDetails: (product: Product, quantity?: number) => void;
}

/**
 * ProductListItem Component
 * Componente para exibir um produto no modo lista
 */
const ProductListItem: React.FC<ProductListItemProps> = ({
  product,
  quantity,
  onQuantityChange,
  onAddToCart,
  onViewDetails,
}) => {
  const [imageError, setImageError] = useState(false);
  const [showImageZoom, setShowImageZoom] = useState(false);
  const [showStoreDeliveryModal, setShowStoreDeliveryModal] = useState(false);

  return (
    <div className="flex gap-6">
      {/* Imagem do produto */}
      <div className="flex-shrink-0 w-48 h-48 bg-slate-50 rounded-xl overflow-hidden relative flex items-center justify-center p-4 group/image">
        {product.image &&
        product.image !==
          "https://placehold.co/200x200/f8fafc/949494/png?text=Sem+Imagem" &&
        !product.image.includes("placeholder") &&
        !imageError ? (
          <>
            <img
              src={product.image}
              alt={product.name}
              className="max-w-full max-h-full object-contain mix-blend-multiply"
              onError={() => {
                setImageError(true);
              }}
            />
            {/* Badge de Desconto */}
            {typeof product.discount === "number" && product.discount > 0 && (
              <div className="absolute top-3 left-3 flex items-center gap-2">
                <span className="bg-orange-500 text-white px-3 py-1.5 rounded-lg text-xs font-black uppercase tracking-wider shadow-lg">
                  {product.discount.toFixed(2)}%
                </span>
                <div className="bg-orange-500 text-white p-2 rounded-full shadow-lg">
                  <svg
                    className="w-4 h-4"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2.5"
                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
              </div>
            )}
            {/* Botão de Zoom */}
            <button
              onClick={() => setShowImageZoom(true)}
              className="absolute bottom-3 right-3 bg-[#002147]/80 hover:bg-[#002147] text-white p-2.5 rounded-lg transition-all opacity-0 group-hover/image:opacity-100 shadow-lg backdrop-blur-sm"
              title="Ampliar imagem"
            >
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2.5}
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"
                />
              </svg>
            </button>
          </>
        ) : (
          <NoImagePlaceholder size="md" />
        )}
      </div>

      {/* Informações do produto */}
      <div className="flex-1 flex flex-col justify-between min-w-0">
        {/* Parte superior: Título, descrição, informações */}
        <div>
          <div className="flex items-start justify-between gap-4 mb-2">
            <h3 className="text-xl font-extrabold text-[#002147] leading-tight flex-1">
              {product.name}
            </h3>
            <button
              onClick={() => onViewDetails(product)}
              className="flex-shrink-0 bg-[#002147] text-white px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wide hover:bg-[#003366] transition-all shadow-md"
            >
              Ver mais
            </button>
          </div>

          {/* Descrição */}
          {product.description && (
            <p className="text-sm text-slate-600 mb-3 line-clamp-2">
              {product.description}
            </p>
          )}

          {/* Informações: Marca - Código - EAN - Modelo */}
          {(() => {
            const parts: string[] = [];
            if (
              product.mark &&
              product.mark !== "0" &&
              product.mark !== "Sem marca"
            ) {
              parts.push(product.mark);
            }
            if (product.code && product.code !== "0") {
              parts.push(product.code);
            }
            if (product.ean && product.ean !== "0") {
              parts.push(product.ean);
            }
            if (product.model && product.model !== "0") {
              parts.push(product.model);
            }
            return parts.length > 0 ? (
              <div className="mb-3">
                <p className="text-xs text-slate-500 font-medium leading-relaxed">
                  {parts.join(" - ")}
                </p>
              </div>
            ) : null;
          })()}

          {/* Preços */}
          <div className="mb-4">
            {product.originalPrice && product.originalPrice > product.price && (
              <p className="text-sm text-slate-400 line-through mb-1">
                de R${" "}
                {product.originalPrice.toLocaleString("pt-BR", {
                  minimumFractionDigits: 2,
                  maximumFractionDigits: 2,
                })}
              </p>
            )}
            <div className="flex items-center gap-3 mb-2">
              <p className="text-3xl font-black text-orange-600">
                por R${" "}
                {product.price.toLocaleString("pt-BR", {
                  minimumFractionDigits: 2,
                  maximumFractionDigits: 2,
                })}
              </p>
            </div>
            {/* Parcelamento */}
            <p className="text-sm text-slate-600">
              ou em 10x de R${" "}
              {(product.price / 10).toLocaleString("pt-BR", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}
            </p>
          </div>

          {/* Informações de Estoque */}
          <div className="mb-4 space-y-2 border-t border-slate-100 pt-4">
            <div className="flex justify-between items-center">
              <span className="text-xs text-slate-600 font-medium">
                Estoque loja
              </span>
              <span className="text-xs font-bold text-slate-800">
                {product.stockLocal.toFixed(2) || 0} UN
              </span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-xs text-slate-600 font-medium">
                Estoque disponível
              </span>
              <span className="text-xs font-bold text-slate-800">
                {product.stockAvailable?.toFixed(2) ||
                  product.stockLocal.toFixed(2) ||
                  0}{" "}
                UN
              </span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-xs text-slate-600 font-medium">
                Estoque geral
              </span>
              <span className="text-xs font-bold text-slate-800">
                {product.stockGeneral.toFixed(2) || 0} UN
              </span>
            </div>
          </div>
        </div>

        {/* Parte inferior: Seletor de quantidade e botão adicionar */}
        <div className="pt-4 border-t border-slate-100 flex items-center gap-3">
          {/* Seletor de Quantidade */}
          <div className="flex items-center border border-slate-300 rounded-lg overflow-hidden">
            <button
              onClick={() => {
                const newQty = Math.max(1, quantity - 1);
                onQuantityChange(newQty);
              }}
              className="bg-[#002147] text-white px-4 py-2 hover:bg-[#003366] transition-colors font-bold"
              disabled={quantity <= 1}
            >
              -
            </button>
            <input
              type="number"
              min="1"
              value={quantity.toFixed(2)}
              onChange={(e) => {
                const val = parseFloat(e.target.value) || 1;
                const newQty = Math.max(1, val);
                onQuantityChange(newQty);
              }}
              className="w-20 text-center text-sm font-bold border-0 focus:outline-none focus:ring-0"
            />
            <button
              onClick={() => {
                onQuantityChange(quantity + 1);
              }}
              className="bg-[#002147] text-white px-4 py-2 hover:bg-[#003366] transition-colors font-bold"
            >
              +
            </button>
          </div>

          {/* Botão Adicionar */}
          <button
            onClick={() => {
              // Se tiver estoque na loja, adicionar direto com "Retira Imediata"
              if (product.stockLocal && product.stockLocal > 0) {
                const currentStore = authService.getStore() || "";
                onAddToCart(product, quantity, currentStore, "RI"); // RI = Retira Imediata
              } else {
                // Caso contrário, abrir modal para selecionar loja e tipo de entrega
                setShowStoreDeliveryModal(true);
              }
            }}
            className="flex-1 bg-orange-500 text-white py-2.5 rounded-lg font-bold uppercase text-xs tracking-wide hover:bg-orange-600 transition-all shadow-md"
          >
            Adicionar
          </button>
        </div>
      </div>

      {/* Modal de Zoom da Imagem */}
      <ImageZoomModal
        isOpen={showImageZoom}
        onClose={() => setShowImageZoom(false)}
        imageUrl={product.image || ""}
        productName={product.name}
      />

      {/* Modal de Seleção de Loja e Tipo de Entrega */}
      <ProductStoreDeliveryModal
        isOpen={showStoreDeliveryModal}
        onClose={() => setShowStoreDeliveryModal(false)}
        onConfirm={(stockStore, deliveryType) => {
          // Adicionar ao carrinho com as informações selecionadas
          onAddToCart(product, quantity, stockStore, deliveryType);
          setShowStoreDeliveryModal(false);
        }}
        product={product}
        quantity={quantity}
      />
    </div>
  );
};

export default ProductListItem;