import { useState, useEffect } from "react";
import { reportError } from "@/lib/errorReporter";
import { useNavigate, useSearchParams } from "react-router-dom";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Slider } from "@/components/ui/slider";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Session } from "@supabase/supabase-js";
import { Footer } from "@/components/Footer";
import { PremiumFeatureLock } from "@/components/PremiumFeatureLock";
import { ProductDetailModal, ProductImage } from "@/features/products";
import {
  ArrowLeft,
  Search as SearchIcon,
  SlidersHorizontal,
  Grid3x3,
  List,
  TrendingDown,
  Heart,
  Sparkles,
  Camera,
  AlertCircle,
} from "lucide-react";
import NavBar from "@/components/NavBar";
import { SEOHead } from "@/components/SEOHead";
import { OCRUploader } from "@/components/OCRUploader";
import { useDebounce } from "@/hooks/useDebounce";
import { useAddToList } from "@/hooks/useAddToList";
import { toast } from "sonner";
import { PricePrediction } from "@/features/products/components/PricePrediction";
import { PredictionFallback } from "@/components/PredictionFallback";
import { useUserPlan } from "@/contexts/SubscriptionContext";
import { usePlatformMode } from "@/hooks/usePlatformMode";
import { useChristmasCampaign } from "@/hooks/useChristmasCampaign";
import { PriceSourceBadge } from "@/features/products/components/PriceSourceBadge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";

interface Product {
  id: string;
  name: string;
  brand: string;
  format: string;
  image_url: string;
  base_price: number;
  is_healthy: boolean;
  is_white_label: boolean;
  category: string;
  has_promotion: boolean;
  promotion_text: string | null;
  data_source?: string;
  cheapestPrice?: number;
  cheapestSupermarket?: string;
}

interface PriceInfo {
  supermarket: string;
  price: number;
  color: string;
  logo: string;
  dataSource?: string;
  isEstimated?: boolean;
  updatedAt?: string;
}

interface ProductWithPrices extends Product {
  prices: PriceInfo[];
  cheapest: PriceInfo;
  limitedData?: boolean;
}

const Search = () => {
  const navigate = useNavigate();
  const { addToList } = useAddToList();
  const [searchParams] = useSearchParams();
  const [session, setSession] = useState<Session | null>(null);
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "");
  const [showFilters, setShowFilters] = useState(false);
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  
  // Filters
  const [category, setCategory] = useState(searchParams.get("category") || "all");
  const [priceRange, setPriceRange] = useState([0, 20]);
  const [onlyHealthy, setOnlyHealthy] = useState(false);
  const [onlyWhiteLabel, setOnlyWhiteLabel] = useState(false);
  const [onlyPromotions, setOnlyPromotions] = useState(false);
  const [sortBy, setSortBy] = useState("name");
  const [favorites, setFavorites] = useState<string[]>([]);
  const [selectedProduct, setSelectedProduct] = useState<ProductWithPrices | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [userProvince, setUserProvince] = useState<string | null>(null);
  const { userPlan } = useUserPlan();
  const { isFreeMode } = usePlatformMode();
  const { isActive: isChristmas } = useChristmasCampaign();

  const debouncedSearch = useDebounce(searchQuery, 300);

  const categories = [
    "all",
    "Lácteos",
    "Panadería",
    "Despensa",
    "Bebidas",
    "Frutas y verduras",
    "Carnes y pescados",
    "Limpieza hogar",
    "Higiene personal",
  ];

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
      // No redirigir si no hay sesión - permitir acceso público
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
      // No redirigir si no hay sesión - permitir acceso público
    });

    return () => subscription.unsubscribe();
  }, [navigate]);

  useEffect(() => {
    loadFavorites();
    loadUserProvince();
  }, [session]);

  useEffect(() => {
    // ✅ FIX: Evitar búsqueda infinita cuando no hay query ni filtros
    if (!debouncedSearch && category === "all" && !onlyHealthy && !onlyWhiteLabel && !onlyPromotions) {
      setProducts([]);
      setLoading(false);
      return;
    }
    
    searchProducts();
  }, [debouncedSearch, category, priceRange, onlyHealthy, onlyWhiteLabel, onlyPromotions, sortBy]);

  const loadUserProvince = async () => {
    if (!session) return;
    const { data } = await supabase
      .from("profiles")
      .select("province")
      .eq("id", session.user.id)
      .single();
    
    if (data?.province) {
      setUserProvince(data.province);
    }
  };

  const loadFavorites = async () => {
    if (!session) return;

    const { data } = await supabase
      .from("shopping_lists")
      .select("products")
      .eq("user_id", session.user.id)
      .eq("name", "Favoritos")
      .maybeSingle();

    if (data?.products && Array.isArray(data.products)) {
      setFavorites(data.products.map((p: any) => p.id));
    }
  };

  const registerSearches = async (products: Product[]) => {
    if (!session || !debouncedSearch) return;
    
    // Registrar solo los primeros 10 productos para evitar sobrecarga
    const productsToTrack = products.slice(0, 10);
    
    // Insertar registros de búsqueda de forma asíncrona (fire and forget)
    const searchRecords = productsToTrack.map(product => ({
      user_id: session.user.id,
      product_id: product.id,
      search_query: debouncedSearch.trim(),
      searched_at: new Date().toISOString()
    }));

    // No esperamos respuesta para no bloquear UI
    (supabase as any)
      .from("product_searches")
      .insert(searchRecords)
      .then(({ error }: any) => {
        if (error) reportError(error, { context: 'Search_registerSearches' });
      });
  };

  const toggleFavorite = async (product: Product) => {
    await addToList(product, 'search');
    loadFavorites();
  };

  const sanitizeQuery = (query: string): string => {
    return query
      .replace(/[¡!¿?()[\]{}*+]/g, '')
      .replace(/\s+/g, ' ')
      .trim()
      .slice(0, 100);
  };

  const searchProducts = async () => {
    setLoading(true);
    
    // ✅ FIX: Timeout de 10 segundos para búsquedas lentas
    const timeoutPromise = new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Search timeout')), 10000)
    );
    
    try {
      let query = supabase.from("products").select("*");

    if (debouncedSearch) {
      const sanitized = sanitizeQuery(debouncedSearch);
      if (sanitized) {
        query = query.or(`name.ilike.%${sanitized}%,brand.ilike.%${sanitized}%`);
      }
    }

    if (category !== "all") {
      query = query.eq("category", category);
    }

    // Filter by real prices from product_prices instead of base_price
    if (sortBy === "price" || sortBy === "price-desc") {
      // Get products with prices in range
      const { data: priceData } = await supabase
        .from("product_prices")
        .select("product_id, price")
        .gte("price", priceRange[0])
        .lte("price", priceRange[1]);
      
      if (priceData && priceData.length > 0) {
        const productIds = [...new Set(priceData.map(p => p.product_id))];
        query = query.in("id", productIds);
      }
    } else {
      // Fallback to base_price for non-price sorts
      query = query.gte("base_price", priceRange[0]).lte("base_price", priceRange[1]);
    }

    if (onlyHealthy) {
      query = query.eq("is_healthy", true);
    }

    if (onlyWhiteLabel) {
      query = query.eq("is_white_label", true);
    }

    if (onlyPromotions) {
      query = query.eq("has_promotion", true);
    }

      query = query.order(
        sortBy === "price" ? "base_price" : "name",
        { ascending: sortBy !== "price-desc" }
      );

      const searchQuery = query.limit(50);
      const { data, error } = await Promise.race([
        searchQuery,
        timeoutPromise
      ]) as any;

      if (!error && data && data.length > 0) {
      // Get cheapest real price for each product in a single query
      const productIds = data.map((p: any) => p.id);
      
      const { data: minPrices } = await supabase
        .from('product_prices')
        .select('product_id, price, supermarkets(name)')
        .in('product_id', productIds)
        .not('price', 'is', null)
        .order('price', { ascending: true });
      
      // Create map of cheapest price per product
      const cheapestMap = new Map<string, { price: number; supermarket: string }>();
      minPrices?.forEach((p: any) => {
        if (!cheapestMap.has(p.product_id) || p.price < cheapestMap.get(p.product_id)!.price) {
          cheapestMap.set(p.product_id, { 
            price: p.price, 
            supermarket: p.supermarkets?.name || 'Desconocido' 
          });
        }
      });
      
      // Enrich products with cheapest price
      const enrichedProducts = data.map((p: any) => ({
        ...p,
        cheapestPrice: cheapestMap.get(p.id)?.price || p.base_price,
        cheapestSupermarket: cheapestMap.get(p.id)?.supermarket || null
      }));
      
      setProducts(enrichedProducts);
      
      if (debouncedSearch) {
        toast.success(`🔍 Encontramos ${data.length} producto${data.length > 1 ? 's' : ''}`, 
          { duration: 1500 }
        );
        
        // Registrar búsquedas de productos encontrados (tracking analytics)
        if (session) {
          registerSearches(data);
        }
      }
    } else if (!error && data && data.length === 0) {
      setProducts([]);
      if (debouncedSearch) {
        toast.success("🔍 No encontramos productos con ese término", { duration: 1500 });
      }
      }
    } catch (error: any) {
      if (error.message === 'Search timeout') {
        toast.error("La búsqueda tardó demasiado. Intenta con términos más específicos.");
      } else {
        reportError(error, { context: 'Search_search' });
        toast.error("Error en la búsqueda");
      }
      setProducts([]);
    } finally {
      setLoading(false);
    }
  };

  const enrichProductWithPrices = async (product: Product): Promise<ProductWithPrices> => {
    const { getProductWithAllPrices } = await import('@/core/services/priceService');
    
    const enriched = await getProductWithAllPrices(product.id);
    
    if (!enriched || enriched.prices.length === 0) {
      return {
        ...product,
        prices: [{
          supermarket: 'Precio referencia',
          price: product.base_price,
          color: '#888',
          logo: ''
        }],
        cheapest: { 
          supermarket: 'Precio referencia', 
          price: product.base_price, 
          color: '#888', 
          logo: '' 
        },
        limitedData: true
      };
    }

    // Filter by user province if available
    let filteredPrices = enriched.prices;
    if (userProvince) {
      const { data: supermarkets } = await supabase
        .from("supermarkets")
        .select("id, coverage_provinces")
        .order("name");
      
      const localSupermarketIds = new Set(
        (supermarkets || [])
          .filter((s: any) => !s.coverage_provinces || s.coverage_provinces.length === 0 || s.coverage_provinces.includes(userProvince))
          .map((s: any) => s.id)
      );
      
      const localPrices = filteredPrices.filter(p => localSupermarketIds.has(p.supermarket_id));
      if (localPrices.length > 0) filteredPrices = localPrices;
    }

    // Map to PriceInfo format
    const prices: PriceInfo[] = filteredPrices
      .map(p => ({
        supermarket: p.supermarket,
        price: p.price,
        color: '#10B981',
        logo: '',
        dataSource: p.data_source,
        isEstimated: p.is_estimated,
        updatedAt: p.updated_at,
      }))
      .sort((a, b) => a.price - b.price);

    const cheapest = prices[0];

    return {
      ...product,
      prices,
      cheapest,
    };
  };

  const handleProductClick = async (product: Product) => {
    setLoading(true);
    try {
      const enrichedProduct = await enrichProductWithPrices(product);
      
      // ✅ Si el producto no tiene precios reales, no abrir modal
      if (!enrichedProduct) {
        toast.error("Este producto no tiene precios disponibles en tu zona");
        setLoading(false);
        return;
      }
      
      setSelectedProduct(enrichedProduct);
      setIsModalOpen(true);
    } catch (error) {
      reportError(error, { context: 'Search_enrichProduct' });
      toast.error("Error al cargar detalles del producto");
    } finally {
      setLoading(false);
    }
  };

  const handleAddToListFromModal = async (product: ProductWithPrices) => {
    await addToList(product, 'search');
    toast.success(`${product.name} añadido a tu lista 🎉`);
  };

  return (
    <div className="min-h-screen bg-background pb-20">
      <SEOHead
        title="Buscar productos de supermercado — PriceHero"
        description="Busca y compara precios de miles de productos de supermercado. Filtra por categoría, marca o precio para encontrar las mejores ofertas."
        canonicalPath="/search"
      />
      <header className="sticky top-0 z-50 w-full border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
        <div className="container flex h-16 items-center gap-4 px-4">
          <Button variant="ghost" size="icon" onClick={() => navigate("/")}>
            <ArrowLeft className="w-5 h-5" />
          </Button>
          <div className="flex-1 flex gap-2">
            <div className="relative flex-1">
              <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
              <Input
                placeholder="Buscar productos, marcas..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            
            {/* OCR Scanner - Disponible para usuarios con sesión, free mode o navidad */}
            {(session || isFreeMode || isChristmas) ? (
              <OCRUploader />
            ) : (
              <Button
                variant="outline"
                size="icon"
                onClick={() => {
                  toast.info("Crea tu cuenta gratis para usar el escáner");
                  navigate('/auth?mode=signup');
                }}
              >
                <Camera className="w-5 h-5" />
              </Button>
            )}
          </div>
          <Button
            variant="outline"
            size="icon"
            onClick={() => setShowFilters(!showFilters)}
          >
            <SlidersHorizontal className="w-5 h-5" />
          </Button>
        </div>
      </header>

      <div className="container max-w-7xl mx-auto p-4">
        {showFilters && (
          <Card className="p-4 md:p-6 mb-6 space-y-4 md:space-y-6 animate-fade-in">
            <div className="flex items-center justify-between">
              <h3 className="text-base md:text-lg font-semibold flex items-center gap-2">
                <SlidersHorizontal className="h-4 w-4" />
                Filtros
              </h3>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => {
                  setCategory("all");
                  setPriceRange([0, 20]);
                  setOnlyHealthy(false);
                  setOnlyWhiteLabel(false);
                  setOnlyPromotions(false);
                  setSortBy("name");
                }}
              >
                Limpiar
              </Button>
            </div>

            {/* Mobile: Accordion */}
            <Accordion type="single" collapsible className="md:hidden space-y-3">
              <AccordionItem value="category" className="border rounded-lg px-4">
                <AccordionTrigger className="text-sm font-medium hover:no-underline">
                  Categoría
                </AccordionTrigger>
                <AccordionContent className="pb-4">
                  <Select value={category} onValueChange={setCategory}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((cat) => (
                        <SelectItem key={cat} value={cat}>
                          {cat === "all" ? "Todas las categorías" : cat}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="price" className="border rounded-lg px-4">
                <AccordionTrigger className="text-sm font-medium hover:no-underline">
                  Precio: {priceRange[0]}€ - {priceRange[1]}€
                </AccordionTrigger>
                <AccordionContent className="pb-4">
                  <Slider
                    value={priceRange}
                    onValueChange={setPriceRange}
                    max={20}
                    step={0.5}
                    className="mt-2"
                  />
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="sort" className="border rounded-lg px-4">
                <AccordionTrigger className="text-sm font-medium hover:no-underline">
                  Ordenar por
                </AccordionTrigger>
                <AccordionContent className="pb-4">
                  <Select value={sortBy} onValueChange={setSortBy}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="name">Nombre (A-Z)</SelectItem>
                      <SelectItem value="price">Precio (menor a mayor)</SelectItem>
                      <SelectItem value="price-desc">Precio (mayor a menor)</SelectItem>
                    </SelectContent>
                  </Select>
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="options" className="border rounded-lg px-4">
                <AccordionTrigger className="text-sm font-medium hover:no-underline">
                  Opciones
                </AccordionTrigger>
                <AccordionContent className="pb-4 space-y-3">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="healthy-mobile"
                      checked={onlyHealthy}
                      onCheckedChange={(checked) => setOnlyHealthy(checked as boolean)}
                    />
                    <label htmlFor="healthy-mobile" className="text-sm">
                      Solo saludables
                    </label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="white-label-mobile"
                      checked={onlyWhiteLabel}
                      onCheckedChange={(checked) => setOnlyWhiteLabel(checked as boolean)}
                    />
                    <label htmlFor="white-label-mobile" className="text-sm">
                      Solo marca blanca
                    </label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="promotions-mobile"
                      checked={onlyPromotions}
                      onCheckedChange={(checked) => setOnlyPromotions(checked as boolean)}
                    />
                    <label htmlFor="promotions-mobile" className="text-sm">
                      Solo promociones
                    </label>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>

            {/* Desktop: Grid normal */}
            <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="space-y-2">
                <label className="text-sm font-medium">Categoría</label>
                <Select value={category} onValueChange={setCategory}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map((cat) => (
                      <SelectItem key={cat} value={cat}>
                        {cat === "all" ? "Todas las categorías" : cat}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium">Ordenar por</label>
                <Select value={sortBy} onValueChange={setSortBy}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="name">Nombre (A-Z)</SelectItem>
                    <SelectItem value="price">Precio (menor a mayor)</SelectItem>
                    <SelectItem value="price-desc">Precio (mayor a menor)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium">
                  Rango de precio: {priceRange[0]}€ - {priceRange[1]}€
                </label>
                <Slider
                  value={priceRange}
                  onValueChange={setPriceRange}
                  max={20}
                  step={0.5}
                  className="mt-2"
                />
              </div>
            </div>

            <div className="hidden md:flex flex-wrap gap-4 mt-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="healthy"
                  checked={onlyHealthy}
                  onCheckedChange={(checked) => setOnlyHealthy(checked as boolean)}
                />
                <label htmlFor="healthy" className="text-sm cursor-pointer">
                  Solo productos saludables
                </label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="white-label"
                  checked={onlyWhiteLabel}
                  onCheckedChange={(checked) => setOnlyWhiteLabel(checked as boolean)}
                />
                <label htmlFor="white-label" className="text-sm cursor-pointer">
                  Solo marca blanca
                </label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="promotions"
                  checked={onlyPromotions}
                  onCheckedChange={(checked) => setOnlyPromotions(checked as boolean)}
                />
                <label htmlFor="promotions" className="text-sm cursor-pointer">
                  Solo promociones
                </label>
              </div>
            </div>
          </Card>
        )}

        <div className="flex items-center justify-between mb-4">
          <p className="text-sm text-muted-foreground">
            {loading ? "Buscando..." : `${products.length} productos encontrados`}
          </p>
          <div className="flex gap-2">
            <Button
              variant={viewMode === "grid" ? "default" : "outline"}
              size="icon"
              onClick={() => setViewMode("grid")}
            >
              <Grid3x3 className="w-4 h-4" />
            </Button>
            <Button
              variant={viewMode === "list" ? "default" : "outline"}
              size="icon"
              onClick={() => setViewMode("list")}
            >
              <List className="w-4 h-4" />
            </Button>
          </div>
        </div>

        {/* Loading State */}
        {loading && !products.length && (
          <div className="flex flex-col items-center justify-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4"></div>
            <p className="text-muted-foreground">Buscando productos...</p>
          </div>
        )}

        {/* Empty State */}
        {!loading && products.length === 0 && debouncedSearch && (
          <Card className="p-8 text-center">
            <AlertCircle className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold mb-2">
              No encontramos "{debouncedSearch}"
            </h3>
            <p className="text-muted-foreground mb-4">
              Prueba con otro término de búsqueda o explora nuestras categorías
            </p>
            <Button onClick={() => setSearchQuery("")} variant="outline">
              Limpiar búsqueda
            </Button>
          </Card>
        )}

        {loading ? (
          <div className="text-center py-12">
            <p className="text-muted-foreground">Cargando productos...</p>
          </div>
        ) : products.length === 0 ? (
          <div className="text-center py-12">
            <SearchIcon className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
            <h3 className="text-xl font-semibold mb-2">No se encontraron productos</h3>
            <p className="text-muted-foreground">
              Intenta ajustar los filtros o buscar con otros términos
            </p>
          </div>
        ) : (
          <div
            className={
              viewMode === "grid"
                ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
                : "space-y-3"
            }
          >
            {products.map((product) => (
              <Card
                key={product.id}
                onClick={() => handleProductClick(product)}
                className={`group overflow-hidden hover:shadow-lg transition-all cursor-pointer hover:scale-[1.02] active:scale-[0.98] ${
                  viewMode === "list" ? "p-4" : "p-0"
                }`}
              >
                {viewMode === "grid" ? (
                  <div>
                    <div className="relative aspect-square">
                      <ProductImage
                        src={product.image_url}
                        alt={product.name}
                        category={product.category}
                        className="w-full h-full object-cover"
                      />
                      {product.has_promotion && (
                        <Badge className="absolute top-2 right-2 bg-destructive text-destructive-foreground">
                          <TrendingDown className="w-3 h-3 mr-1" />
                          Oferta
                        </Badge>
                      )}
                      {product.is_healthy && (
                        <Badge className="absolute top-2 left-2 bg-primary text-primary-foreground">
                          <Sparkles className="w-3 h-3 mr-1" />
                          Saludable
                        </Badge>
                      )}
                    </div>
                    <div className="p-4 space-y-2">
                      <h3 className="font-semibold line-clamp-2">{product.name}</h3>
                      <p className="text-sm text-muted-foreground">
                        {product.brand} • {product.format}
                      </p>
                       <div className="flex items-center justify-between">
                        <div>
                          <p className="text-2xl font-bold text-primary">
                            {(product.cheapestPrice || product.base_price).toFixed(2)}€
                          </p>
                          {product.cheapestSupermarket && (
                            <p className="text-xs text-muted-foreground">en {product.cheapestSupermarket}</p>
                          )}
                          {product.promotion_text && (
                            <p className="text-xs text-destructive">{product.promotion_text}</p>
                          )}
                          <PriceSourceBadge 
                            dataSource={product.data_source as 'api' | 'firecrawl' | 'crowdsourced' | 'simulated' | 'pdf_hipercor_raw' | 'scraped' | 'seed' | 'estimated'} 
                            className="mt-1" 
                          />
                        </div>
                      {/* Favorite Button - Lock if no session */}
                      {!session ? (
                        <Button 
                          size="icon" 
                          variant="ghost"
                          onClick={(e) => {
                            e.stopPropagation();
                            toast.error("Inicia sesión para guardar favoritos");
                          }}
                          className="opacity-50"
                        >
                          <Heart className="w-5 h-5" />
                        </Button>
                      ) : (
                        <Button 
                          size="icon" 
                          variant="ghost"
                          onClick={(e) => {
                            e.stopPropagation();
                            toggleFavorite(product);
                          }}
                        >
                          <Heart className={`w-5 h-5 ${favorites.includes(product.id) ? 'fill-primary text-primary' : ''}`} />
                        </Button>
                      )}
                      </div>

                      {/* AI Prediction - Mostrar siempre */}
                      {userPlan !== 'free' || isFreeMode || isChristmas ? (
                        <div className="mt-3">
                          <PricePrediction productId={product.id} />
                        </div>
                      ) : (
                        <PredictionFallback hasSession={!!session} isPremium={false} />
                      )}
                    </div>
                  </div>
                ) : (
                  <div className="flex gap-4">
                    <ProductImage
                      src={product.image_url}
                      alt={product.name}
                      category={product.category}
                      className="w-24 h-24 object-cover rounded"
                    />
                    <div className="flex-1 flex flex-col justify-between">
                      <div>
                        <h3 className="font-semibold">{product.name}</h3>
                        <p className="text-sm text-muted-foreground">
                          {product.brand} • {product.format}
                        </p>
                        <div className="flex gap-2 mt-1">
                          {product.has_promotion && (
                            <Badge variant="secondary" className="text-xs">
                              Oferta
                            </Badge>
                          )}
                          {product.is_healthy && (
                            <Badge variant="secondary" className="text-xs">
                              Saludable
                            </Badge>
                          )}
                        </div>
                      </div>
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-xl font-bold text-primary">
                            {(product.cheapestPrice || product.base_price).toFixed(2)}€
                          </p>
                          {product.cheapestSupermarket && (
                            <p className="text-xs text-muted-foreground">en {product.cheapestSupermarket}</p>
                          )}
                        </div>
                        <Button 
                          size="sm" 
                          variant="ghost"
                          onClick={(e) => {
                            e.stopPropagation();
                            toggleFavorite(product);
                          }}
                        >
                          <Heart className={`w-4 h-4 ${favorites.includes(product.id) ? 'fill-primary text-primary' : ''}`} />
                        </Button>
                      </div>

                      {/* AI Prediction for list view - Mostrar siempre */}
                      {userPlan !== 'free' || isFreeMode || isChristmas ? (
                        <div className="mt-2">
                          <PricePrediction productId={product.id} />
                        </div>
                      ) : (
                        <PredictionFallback hasSession={!!session} isPremium={false} />
                      )}
                    </div>
                  </div>
                )}
              </Card>
            ))}
          </div>
        )}
        
        {/* CTA for public users after showing results */}
        {!session && products.length > 5 && (
          <Card className="mt-6 p-6 bg-gradient-to-r from-primary/10 to-secondary/10 border-primary/20">
            <div className="flex flex-col md:flex-row items-center justify-between gap-4">
              <div className="text-center md:text-left">
                <h3 className="font-semibold mb-1 text-lg">
                  ¿Quieres ahorrar más?
                </h3>
                <p className="text-sm text-muted-foreground">
                  Crea tu cuenta gratis y accede a listas personalizadas, alertas de precios y más
                </p>
              </div>
              <Button onClick={() => navigate('/auth')} size="lg" className="whitespace-nowrap">
                Registrarme gratis
              </Button>
            </div>
          </Card>
        )}
      </div>

      {/* Product Detail Modal */}
      <ProductDetailModal
        product={selectedProduct}
        open={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onAddToList={handleAddToListFromModal}
      />

      <Footer />
      <NavBar />
    </div>
  );
};

export default Search;