"use client";

import { useCart } from "@/context/CartContext";
import { Plus, Check, ShoppingCart, Percent, ArrowRight } from "lucide-react";
import Image from "next/image";
import { useState } from "react";
import { toast } from "sonner";
import { ensureColorContrast } from "@/lib/color-contrast";
import ComboConfigModal from "./ComboConfigModal";

interface ComboProduct {
  id: string;
  name: string;
  price: number;
  image_url: string | null;
  price_on_request: boolean;
  use_variation_price_only: boolean;
  shipping_weight_kg?: number | null;
  shipping_width_cm?: number | null;
  shipping_height_cm?: number | null;
  shipping_length_cm?: number | null;
  user_id?: string;
}

export interface ProductCombo {
  id: string;
  title: string;
  discount_type: "percentage" | "fixed" | "none";
  discount_value: number;
  main_product_id: string;
  combo_product: ComboProduct;
  /* A regra da loja escondeu o preco deste visitante: a sugestao fica, o valor nao. */
  preco_oculto?: boolean;
}

export interface SelectedComboData {
  combo: ProductCombo;
  quantity: number;
  discountedPrice: number;
  configuration?: any;
}

interface ProductCombosWidgetProps {
  combos: ProductCombo[];
  mainProduct: any;
  primaryColor: string;
  slug?: string;
  onComboSelect?: (selectedCombos: SelectedComboData[]) => void;
}

export default function ProductCombosWidget({
  combos,
  mainProduct,
  primaryColor,
  slug,
  onComboSelect
}: ProductCombosWidgetProps) {
  const [selectedCombos, setSelectedCombos] = useState<Record<string, SelectedComboData>>({});
  
  // State for complex product modal
  const [configModalOpen, setConfigModalOpen] = useState(false);
  const [loadingConfig, setLoadingConfig] = useState<string | null>(null);
  const [activeComboForConfig, setActiveComboForConfig] = useState<ProductCombo | null>(null);
  const [fullComboProductData, setFullComboProductData] = useState<any>(null);

  if (!combos || combos.length === 0) return null;

  const formatMoney = (val: number) =>
    new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(val);

  const isMainProductDynamic = 
    mainProduct.price_on_request || 
    mainProduct.use_variation_price_only || 
    mainProduct.unit_type === "square_meter" || 
    mainProduct.unit_type === "linear_meter";

  const calculateDiscountedPrice = (combo: ProductCombo) => {
    const originalPrice = combo.combo_product.price;
    if (combo.discount_type === "percentage") {
      return originalPrice - (originalPrice * combo.discount_value / 100);
    } else if (combo.discount_type === "fixed") {
      return Math.max(0, originalPrice - combo.discount_value);
    }
    return originalPrice;
  };

  const handleToggleCombo = async (combo: ProductCombo) => {
    if (combo.combo_product.price_on_request && !combo.preco_oculto) {
      toast.error("O produto sugerido está sob consulta e não pode ser adicionado diretamente.");
      return;
    }

    if (selectedCombos[combo.id]) {
      // Deselect
      const newSelected = { ...selectedCombos };
      delete newSelected[combo.id];
      setSelectedCombos(newSelected);
      if (onComboSelect) onComboSelect(Object.values(newSelected));
    } else {
      // Check if product is complex (requires configuration) or has complex pricing rules
      setLoadingConfig(combo.id);
      try {
        /* Pelo servidor, que entrega so o que a vitrine usa e so o que este
           visitante pode ver (nada de custo nem de preco escondido). Antes o
           navegador consultava o banco direto com a chave publica. */
        const resposta = await fetch(
          `/api/catalog/produto?slug=${encodeURIComponent(slug || "")}&id=${encodeURIComponent(combo.combo_product.id)}`
        );
        const corpo = (await resposta.json().catch(() => null)) as { produto?: any; error?: string } | null;
        const data = corpo?.produto;
        if (!resposta.ok || !data) throw new Error(corpo?.error || "Produto não encontrado");

        const hasVariations = data.product_attributes && data.product_attributes.length > 0;
        const isSquareMeter = data.unit_type === "square_meter" || data.unit_type === "linear_meter";
        const hasPricingTiers = data.product_price_tiers && data.product_price_tiers.length > 0;
        const hasQuantityLimits = data.min_sale_qty_enabled || data.max_sale_qty_enabled || data.allowed_sale_qty_enabled;

        // Open modal if it needs configuration OR if it has complex quantity/pricing rules
        // so the user can see the final price based on the rules.
        if (hasVariations || isSquareMeter || hasPricingTiers || hasQuantityLimits) {
          setFullComboProductData(data);
          setActiveComboForConfig(combo);
          setConfigModalOpen(true);
        } else {
          // Simple product, just select it
          const discountedPrice = calculateDiscountedPrice(combo);
          const comboData: SelectedComboData = { combo, quantity: 1, discountedPrice, configuration: { unit_type: data.unit_type } };
          const newSelected = { ...selectedCombos, [combo.id]: comboData };
          setSelectedCombos(newSelected);
          if (onComboSelect) onComboSelect(Object.values(newSelected));
        }
      } catch (err) {
        console.error("Error fetching combo product details", err);
        toast.error("Erro ao carregar detalhes do produto do combo.");
      } finally {
        setLoadingConfig(null);
      }
    }
  };

  const handleConfigModalConfirm = (quantity: number, configuration: any) => {
    if (!activeComboForConfig) return;
    
    // Use the resolved price from the modal if it exists (it accounts for tiers and combo discounts)
    // Otherwise fallback to basic discount calculation
    const discountedPrice = configuration?.resolvedUnitPrice ?? calculateDiscountedPrice(activeComboForConfig);
    const comboData: SelectedComboData = { combo: activeComboForConfig, quantity, discountedPrice, configuration };
    
    const newSelected = { ...selectedCombos, [activeComboForConfig.id]: comboData };
    setSelectedCombos(newSelected);
    
    if (onComboSelect) {
      onComboSelect(Object.values(newSelected));
    }
    
    setConfigModalOpen(false);
  };

  const updateQuantity = (combo: ProductCombo, newQty: number) => {
    const discountedPrice = selectedCombos[combo.id]?.discountedPrice ?? calculateDiscountedPrice(combo);
    const comboData = { 
      ...selectedCombos[combo.id], 
      quantity: newQty, 
      discountedPrice 
    };
    const newSelected = { ...selectedCombos, [combo.id]: comboData };
    setSelectedCombos(newSelected);
    if (onComboSelect) onComboSelect(Object.values(newSelected));
  };

  const handleQuantityChange = (combo: ProductCombo, increment: boolean) => {
    const currentQty = selectedCombos[combo.id]?.quantity || 1;
    const newQty = increment ? currentQty + 1 : Math.max(1, currentQty - 1);
    updateQuantity(combo, newQty);
  };

  const handleManualQuantityChange = (combo: ProductCombo, e: React.ChangeEvent<HTMLInputElement>) => {
    let val = parseInt(e.target.value, 10);
    if (isNaN(val) || val < 1) val = 1;
    updateQuantity(combo, val);
  };

  const buttonTextColor = ensureColorContrast(primaryColor, "#FFFFFF", {
    dark: "#111827",
    light: "#FFFFFF",
    minRatio: 4.5,
  });

  return (
    <section className="mb-2">
      <div className="space-y-3">
        {combos.map((combo) => {
          const isComboProductDynamic = 
            combo.combo_product.price_on_request || 
            combo.combo_product.use_variation_price_only;

          const showTotalPrice = !isMainProductDynamic && !isComboProductDynamic;

          const comboOriginalPrice = combo.combo_product.price;
          const comboDiscountedPrice = calculateDiscountedPrice(combo);
          
          const isSelected = !!selectedCombos[combo.id];
          const selectedComboData = selectedCombos[combo.id];
          const currentQty = isSelected ? selectedCombos[combo.id].quantity : 1;
          const currentConfig = isSelected ? selectedCombos[combo.id].configuration : null;
          const currentUnitPrice = isSelected
            ? (Number(selectedComboData?.discountedPrice) || comboDiscountedPrice)
            : comboDiscountedPrice;
          const hasConfiguredPriceChange =
            isSelected &&
            currentConfig &&
            Math.abs(currentUnitPrice - comboDiscountedPrice) > 0.000001;
          
          // Multiply by quantity if selected
          const displayOriginalPrice = isSelected ? comboOriginalPrice * currentQty : comboOriginalPrice;
          const displayDiscountedPrice = currentUnitPrice * currentQty;
          const displayBaseComboPrice = comboDiscountedPrice * currentQty;

          return (
            <div key={combo.id} className="flex flex-col">
              {combo.title && (
                <div className="text-sm font-bold text-gray-800 mb-2 pl-1">{combo.title}</div>
              )}
              <div 
                className={`rounded-xl border p-2.5 sm:p-3 shadow-sm relative overflow-hidden transition-all duration-200 cursor-pointer ${
                  isSelected ? 'border-primary bg-primary/5 ring-1 ring-primary' : 'border-gray-200 bg-white hover:border-primary/50'
                }`}
                style={isSelected ? { borderColor: primaryColor } : {}}
                onClick={(e) => {
                  // Prevent toggle if clicking on quantity buttons
                  if ((e.target as HTMLElement).closest('.qty-btn')) return;
                  handleToggleCombo(combo);
                }}
              >
              <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                <div className="flex items-center gap-2.5 sm:gap-3 min-w-0 w-full">
                  {/* Checkbox & Images */}
                  <div className="flex items-center gap-2.5 sm:gap-3 shrink-0">
                    <div className={`w-5 h-5 rounded-md border flex items-center justify-center shrink-0 transition-colors ${
                      isSelected ? 'border-transparent text-white' : 'border-gray-300 bg-white'
                    }`}
                    style={isSelected ? { backgroundColor: primaryColor } : {}}
                    >
                      {loadingConfig === combo.id ? (
                        <div className="w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" style={isSelected ? { borderColor: 'white', borderTopColor: 'transparent' } : {}} />
                      ) : isSelected ? (
                        <Check size={14} strokeWidth={3} />
                      ) : null}
                    </div>

                    <div className="w-12 h-12 sm:w-14 sm:h-14 relative rounded-lg border border-gray-100 overflow-hidden bg-gray-50 flex-shrink-0">
                      {combo.combo_product.image_url ? (
                        <Image src={combo.combo_product.image_url} alt={combo.combo_product.name} fill className="object-cover" unoptimized />
                      ) : (
                        <div className="w-full h-full flex items-center justify-center bg-gray-100 text-gray-400">
                          <ShoppingCart size={16} />
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Details */}
                  <div className="flex-1 min-w-0 text-left">
                  <div className="font-medium text-gray-900 leading-tight mb-0.5 text-[13px] sm:text-sm">
                    <span className="text-gray-500 font-normal mr-1">Leve também:</span>
                    {combo.combo_product.name}
                  </div>
                  
                  {isSelected && currentConfig && (
                    <div className="text-[10px] sm:text-xs text-gray-500 mb-1 flex flex-col gap-0.5">
                      {currentConfig.width_m && (
                        <span>Medidas: {currentConfig.width_m}m {currentConfig.unit_type === 'square_meter' ? `x ${currentConfig.height_m}m` : ''}</span>
                      )}
                      {currentConfig.variation?.description && (
                        <span>{currentConfig.variation.description}</span>
                      )}
                    </div>
                  )}

                  {combo.preco_oculto ? null : (
                  <div className="flex items-center gap-1 sm:gap-1.5 flex-wrap">
                    <span className="text-[13px] sm:text-sm font-bold text-emerald-600">{formatMoney(displayDiscountedPrice)}</span>
                    {!hasConfiguredPriceChange && displayOriginalPrice > displayDiscountedPrice && (
                      <span className="text-[10px] sm:text-xs text-gray-400 line-through">{formatMoney(displayOriginalPrice)}</span>
                    )}
                    {hasConfiguredPriceChange && (
                      <span className="text-[10px] sm:text-xs text-gray-400 line-through">Antes: {formatMoney(displayBaseComboPrice)}</span>
                    )}
                    {combo.discount_type === "percentage" && (
                      <span className="text-[9px] sm:text-[10px] font-bold bg-red-100 text-red-600 px-1.5 py-0.5 rounded leading-none">
                        -{combo.discount_value}% OFF
                      </span>
                    )}
                    {hasConfiguredPriceChange && (
                      <span className="text-[9px] sm:text-[10px] font-bold bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded leading-none">
                        Preço atualizado
                      </span>
                    )}
                  </div>
                  )}
                </div>
                </div>

                {/* Quantity Control (Only show if selected) */}
                {isSelected && (
                  <div className="w-full sm:w-auto flex justify-center sm:justify-end mt-1 sm:mt-0 qty-btn shrink-0">
                    <div className="flex items-center border border-gray-200 rounded-lg bg-white h-7 sm:h-9">
                      <button
                        type="button"
                        onClick={(e) => { e.stopPropagation(); handleQuantityChange(combo, false); }}
                        className="w-7 sm:w-9 h-full flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-l-lg transition-colors"
                      >
                        -
                      </button>
                      <input
                        type="number"
                        value={currentQty}
                        onChange={(e) => handleManualQuantityChange(combo, e)}
                        onClick={(e) => e.stopPropagation()}
                        className="w-8 sm:w-10 h-full text-center text-xs sm:text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-transparent border-none p-0 hide-arrows"
                        min="1"
                      />
                      <button
                        type="button"
                        onClick={(e) => { e.stopPropagation(); handleQuantityChange(combo, true); }}
                        className="w-7 sm:w-9 h-full flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-r-lg transition-colors"
                      >
                        +
                      </button>
                    </div>
                  </div>
                )}
              </div>
              </div>
            </div>
          );
        })}
      </div>
      
      {/* Quick Add Modal for Complex Combo Products */}
      <ComboConfigModal 
        isOpen={configModalOpen}
        onClose={() => setConfigModalOpen(false)}
        combo={activeComboForConfig}
        productData={fullComboProductData}
        primaryColor={primaryColor}
        onConfirm={handleConfigModalConfirm}
      />
    </section>
  );
}