import React, { useState, useEffect } from 'react';
import { useRestaurant } from '../../../contexts/RestaurantContext';
import OrderStatusCard from './OrderStatusCard';
import { Box, useTheme, useMediaQuery } from '@mui/material';
import authService from '../../../services/authService';
import dayjs from 'dayjs';

const AnalyticsPageOccupancy = () => {
  const { restaurantId } = useRestaurant();
  const [timeFrame, setTimeFrame] = useState('12m'); // '12m', '30d', '24h'
  const [customDate, setCustomDate] = useState(dayjs().format('YYYY-MM-DD'));
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [occupancyRate, setOccupancyRate] = useState(0);

  const fetchOccupancyRate = async () => {
    if (!restaurantId) return;

    let period = 'yearly';
    switch (timeFrame) {
      case '24h':
        period = 'daily';
        break;
      case '30d':
        period = 'monthly';
        break;
      case '12m':
      default:
        period = 'yearly';
        break;
    }

    try {
      const response = await authService.getOccupancyRate(
        restaurantId,
        period,
        customDate
      );

      if (response.success) {
        // occupancy_rate جايه كنص مثل "11.83%" → نحولها لرقم
        const rateValue = parseFloat(response.data.replace('%', '').trim());
        setOccupancyRate(rateValue);
      } else {
        setOccupancyRate(0);
      }
    } catch (error) {
      console.error(error);
      setOccupancyRate(0);
    }
  };

  useEffect(() => {
    fetchOccupancyRate();
  }, [timeFrame, restaurantId, customDate]);

  return (
    <Box pr={{ xs: 1, sm: 2 }} maxWidth="100%" overflowX="hidden">
      {/* Occupancy Card */}
      <Box>
        <OrderStatusCard
          title="Occupancy Rate"
          period={
            timeFrame === '24h'
              ? 'Today'
              : timeFrame === '30d'
              ? 'This Month'
              : 'This Year'
          }
          progress={occupancyRate} // نسبة الإشغال
          description={`Current occupancy rate is ${occupancyRate}% for selected period.`}
          timeFrame={timeFrame}
          setTimeFrame={setTimeFrame}
          customDate={customDate}
          setCustomDate={setCustomDate}
        />
      </Box>
    </Box>
  );
};

export default AnalyticsPageOccupancy;