import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome';
import AccountSettings from './contect/AccountSettings';
import MealsByCateg from './contect/MealsByCateg';
import AllMeals from './contect/AllMeals';
import ProductDetail from './contect/ProductDetail';
import authService from '../../../services/authService';
import { useRestaurant } from '../../../contexts/RestaurantContext';

const drawerWidth = 230;

const Meal = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
  const { restaurantId } = useRestaurant();

  const [showAllPopular, setShowAllPopular] = useState(false);
  const [categories, setCategories] = useState([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState(null);
  const [categoryName, setCategoryName] = useState('');
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [meals, setMeals] = useState([]);
  const [loadingMeals, setLoadingMeals] = useState(false);

  // جلب الفئات عند التحميل
  useEffect(() => {
    const fetchCategories = async () => {
      if (!restaurantId) return;
      const result = await authService.getCategoriesByRestaurant(restaurantId);
      if (result.success) setCategories(result.data);
      else setCategories([]);
    };
    fetchCategories();
  }, [restaurantId]);

  // تحديث اسم الفئة عند تغيير selectedCategoryId أو categories
  useEffect(() => {
    if (selectedCategoryId && categories.length > 0) {
      const selected = categories.find(c => c.id === selectedCategoryId);
      setCategoryName(selected ? selected.name : '');
    } else {
      setCategoryName('');
    }
  }, [selectedCategoryId, categories]);

  // جلب الوجبات عند اختيار الفئة
  useEffect(() => {
    const fetchMeals = async () => {
      if (selectedCategoryId && restaurantId) {
        setLoadingMeals(true);
        try {
          const result = await authService.getMealsByCategory(restaurantId, selectedCategoryId);
          if (result.success) {
            const selectedCategory = categories.find(c => c.id === selectedCategoryId);
            const mealsWithImages = result.data.map(meal => ({
              id: meal.id,
              name: meal.name,
              price: meal.price,
              unit: meal.unit || '/pcs',
              image: meal.photo || '/images/default-product.png',
              category: selectedCategory ? selectedCategory.name : '', // اسم الفئة
              category_id: meal.category_id,
              restaurant_id: meal.restaurant_id,
              description: meal.description || [],
              additions: meal.additions || []
            }));
            setMeals(mealsWithImages);
          } else setMeals([]);
        } catch (err) {
          console.error(err);
          setMeals([]);
        } finally {
          setLoadingMeals(false);
        }
      } else setMeals([]);
    };
    fetchMeals();
  }, [selectedCategoryId, restaurantId, categories]);

  const handleDrawerToggle = () => setSidebarOpen(!sidebarOpen);
  const toggleShowAllPopular = () => setShowAllPopular(prev => !prev);

  return (
    <Box sx={{ display: 'flex', height: '100vh', backgroundColor: '#F6F6F6', overflow: 'hidden' }}>
      <Sidebar
        open={sidebarOpen}
        onClose={handleDrawerToggle}
        isMobile={isMobile}
        drawerWidth={drawerWidth}
      />

      <Box
        sx={{
          flexGrow: 1,
          display: 'flex',
          flexDirection: 'column',
          width: '10%',
          marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
          transition: theme.transitions.create(['width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}
      >
        <KitchPlusAppBar
          onDrawerToggle={handleDrawerToggle}
          sidebarOpen={sidebarOpen}
          isMobile={isMobile}
        />

        <Box
          sx={{
            flexGrow: 1,
            width: sidebarOpen ? 'calc(100% - 40px)' : '100%',
            pt: { xs: 2, sm: 3 },
            overflowY: 'auto',
            pl: { xs: 1, sm: 2 },
            pr: { xs: 1, sm: 2 },
            md: 10,
            scrollbarWidth: 'none',
            '&::-webkit-scrollbar': { display: 'none' },
          }}
        >
          {selectedProduct ? (
            <ProductDetail
              product={selectedProduct}
              onBack={() => setSelectedProduct(null)}
            />
          ) : (
            <>
              <AccountSettings
                selectedCategory={selectedCategoryId}
                setSelectedCategory={setSelectedCategoryId}
                restaurantId={restaurantId}
              />

              {selectedCategoryId ? (
                <Box sx={{ mt: 3, md: 10, }}>
                
                    <MealsByCateg
                      categoryId={selectedCategoryId}
                      restaurantId={restaurantId}
                      categoryName={categoryName}
                      onBack={() => setSelectedCategoryId(null)}
                      onProductClick={(meal) => {
                        const category = categories.find(c => c.id === meal.category_id);
                        setSelectedProduct({
                          ...meal,
                          category: category ? category.name : '',
                          category_id: meal.category_id,
                          restaurant_id: restaurantId
                        });
                      }}
                    />
                  
                </Box>
              ) : !showAllPopular ? (
                <Box
                  sx={{
                    mt: 3,
                    display: 'flex',
                    flexDirection: { xs: 'column', md: 'row' },
                    alignItems: 'stretch',
                    gap: 2,
                  }}
                >
                  <Box
                    sx={{
                      flexBasis: { xs: '100%', md: '100%' },
                      display: 'flex',
                      flexDirection: 'column',
                      pb: { xs: 4, md: 4 },
                      pr: { xs: 1, md: 0 },
                      mb: 5,
                    }}
                  >
                    <AllMeals
                      restaurantId={restaurantId}
                      categories={categories}
                      showAll={showAllPopular}
                      onToggleShowAll={toggleShowAllPopular}
                      onProductClick={(meal) => {
                        const category = categories.find(c => c.id === meal.category_id);
                        setSelectedProduct({
                          ...meal,
                          category: category ? category.name : '',
                          category_id: meal.category_id,
                          restaurant_id: restaurantId
                        });
                      }}
                    />
                  </Box>
                </Box>
              ) : null}
            </>
          )}
        </Box>
      </Box>
    </Box>
  );
};

export default Meal;