import { useEffect, useMemo, useState } from "react";
import { logger } from "@/lib/logger";
import { reportError } from "@/lib/errorReporter";
import { useLocation, useNavigate } from "react-router-dom";
import { supabase } from "@/integrations/supabase/client";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { toast } from "sonner";
import { PageContainer } from "@/components/PageContainer";
import NavBar from "@/components/NavBar";
import { Footer } from "@/components/Footer";
import { ResultsHeroCard } from "@/features/results/components/ResultsHeroCard";
import { SupermarketCardList } from "@/features/results/components/SupermarketCardList";
import { ResultsInsightsPanel } from "@/features/results/components/ResultsInsightsPanel";
import { ResultsHeader } from "@/features/results/components/ResultsHeader";
import { ResultsFilters } from "@/features/results/components/ResultsFilters";
import { ResultsActions } from "@/features/results/components/ResultsActions";
import { ResultsChart } from "@/components/ResultsChart";
import { ComparisonSummaryTable } from "@/components/ComparisonSummaryTable";
import { ProductComparisonTable } from "@/features/products";
import { CelebrationAnimation } from "@/features/household";
import { CategoryDistributionChart } from "@/components/CategoryDistributionChart";
import { SavingsProjectionChart } from "@/components/SavingsProjectionChart";
import { PriceInsightCards } from "@/components/PriceInsightCards";
import { useResultsCalculation } from "@/features/results/hooks/useResultsCalculation";
import { useResultsFilters } from "@/features/results/hooks/useResultsFilters";
import { useResultsStore } from "@/store/resultsStore";
import { trackEvent, trackSupermarketRedirect } from "@/utils/analytics";
import { celebrateSavings } from "@/utils/confetti";
import { ArrowLeft } from "lucide-react";
import { MultiProductResults } from "@/components/MultiProductResults";
import SupermarketRedirectModal from "@/components/SupermarketRedirectModal";
import { getSupermarketColor } from "@/core/constants/supermarketLogos";
import type { SelectedVariant, SupermarketResult } from "@/core/types";
import { ResultsSkeleton } from "@/components/ResultsSkeleton";
import { batchLoadPrices } from "@/core/services/priceService";
import { AdSlot } from "@/components/ads/AdSlot";
import { SEOHead } from "@/components/SEOHead";
import { ShareButtons } from "@/components/ShareButtons";

const Results = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const searchParams = new URLSearchParams(location.search);
  const productsParam = searchParams.get("products");
  const queryParam = searchParams.get("q") || searchParams.get("query"); // Support ?q= and ?query=
  
  // Check if this is multi-search results
  const isMultiSearch = location.state?.isMultiSearch || false;
  const multiSearchResults = location.state?.multiSearchResults;
  
  // Zustand store
  const {
    results,
    selectedVariants,
    sortBy,
    filterLocal,
    filterFullCoverage,
    setResults,
    setSelectedVariant,
    setSortBy,
    setFilterLocal,
    setFilterFullCoverage,
  } = useResultsStore();

  // Local state
  const [products, setProducts] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [showCelebration, setShowCelebration] = useState(false);
  const [isPremium, setIsPremium] = useState(false);
  const [redirectModal, setRedirectModal] = useState<{
    isOpen: boolean;
    supermarket: { name: string; logo_url: string; color: string; } | null;
  }>({
    isOpen: false,
    supermarket: null
  });

  // Check if user is premium
  useEffect(() => {
    const checkPremiumStatus = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      if (!session) return;

      const { data: subscription } = await supabase
        .from('subscriptions')
        .select('status, plan')
        .eq('user_id', session.user.id)
        .in('status', ['active', 'trialing'])
        .maybeSingle();

      setIsPremium(!!subscription);
    };

    checkPremiumStatus();
  }, []);

  // Premium celebration logic
  const triggerCelebration = (savingsAmount?: number) => {
    if (isPremium) {
      // Premium users get special animations
      setShowCelebration(true);
      
      // Double confetti for savings > 20€
      if (savingsAmount && savingsAmount > 20) {
        celebrateSavings();
        setTimeout(() => celebrateSavings(), 300);
      } else {
        celebrateSavings();
      }

      setTimeout(() => setShowCelebration(false), 3000);
    } else {
      // Free users get standard confetti
      celebrateSavings();
    }
  };

  // Load products data
  useEffect(() => {
    if (isMultiSearch && multiSearchResults) {
      setIsLoading(false);
      triggerCelebration();
      return;
    }

    const loadProducts = async () => {
      // ✅ CRITICAL FIX: Check location.state.products FIRST (antes que query params)
      const stateProducts = location.state?.products;
      
      if (stateProducts && Array.isArray(stateProducts) && stateProducts.length > 0) {
        logger.log("✅ Loading products from location.state:", stateProducts.length);
        
        try {
          setIsLoading(true);
          
          // ✅ FIX CRÍTICO: Solo reutilizar precios si son recientes (< 5 min)
          const hasRecentPrices = stateProducts[0]?.prices?.length > 0 && 
            stateProducts[0]?.prices[0]?.updated_at &&
            (Date.now() - new Date(stateProducts[0].prices[0].updated_at).getTime()) < 300000; // 5 min

          if (hasRecentPrices) {
            logger.log("✅ Using cached prices (< 5 min old)");
            setProducts(stateProducts);
            setIsLoading(false);
            setTimeout(() => triggerCelebration(), 500);
            return;
          }
          
          logger.log("🔄 Loading fresh prices from database (cached prices too old or missing)");
          
          // ✅ FIX 3: Si solo tienen IDs, cargar desde DB con validación
          const productIds = stateProducts
            .map((p: any) => p.id)
            .filter((id: string) => id); // Filtrar IDs válidos
          
          if (productIds.length === 0) {
            throw new Error("No se encontraron IDs de productos válidos");
          }

          const { data: productsData, error } = await supabase
            .from("products")
            .select("*")
            .in("id", productIds);

          if (error) throw error;

          if (!productsData || productsData.length === 0) {
            throw new Error("No se encontraron productos");
          }

          // ✅ OPTIMIZED: Batch load all prices in 1 query instead of N
          const priceMap = await batchLoadPrices(productIds);
          
          const productsWithPrices = productsData.map((product) => ({
            ...product,
            prices: priceMap.get(product.id) || [],
          }));

        setProducts(productsWithPrices);
        logger.log("✅ Products loaded from state:", productsWithPrices.length);
        
        // ✅ FIX 1: Validar productos con precios reales
        const productsWithRealPrices = productsWithPrices.filter(
          (p) => p.prices && p.prices.length > 0
        );


        // Calculate savings for celebration
        const savingsAmount = productsWithPrices.length > 0 ? 
          Math.max(...productsWithPrices.map(p => p.base_price || 0)) - 
          Math.min(...productsWithPrices.map(p => p.base_price || 0)) : 0;

        setTimeout(() => triggerCelebration(savingsAmount), 500);
        } catch (error) {
          reportError(error, { context: 'loadProductsFromState', productsCount: stateProducts?.length });
          toast.error("Error al cargar productos", {
            description: "No se pudieron obtener los precios. Intenta de nuevo.",
          });
          navigate("/");
        } finally {
          setIsLoading(false);
        }
        return;
      }

      // Support for ?q= parameter - search products by name
      if (queryParam) {
        logger.log("🔍 Searching products by query:", queryParam);
        const { data: searchResults, error } = await supabase
          .from("products")
          .select("*")
          .ilike("name", `%${queryParam}%`)
          .limit(20);

        if (error || !searchResults || searchResults.length === 0) {
          logger.warn("⚠️ No products found for query:", queryParam);
          toast.error("Sin resultados", {
            description: `No encontramos productos para "${queryParam}"`,
          });
          navigate("/search");
          return;
        }

        // ✅ OPTIMIZED: Batch load prices
        const searchProductIds = searchResults.map(p => p.id);
        const priceMap = await batchLoadPrices(searchProductIds);
        
        const productsWithPrices = searchResults.map((product) => ({
          ...product,
          prices: priceMap.get(product.id) || [],
        }));

        setProducts(productsWithPrices);
        setIsLoading(false);
        setTimeout(() => triggerCelebration(), 500);
        return;
      }

      // Fallback: products param (mantener compatibilidad existente)
      if (!productsParam) {
        logger.warn("⚠️ No products found in state or query, redirecting to home");
        navigate("/");
        return;
      }

      try {
        setIsLoading(true);
        const productIds = productsParam.split(",");
        
        const { data: productsData, error } = await supabase
          .from("products")
          .select("*")
          .in("id", productIds);

        if (error) throw error;

        if (!productsData || productsData.length === 0) {
          throw new Error("No se encontraron productos");
        }

        // ✅ OPTIMIZED: Batch load prices
        const priceMap = await batchLoadPrices(productIds);
        
        const productsWithPrices = productsData.map((product) => ({
          ...product,
          prices: priceMap.get(product.id) || [],
        }));

        setProducts(productsWithPrices);
        
        // Track event
        logger.log("Comparison view:", productsWithPrices.length, "products");

        // Celebration after load
        setTimeout(() => triggerCelebration(), 500);
      } catch (error) {
        reportError(error, { context: 'loadProductsByParam' });
        toast.error("Error", {
          description: "No se pudieron cargar los productos",
        });
        navigate("/");
      } finally {
        setIsLoading(false);
      }
    };

    loadProducts();
  }, [productsParam, queryParam, navigate, isMultiSearch, multiSearchResults, location.state?.products, location.state?.isMultiSearch]);

  // Calculate results using custom hook
  const calculationResult = useResultsCalculation(products);
  const calculatedResults = calculationResult.results || [];

  // ✅ FIX 5: Logging mejorado para debugging
  logger.log("📊 [Results] Calculation complete:", {
    productsCount: products.length,
    resultsCount: calculatedResults.length,
    hasRealPrices: products.some(p => p.prices && p.prices.length > 0),
    cheapest: calculatedResults[0]?.name,
    cheapestTotal: calculatedResults[0]?.total
  });
  
  // Update global store when results change
  useEffect(() => {
    if (calculatedResults.length > 0) {
      setResults(calculatedResults);
    }
  }, [calculatedResults, setResults]);

  // Apply filters and sorting using custom hook
  const filteredResults = useResultsFilters(
    calculatedResults,
    products,
    sortBy,
    filterLocal,
    filterFullCoverage
  );

  // ✅ FIX: Calcular ANTES de returns condicionales para cumplir reglas de hooks
  const cheapest = filteredResults[0];
  const mostExpensive = filteredResults[filteredResults.length - 1];
  const savings = mostExpensive && cheapest 
    ? mostExpensive.total - cheapest.total 
    : 0;

  // ✅ insights useMemo ANTES de returns condicionales
  const insights = useMemo(() => {
    if (!products.length) return null;
    
    const healthyCount = products.filter((p: any) => p.is_healthy).length;
    const potentialAnnualSavings = savings * 52; // Weekly savings * 52 weeks
    
    return {
      healthyOptions: healthyCount,
      potentialAnnualSavings,
      tieAnalysis: calculationResult.tieAnalysis,
      smartTips: [
        cheapest ? `${cheapest.name} es tu mejor opción con ${products.length} productos comparados` : 'Comparando precios...',
        savings > 0 ? `Ahorras ${savings.toFixed(2)}€ frente al supermercado más caro` : 'Los precios son muy similares entre supermercados',
        ...(healthyCount > 0 ? [`${healthyCount} productos saludables en tu lista`] : [])
      ]
    };
  }, [products, savings, calculationResult]);

  // Historical comparison calculation
  // Historical comparison disabled — no real price_history data available yet.
  // When real historical data exists, query price_history table here.
  const historicalComparison = null;

  // ============================================================================
  // 🛒 HANDLER: CLICK EN SUPERMERCADO PARA REDIRIGIR
  // ============================================================================
  const handleSupermarketClick = (result: SupermarketResult, source: 'hero' | 'card' = 'card') => {
    // Analytics tracking
    trackSupermarketRedirect(
      result.name,
      result.total,
      result.savings,
      result === cheapest,
      source
    );

    // Abrir modal de redirección
    setRedirectModal({
      isOpen: true,
      supermarket: {
        name: result.name,
        logo_url: result.logo_url || '',
        color: getSupermarketColor(result.name)
      }
    });
  };

  const handleVariantChange = (productId: string, variant: SelectedVariant) => {
    setSelectedVariant(productId, variant);
    logger.log("Variant selected:", productId, variant);
  };

  const handleSaveToList = async () => {
    const cheapest = filteredResults[0];
    if (!cheapest) return;

    try {
      const { data: { session } } = await supabase.auth.getSession();
      if (!session) {
        toast.error("Inicia sesión", {
          description: "Debes iniciar sesión para guardar listas",
        });
        navigate("/auth");
        return;
      }

      const { data: householdMember } = await supabase
        .from('household_members')
        .select('household_id')
        .eq('user_id', session.user.id)
        .maybeSingle();

      const simplifiedProducts = products.map((p: any) => {
        const variantInfo = selectedVariants[p.id];
        return {
          id: p.id,
          name: p.name,
          brand: p.brand || "",
          format: p.format || "",
          image_url: p.image_url || "",
          base_price: variantInfo?.finalPrice || p.base_price || 0,
          category: p.category || "",
          is_healthy: p.is_healthy || false,
          is_white_label: p.is_white_label || false,
          selected_variant: variantInfo || null,
        };
      });

      const listName = `Lista del ${new Date().toLocaleDateString()}`;
      const { error } = await supabase.from("shopping_lists").insert([{
        user_id: session.user.id,
        household_id: householdMember?.household_id || null,
        name: listName,
        products: simplifiedProducts as any,
        is_favorite: false,
        is_shared: !!householdMember?.household_id,
        total_savings: cheapest.total || 0
      }]);

      if (error) throw error;

      logger.log("List saved:", listName, products.length, "products");

      toast.success("¡Lista guardada!", {
        description: `${products.length} productos guardados con éxito`,
      });
      
      navigate("/my-list");
    } catch (error) {
      reportError(error, { context: 'saveList' });
      toast.error("Error", {
        description: "No se pudo guardar la lista",
      });
    }
  };

  // Loading state with skeleton
  if (isLoading || (products.length > 0 && calculationResult.loading)) {
    return (
      <div className="min-h-screen bg-background pb-20">
        <PageContainer>
          <div className="mb-6 flex items-center gap-4">
            <Button variant="ghost" size="icon" onClick={() => navigate("/")}>
              <ArrowLeft className="w-5 h-5" />
            </Button>
            <div>
              <h1 className="text-2xl font-bold">Comparando precios...</h1>
              <p className="text-muted-foreground">
                {isMultiSearch
                  ? `Comparando productos en 8 supermercados...`
                  : "Calculando los mejores precios..."}
              </p>
            </div>
          </div>
          <ResultsSkeleton />
        </PageContainer>
        <NavBar />
      </div>
    );
  }

  // Multi-search results view
  if (isMultiSearch && multiSearchResults) {
    return (
      <div className="min-h-screen bg-background pb-20">
        <header className="sticky top-0 z-50 w-full border-b bg-card/95 backdrop-blur">
          <div className="container flex h-16 items-center px-4">
            <Button variant="ghost" onClick={() => navigate("/")} className="gap-2">
              <ArrowLeft className="w-4 h-4" />
              Nueva búsqueda
            </Button>
            <h1 className="ml-4 text-lg font-bold">Comparación Multi-Producto</h1>
          </div>
        </header>

        <div className="container max-w-6xl mx-auto p-4 md:p-6">
          <MultiProductResults
            products={multiSearchResults.products}
            supermarketTotals={multiSearchResults.supermarketTotals}
            searchedTerms={multiSearchResults.searchedTerms}
            notFoundTerms={multiSearchResults.notFoundTerms}
          />
        </div>

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

  // ✅ Variables ya calculadas antes de los returns condicionales
  const productNames = products.map((p: any) => p.name).slice(0, 3).join(", ");
  const seoTitle = queryParam
    ? `Precio ${queryParam} — Comparar en ${filteredResults.length} supermercados | PriceHero`
    : `Comparar precios de ${products.length} productos | PriceHero`;
  const seoDesc = queryParam
    ? `Encuentra ${queryParam} al mejor precio. Compara entre Mercadona, Carrefour, Lidl y más supermercados españoles.`
    : `Compara precios de ${productNames} en ${filteredResults.length} supermercados. Ahorra en tu cesta de la compra.`;

  const productJsonLd = products.length > 0 && cheapest ? {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": queryParam || productNames,
    "description": seoDesc,
    "offers": {
      "@type": "AggregateOffer",
      "lowPrice": cheapest.total.toFixed(2),
      "highPrice": mostExpensive?.total.toFixed(2),
      "priceCurrency": "EUR",
      "offerCount": filteredResults.length,
    }
  } : undefined;

  return (
    <div className="min-h-screen bg-background">
      <SEOHead
        title={seoTitle}
        description={seoDesc}
        canonicalPath={queryParam ? `/results?query=${encodeURIComponent(queryParam)}` : undefined}
        jsonLd={productJsonLd}
      />
      <div className="max-w-7xl mx-auto p-4 space-y-6 pb-20">
        <ResultsHeader productCount={products.length} isPremium={isPremium} />

        {/* Premium Celebration Animation */}
        {showCelebration && isPremium && (
          <CelebrationAnimation 
            type={savings > 20 ? "crown" : "sparkles"}
            duration={3000}
            onComplete={() => setShowCelebration(false)}
          />
        )}
        
        {/* ✅ FIX 4: Mostrar filtros solo si hay resultados */}
        {filteredResults.length > 0 && (
          <ResultsFilters
            filterLocal={filterLocal}
            filterFullCoverage={filterFullCoverage}
            sortBy={sortBy}
            onLocalFilterChange={setFilterLocal}
            onCoverageFilterChange={setFilterFullCoverage}
            onSortChange={setSortBy}
          />
        )}

        {/* ✅ FIX 4: Mostrar acciones solo si hay resultados */}
        {filteredResults.length > 0 && (
          <ResultsActions
            products={products}
            cheapestSupermarket={cheapest}
            onSaveToList={handleSaveToList}
          />
        )}

        {/* ✅ FIX 4: Hero card condicional */}
        {cheapest && insights && filteredResults.length > 0 && (
            <ResultsHeroCard
              cheapest={cheapest}
              insights={insights}
              historicalComparison={historicalComparison}
              qualityReport={calculationResult.qualityReport}
              tieAnalysis={insights.tieAnalysis}
              onBuyClick={() => handleSupermarketClick(cheapest as SupermarketResult, 'hero')}
            />
        )}

        {/* ✅ FIX 4: Mensaje cuando no hay resultados */}
        {filteredResults.length === 0 && products.length > 0 && (
          <Card className="p-8 text-center">
            <div className="space-y-4">
              <div className="w-16 h-16 mx-auto rounded-full bg-muted flex items-center justify-center">
                <span className="text-3xl">🔍</span>
              </div>
              <h3 className="text-lg font-semibold">No se pudieron comparar precios</h3>
              <p className="text-muted-foreground max-w-md mx-auto">
                Los productos seleccionados no tienen precios actualizados en nuestros supermercados. 
                Estamos trabajando para actualizar nuestros datos.
              </p>
              <Button 
                onClick={() => navigate("/")} 
                className="mt-4"
              >
                Buscar otros productos
              </Button>
            </div>
          </Card>
        )}

        {/* Tabs completas con gráficos y tablas */}
        {filteredResults.length > 0 && (
          <Tabs defaultValue="list" className="w-full">
            <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
              <TabsTrigger value="list">Lista</TabsTrigger>
              <TabsTrigger value="graphics">Gráficos</TabsTrigger>
              <TabsTrigger value="table">Tabla</TabsTrigger>
              <TabsTrigger value="insights">Análisis</TabsTrigger>
            </TabsList>

            <TabsContent value="list" className="mt-4 md:mt-6 space-y-4">
              <SupermarketCardList 
                results={filteredResults}
                maxSavings={savings}
                onSelectSupermarket={(result) => handleSupermarketClick(result, 'card')}
              />
            </TabsContent>

            <TabsContent value="graphics" className="mt-4 md:mt-6 space-y-4 md:space-y-6">
              <ResultsChart results={filteredResults} />
              <CategoryDistributionChart products={products} />
              <SavingsProjectionChart monthlySavings={savings * 4} />
            </TabsContent>

            <TabsContent value="table" className="mt-4 md:mt-6 space-y-4 md:space-y-6">
              <ProductComparisonTable 
                products={products}
                results={filteredResults}
              />
              <ComparisonSummaryTable 
                results={filteredResults}
                products={products}
              />
            </TabsContent>

            <TabsContent value="insights" className="mt-4 md:mt-6 space-y-4 md:space-y-6">
              <PriceInsightCards results={filteredResults} products={products} savings={savings} />
              {insights && <ResultsInsightsPanel insights={insights} results={filteredResults} />}
            </TabsContent>
          </Tabs>
        )}
      </div>
      
        {/* Ad Slot */}
        <AdSlot placement="results_sidebar" />

      <SupermarketRedirectModal 
        isOpen={redirectModal.isOpen}
        onClose={() => setRedirectModal({ isOpen: false, supermarket: null })}
        supermarket={redirectModal.supermarket}
      />
      
      <NavBar />
      <Footer />
    </div>
  );
};

export default Results;