import React, { useState, useMemo } from 'react';
import { ShoppingBasket, Sparkles } from 'lucide-react';
import SearchBar from '@/components/grocery/SearchBar';
import CategoryFilter from '@/components/grocery/CategoryFilter';
import MealFilter from '@/components/grocery/MealFilter';
import ProductCard from '@/components/grocery/ProductCard';
import StatsBar from '@/components/grocery/StatsBar';
import CountrySelector from '@/components/grocery/CountrySelector';
import { samplePricesByCountry, countries } from '@/components/grocery/CountryData';

const PRODUCT_IMAGES = {
  "Organic Bananas": "https://images.unsplash.com/photo-1571771894821-ce9b6c11b08e?w=400",
  "Whole Milk (1 Gallon)": "https://images.unsplash.com/photo-1563636619-e9143da7973b?w=400",
  "Chicken Breast": "https://images.unsplash.com/photo-1604503468506-a8da13d82791?w=400",
  "Sourdough Bread": "https://images.unsplash.com/photo-1585478259715-876acc5be8eb?w=400",
  "Orange Juice (64oz)": "https://images.unsplash.com/photo-1621506289937-a8e4df240d0b?w=400",
  "Greek Yogurt": "https://images.unsplash.com/photo-1488477181946-6428a0291777?w=400",
  "Avocados (3 pack)": "https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?w=400",
  "Potato Chips": "https://images.unsplash.com/photo-1566478989037-eec170784d0b?w=400",
  "Frozen Pizza": "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=400",
  "Olive Oil (750ml)": "https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?w=400",
  "Paper Towels (6 pack)": "https://images.unsplash.com/photo-1583947215259-38e31be8751f?w=400",
  "Eggs (12 count)": "https://images.unsplash.com/photo-1582722872445-44dc5f7e3c8f?w=400",
  "Pancake Mix": "https://images.unsplash.com/photo-1528207776546-365bb710ee93?w=400",
  "Oatmeal (18oz)": "https://images.unsplash.com/photo-1517673400267-0251440c45dc?w=400",
  "Bacon (1 lb)": "https://images.unsplash.com/photo-1529193591184-b1d58069ecdd?w=400",
  "Cereal (Cheerios)": "https://images.unsplash.com/photo-1521483451569-e33803c0330c?w=400",
  "Deli Turkey (1 lb)": "https://images.unsplash.com/photo-1598103442097-8b74394b95c3?w=400",
  "Cheddar Cheese (8oz)": "https://images.unsplash.com/photo-1589881133825-b9085d4af8ea?w=400",
  "Tomato Soup (can)": "https://images.unsplash.com/photo-1547592166-23ac45744acd?w=400",
  "Ground Beef (1 lb)": "https://images.unsplash.com/photo-1551446591-142875a901a1?w=400",
  "Salmon Fillet (1 lb)": "https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?w=400",
  "Pasta (16oz)": "https://images.unsplash.com/photo-1551462147-37885acc36f1?w=400",
  "Garlic (3 bulbs)": "https://images.unsplash.com/photo-1540148426945-6cf22a6b2383?w=400",
  "Vanilla Ice Cream (48oz)": "https://images.unsplash.com/photo-1497034825429-c343d7c6a68f?w=400",
  "Chocolate Chips (12oz)": "https://images.unsplash.com/photo-1548907040-4baa42d10919?w=400",
  "Brownie Mix": "https://images.unsplash.com/photo-1606313564200-e75d5e30476c?w=400",
  "Whipped Cream (can)": "https://images.unsplash.com/photo-1565299507177-b0ac66763828?w=400",
};

const PRODUCT_CATEGORIES = {
  "Organic Bananas": "produce", "Whole Milk (1 Gallon)": "dairy",
  "Chicken Breast": "meat", "Sourdough Bread": "bakery",
  "Orange Juice (64oz)": "beverages", "Greek Yogurt": "dairy",
  "Avocados (3 pack)": "produce", "Potato Chips": "snacks",
  "Frozen Pizza": "frozen", "Olive Oil (750ml)": "pantry",
  "Paper Towels (6 pack)": "household", "Eggs (12 count)": "dairy",
  "Pancake Mix": "pantry", "Oatmeal (18oz)": "pantry",
  "Bacon (1 lb)": "meat", "Cereal (Cheerios)": "pantry",
  "Deli Turkey (1 lb)": "meat", "Cheddar Cheese (8oz)": "dairy",
  "Tomato Soup (can)": "pantry", "Ground Beef (1 lb)": "meat",
  "Salmon Fillet (1 lb)": "meat", "Pasta (16oz)": "pantry",
  "Garlic (3 bulbs)": "produce", "Vanilla Ice Cream (48oz)": "frozen",
  "Chocolate Chips (12oz)": "pantry", "Brownie Mix": "pantry",
  "Whipped Cream (can)": "dairy",
};

const PRODUCT_UNITS = {
  "Organic Bananas": "per lb", "Whole Milk (1 Gallon)": "gallon",
  "Chicken Breast": "per lb", "Sourdough Bread": "loaf",
  "Orange Juice (64oz)": "64 oz", "Greek Yogurt": "32 oz",
  "Avocados (3 pack)": "3 count", "Potato Chips": "10 oz",
  "Frozen Pizza": "each", "Olive Oil (750ml)": "750 ml",
  "Paper Towels (6 pack)": "6 rolls", "Eggs (12 count)": "dozen",
  "Pancake Mix": "32 oz", "Oatmeal (18oz)": "18 oz",
  "Bacon (1 lb)": "1 lb", "Cereal (Cheerios)": "18 oz",
  "Deli Turkey (1 lb)": "1 lb", "Cheddar Cheese (8oz)": "8 oz",
  "Tomato Soup (can)": "10.75 oz", "Ground Beef (1 lb)": "1 lb",
  "Salmon Fillet (1 lb)": "1 lb", "Pasta (16oz)": "16 oz",
  "Garlic (3 bulbs)": "3 count", "Vanilla Ice Cream (48oz)": "48 oz",
  "Chocolate Chips (12oz)": "12 oz", "Brownie Mix": "18 oz",
  "Whipped Cream (can)": "6.5 oz",
};

// Meal time classification
const MEAL_CATEGORIES = {
  breakfast: ["Eggs (12 count)", "Pancake Mix", "Oatmeal (18oz)", "Bacon (1 lb)", "Orange Juice (64oz)", "Greek Yogurt", "Whole Milk (1 Gallon)", "Cereal (Cheerios)", "Sourdough Bread", "Organic Bananas"],
  lunch: ["Sourdough Bread", "Deli Turkey (1 lb)", "Cheddar Cheese (8oz)", "Tomato Soup (can)", "Avocados (3 pack)", "Organic Bananas", "Potato Chips"],
  dinner: ["Chicken Breast", "Ground Beef (1 lb)", "Salmon Fillet (1 lb)", "Pasta (16oz)", "Frozen Pizza", "Olive Oil (750ml)", "Garlic (3 bulbs)", "Tomato Soup (can)"],
  dessert: ["Vanilla Ice Cream (48oz)", "Chocolate Chips (12oz)", "Brownie Mix", "Whipped Cream (can)"],
  snacks: ["Potato Chips", "Paper Towels (6 pack)", "Organic Bananas", "Avocados (3 pack)"],
};

export default function Home() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [selectedMeal, setSelectedMeal] = useState('all');
  const [selectedCountry, setSelectedCountry] = useState('US');

  const countryInfo = countries.find(c => c.code === selectedCountry);
  const priceData = samplePricesByCountry[selectedCountry] || samplePricesByCountry['US'];

  const items = useMemo(() => {
    return Object.entries(priceData).map(([name, prices]) => ({
      id: name,
      name,
      category: PRODUCT_CATEGORIES[name] || 'pantry',
      unit: PRODUCT_UNITS[name] || 'each',
      image_url: PRODUCT_IMAGES[name] || '',
      prices,
    }));
  }, [priceData]);

  const filteredItems = useMemo(() => {
    return items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
      const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
      const matchesMeal = selectedMeal === 'all' || (MEAL_CATEGORIES[selectedMeal] || []).includes(item.name);
      return matchesSearch && matchesCategory && matchesMeal;
    });
  }, [items, searchQuery, selectedCategory, selectedMeal]);

  const handleMealSelect = (meal) => {
    setSelectedMeal(meal);
    setSelectedCategory('all');
  };

  const handleCategorySelect = (cat) => {
    setSelectedCategory(cat);
    setSelectedMeal('all');
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
      {/* Hero Section */}
      <div className="relative overflow-hidden bg-gradient-to-br from-emerald-500 via-emerald-600 to-teal-600">
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iNCIvPjwvZz48L2c+PC9zdmc+')] opacity-50" />
        <div className="absolute top-4 right-4 sm:top-6 sm:right-6 z-20">
          <CountrySelector selectedCountry={selectedCountry} onSelect={setSelectedCountry} />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative">
          <div className="text-center">
            <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm rounded-full px-4 py-2 mb-6">
              <span className="text-lg">{countryInfo?.flag}</span>
              <Sparkles className="h-4 w-4 text-yellow-300" />
              <span className="text-white/90 text-sm font-medium">
                Comparing prices in {countryInfo?.name} ({countryInfo?.currency})
              </span>
            </div>
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-4 tracking-tight">
              Smart Grocery
              <br />
              <span className="text-emerald-200">Price Comparison</span>
            </h1>
            <p className="text-lg text-white/80 max-w-2xl mx-auto mb-10">
              Find the best deals on your favorite groceries. Compare prices from multiple stores and save money on every shopping trip.
            </p>
            <SearchBar value={searchQuery} onChange={setSearchQuery} />
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-slate-50 to-transparent" />
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10">
        <StatsBar items={items} />

        {/* Meal Time Filter */}
        <div className="mt-10">
          <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-3">Shop by Meal</h2>
          <MealFilter selected={selectedMeal} onSelect={handleMealSelect} />
        </div>

        {/* Category Filter */}
        <div className="mt-6 mb-8">
          <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-3">Shop by Category</h2>
          <CategoryFilter selected={selectedCategory} onSelect={handleCategorySelect} />
        </div>

        {/* Products Grid */}
        {filteredItems.length === 0 ? (
          <div className="text-center py-20">
            <ShoppingBasket className="h-16 w-16 text-slate-300 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-slate-700 mb-2">No items found</h3>
            <p className="text-slate-500">Try adjusting your search or filter</p>
          </div>
        ) : (
          <>
            <p className="text-sm text-slate-500 mb-4">{filteredItems.length} items found</p>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-16">
              {filteredItems.map((item) => (
                <ProductCard key={`${selectedCountry}-${item.id}`} item={item} currencySymbol={countryInfo?.symbol || '$'} />
              ))}
            </div>
          </>
        )}
      </div>

      <footer className="bg-slate-900 text-white py-12 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <ShoppingBasket className="h-6 w-6 text-emerald-400" />
            <span className="text-xl font-bold">GroceryCompare</span>
          </div>
          <p className="text-slate-400 text-sm">Compare prices and save money on your grocery shopping.</p>
        </div>
      </footer>
    </div>
  );
}