import React, { useEffect, useState, useCallback } from "react";
import { CircularProgress, Box, useTheme, useMediaQuery, Skeleton } from "@mui/material";
import RestaurantProfile from "./RestaurantProfile";
import Setting from "../Settings/AccountProfile";
import authService from "../../../services/authService";
import { useRestaurant } from "../../../contexts/RestaurantContext";
import KitchPlusAppBar from "../AppBar";
import Sidebar from "../SideHome"
const drawerWidth = 230;

const RestaurantWrapper = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const { restaurantId } = useRestaurant();

  const [loading, setLoading] = useState(true);
  const [hasProfile, setHasProfile] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);

  const fetchProfile = useCallback(async () => {
    if (!restaurantId) {
      setLoading(false);
      return;
    }
    setLoading(true);
    try {
      const profile = await authService.getRestaurantProfile(restaurantId);
      setHasProfile(profile && Object.keys(profile).length > 0);
    } catch (error) {
      console.error("Error checking restaurant profile:", error);
      setHasProfile(false);
    } finally {
      setLoading(false);
    }
  }, [restaurantId]);

  useEffect(() => {
    fetchProfile();
  }, [fetchProfile]);

  useEffect(() => {
    const handleResize = () =>
      setSidebarOpen(window.innerWidth >= theme.breakpoints.values.md);
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [theme.breakpoints.values.md]);

  const handleDrawerToggle = () => setSidebarOpen(!sidebarOpen);

  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: "100%",
          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,
            overflowY: "auto",
            scrollbarWidth: "none",
            "&::-webkit-scrollbar": { display: "none" },
            pt: { xs: 2, sm: 3, md: 3 },
             pl: { xs: 2, sm: 3, md: 3 },
              pr: { xs: 2, sm: 3, md: 3 },
          }}
        >
          {loading ? (
            // Skeleton placeholder
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <Skeleton variant="rectangular" height={40} width="40%" />
              <Skeleton variant="rectangular" height={40} width="60%" />
              <Skeleton variant="rectangular" height={200} width="100%" />
              <Skeleton variant="rectangular" height={40} width="80%" />
            </Box>
          ) : hasProfile ? (
            <Setting />
          ) : (
            <RestaurantProfile refreshProfile={fetchProfile} />
          )}
        </Box>
      </Box>
    </Box>
  );
};

export default RestaurantWrapper;