import React, { useState } from 'react';
import {
  Box,
  Typography,
  Grid,
  useTheme,
  useMediaQuery,
  IconButton,
  Skeleton
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import AddToPhotosIcon from '@mui/icons-material/AddToPhotos';
import InfoIcon from '@mui/icons-material/Info';
import { useRestaurant } from '../../../contexts/RestaurantContext';
import RestaurantDetailsModal from './RestaurantDetailsModal';
import authService from '../../../services/authService';
const RestaurantSelection = ({ restaurants = [], loading = false }) => {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down('sm')); 
  const navigate = useNavigate(); // استخدم navigate للتوجيه
  const { setRestaurantId } = useRestaurant();

  const [selectedRestaurant, setSelectedRestaurant] = useState(null);
  const [modalOpen, setModalOpen] = useState(false);

  const handleSelectRestaurant = (id) => {
    setRestaurantId(id);
    navigate('/dashboard');
  };

  const fetchRestaurantDetails = async (id) => {
    try {
      const result = await authService.getRestaurantById(id);
      if (result.success) {
        setSelectedRestaurant(result.data);
        setModalOpen(true);
      } else {
        alert(result.message || 'Failed to fetch restaurant details');
      }
    } catch (error) {
      console.error('Error fetching restaurant details:', error);
    }
  };

  // ✅ دالة التوجيه عند الضغط على زر الإنشاء
  const handleCreateClick = () => {
    navigate('/create-restaurant'); // توجه مباشرة إلى صفحة الإنشاء
  };
  return (
    <Box sx={{ py: 8, backgroundColor: '#FAFAFA', minHeight: '100vh' }}>
      {/* زر إنشاء مطعم */}
      <Grid container spacing={1} justifyContent={isSmall ? 'center' : 'flex-start'} pl={isSmall ? 0 : 2}>
        <Box
          onClick={handleCreateClick}
          sx={{
            p: 2,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center',
            borderRadius: 3,
            height: '100%',
            width: '100%',
            maxWidth: 250,
            maxHeight: 186,
            cursor: 'pointer',
            transition: 'transform 0.3s',
            backgroundColor: '#fff',
            ml: { xs: 0, sm: 8, md: 28 },
            '&:hover': { transform: 'translateY(-5px)' },
          }}
        >
          <Box sx={{ width: 52, height: 52, borderRadius: '50%', backgroundColor: '#F6F6F6', display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 1 }}>
            <AddToPhotosIcon sx={{ fontSize: 30, color: theme.palette.primary.main }} />
          </Box>

          <Typography fontWeight="600" variant="subtitle1" fontSize="1.25rem">
            Create New Restaurant
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Start from scratch and build your restaurant profile
          </Typography>
        </Box>
      </Grid>

      {/* قائمة المطاعم */}
      <Box sx={{ mt: 5, ml: { xs: 0, sm: 10, md: 30 } }}>
        <Typography variant="h6" fontWeight="bold" mb={3} textAlign={isSmall ? 'center' : 'flex-start'}>
          Existing Restaurants
        </Typography>

        {restaurants.length === 0 && !loading ? (
          <Typography textAlign={isSmall ? 'center' : 'flex-start'} color="text.secondary" fontSize="1rem">
            No restaurants found. Create one to get started.
          </Typography>
        ) : (
          <Grid container spacing={4} justifyContent={isSmall ? 'center' : 'flex-start'}>
            {(loading ? Array.from(new Array(3)) : restaurants).map((restaurant, index) => (
              <Grid key={restaurant?.id || index}>
                {loading ? (
                  <Skeleton variant="rectangular" width={230} height={162} sx={{ borderRadius: 3 }} />
                ) : (
                  <Box
                    sx={{
                      position: 'relative',
                      borderRadius: 3,
                      p: 3,
                      width: '230px',
                      height: '90%',
                      maxHeight: '162px',
                      transition: 'transform 0.2s',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      backgroundColor: '#fff',
                      cursor: 'pointer',
                      '&:hover': { transform: 'translateY(-3px)' },
                      mx: 'auto',
                    }}
                    onClick={() => handleSelectRestaurant(restaurant.id)}
                  >
                    {/* أيقونة فتح المودال */}
                    <IconButton
                      onClick={(e) => {
                        e.stopPropagation();
                        fetchRestaurantDetails(restaurant.id);
                      }}
                      sx={{
                        position: 'absolute',
                        top: 8,
                        right: 8,
                        backgroundColor: 'rgba(255,255,255,0.8)',
                        '&:hover': {
                          backgroundColor: 'rgba(255,255,255,1)',
                          transform: 'scale(1.1)',
                          transition: 'transform 0.2s'
                        },
                        zIndex: 2,
                        padding: 0.5
                      }}
                      size="small"
                    >
                      <InfoIcon fontSize="small" />
                    </IconButton>

                    {/* صورة المطعم */}
                    <Box
                      sx={{ width: 110, height: 100, overflow: 'hidden', border: '2px solid #e0e0e0', mb: 1.5, mx: 'auto' }}
                    >
                      <Box
                        component="img"
                        src={restaurant.image || '/images/default-restaurant.png'}
                        alt={restaurant.name}
                        sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
                      />
                    </Box>

                    {/* باقي الكارت */}
                    <Box sx={{ width: '100%' }}>
                      <Typography fontWeight="600" textAlign="center" fontSize="1.25rem" mb={0.5}>
                        {restaurant.name}
                      </Typography>

                      <Typography variant="body2" color="text.secondary" fontSize="0.9rem" textAlign="center" mb={1}>
                        {restaurant.location || ' '}
                      </Typography>
                    </Box>
                  </Box>
                )}
              </Grid>
            ))}
          </Grid>
        )}
      </Box>

      {/* مودال المطعم */}
      <RestaurantDetailsModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        restaurant={selectedRestaurant}
      />
    </Box>
  );
};

export default RestaurantSelection;