import React, { useState } from 'react';
import { Box } from '@mui/material';
import BasicInformation from './contcet/BasicInformation';
import ContactInformation from './contcet/ContactInformation';
import BusinessHours from './contcet/BusinessHours';
import Equipment from './contcet/Equipment';
import TypeOfRestaurant from './contcet/TypeOfRestaurant';
import OperationalCapacity from './contcet/OperationalCapacity';
import SideProfile from './SideProfile';
import AccountProfile from '../Settings/AccountProfile'; 
import authService from '../../../services/authService';
import { useRestaurant } from '../../../contexts/RestaurantContext';
import ConfirmationDialog from './contcet/ConfirmationDialog';

const RestaurantProfile = () => {
  const { restaurantId } = useRestaurant();
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState({});
  const [modalOpen, setModalOpen] = useState(false);
  const [showSetting, setShowSetting] = useState(false);

  const updateFormData = (newData) =>
    setFormData((prev) => ({ ...prev, ...newData }));

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

    const payload = {
      restaurant_name: formData.restaurant_name || '',
      restaurant_type: formData.restaurant_type || '',
      Address: formData.Address || '',
      City: formData.City || '',
      Postal_code: formData.Postal_code || '',
      Phone: formData.Phone || '',
      Email: formData.Email || '',
      Operation_hour: formData.Operation_hour || '',
      closed_days: formData.closed_days || [],
      equipment: {
        ...formData.equipment   // ✅ أخذ جميع المعدات من Equipment مباشرة
      },
      Maximum_orders_per_day: formData.Maximum_orders_per_day || 0,
      Number_of_Cheff: formData.Number_of_Cheff || 0,
      Number_of_Waiters: formData.Number_of_Waiters || 0,
      Number_of_Cookers: formData.Number_of_Cookers || 0,
      host_type: formData.ownRestaurantType || '',
      collaboration_type: formData.collaborateRestaurantType || ''
    };

    try {
      const res = await authService.createRestaurantProfile(restaurantId, payload);
      if (res.success) {
        setModalOpen(true);

        // بعد 10 ثواني يغلق المودال ويظهر الـ AccountProfile
        setTimeout(() => {
          setModalOpen(false);
          setShowSetting(true);
        }, 10000); // ✅ صار 10 ثواني بدل 5
      } else {
        console.error("Profile creation failed:", res.message, res.errors);
      }
    } catch (error) {
      console.error(error);
    }
  };

  const steps = [
    <BasicInformation 
      key="step-0" 
      formData={formData} 
      updateFormData={updateFormData} 
      onNext={() => setCurrentStep((p) => p + 1)} 
    />,
    <ContactInformation 
      key="step-1" 
      formData={formData} 
      updateFormData={updateFormData} 
      onNext={() => setCurrentStep((p) => p + 1)} 
      onBack={() => setCurrentStep((p) => p - 1)} 
    />,
    <BusinessHours 
      key="step-2" 
      formData={formData} 
      updateFormData={updateFormData} 
      onNext={() => setCurrentStep((p) => p + 1)} 
      onBack={() => setCurrentStep((p) => p - 1)} 
    />,
    <Equipment 
      key="step-3" 
      formData={formData} 
      updateFormData={updateFormData} 
      onNext={() => setCurrentStep((p) => p + 1)} 
      onBack={() => setCurrentStep((p) => p - 1)} 
    />,
    <OperationalCapacity 
      key="step-4" 
      formData={formData} 
      updateFormData={updateFormData} 
      onNext={() => setCurrentStep((p) => p + 1)} 
      onBack={() => setCurrentStep((p) => p - 1)} 
    />,
    <TypeOfRestaurant 
      key="step-5" 
      formData={formData} 
      updateFormData={updateFormData} 
      onBack={() => setCurrentStep((p) => p - 1)} 
      onRegister={handleSubmit} 
    />
  ];

  return (
    <Box sx={{ display: 'flex', height: '100%', backgroundColor: '#F6F6F6', overflow: 'hidden' }}>
      
      {/* إظهار SideProfile فقط إذا لم يتم التحويل إلى AccountProfile */}
      {!showSetting && (
        <Box
          sx={{
            height: '100%',
            width: { md: '30%' },
            display: { xs: 'none', sm: 'none', md: 'block' },
            overflowY: 'auto',
            scrollbarWidth: 'none',
            '&::-webkit-scrollbar': { display: 'none' }
          }}
        >
          <Box sx={{ minHeight: '100%', pb: 15, pt: 1 }}>
            <SideProfile
              currentStepIndex={currentStep}
              onBack={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
            />
          </Box>
        </Box>
      )}

      <Box
        sx={{
          ml: { xs: 2, md: 3 },
          flexGrow: 1,
          height: '100%',
          pr: { sm: 2, md: 1 },
          pt: 1,
          mb: { sm: 20 },
          width: { md: '60%' },
          display: 'block',
          overflowY: 'auto',
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' }
        }}
      >
        <Box sx={{ minHeight: '100%', pb: 18 }}>
          {showSetting ? <AccountProfile /> : steps[currentStep]}
        </Box>
      </Box>

      {/* مودال بدون أزرار */}
      <ConfirmationDialog open={modalOpen} onClose={() => {}} hideButtons={true} />
    </Box>
  );
};

export default RestaurantProfile;