import React, { useState, useEffect } from "react";
import { Box, styled } from "@mui/material";
import { statusManager1, statusManager2 } from "../TreeChart/dataUtils";
import generateTabContent from "../TreeChart/tabContent";
import CustomTabs from "../UI/MUItabs";
import useTabs from "../hooks/useTabs";
import useSidebarResize from "../hooks/useSidebarResize";
import TabContent from "../hooks/TabContent";
import menuData from "../TreeChart/menuData.json";
import SidebarMenuWrapper from "./SidebarMenuWrapper";

// Создаем стилизованные компоненты
const DashboardContainer = styled(Box)(({ theme }) => ({
  display: 'flex',
  height: '100vh',
  width: '100vw',
  overflow: 'hidden',
  backgroundColor: theme.palette.background.default,
  color: theme.palette.text.primary,
}));

const MainContent = styled(Box)(({ theme }) => ({
  flexGrow: 1,
  display: 'flex',
  flexDirection: 'column',
  padding: theme.spacing(2.5),
  overflow: 'auto',
  backgroundColor: theme.palette.background.default,
}));

const Content = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.custom.modalBackground,
  borderRadius: '10px',
  maxWidth: '100%',
  overflow: 'auto',
  color: theme.palette.custom.modalText,
}));

const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
  const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
  const [tabContent, setTabContent] = useState({});
  const [treeData1, setTreeData1] = useState(menuData);
  const [treeData2, setTreeData2] = useState(menuData);
  const [statusHistories, setStatusHistories] = useState({
    history1: [],
    history2: [],
  });

  useEffect(() => {
    const generatedTabContent = generateTabContent(menuData);
    setTabContent(generatedTabContent);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      const updatedData1 = JSON.parse(JSON.stringify(treeData1));
      const averageStatusValue1 = statusManager1.updateStatuses(updatedData1);
      const statusPercentage1 = Math.max(0, Math.min(100, averageStatusValue1 * 100));

      const updatedData2 = JSON.parse(JSON.stringify(treeData2));
      const averageStatusValue2 = statusManager2.updateStatuses(updatedData2);
      const statusPercentage2 = Math.max(0, Math.min(100, averageStatusValue2 * 100));

      setStatusHistories((prevHistories) => ({
        history1: [
          ...prevHistories.history1.slice(-29),
          { time: new Date().toLocaleTimeString(), status: statusPercentage1 },
        ],
        history2: [
          ...prevHistories.history2.slice(-29),
          { time: new Date().toLocaleTimeString(), status: statusPercentage2 },
        ],
      }));

      setTreeData1(updatedData1);
      setTreeData2(updatedData2);
    }, 30000);

    return () => clearInterval(interval);
  }, [treeData1, treeData2]);

  const handleMenuSelect = (item) => {
    const tabId = `tab_${item.id}`;
    const tabTitle = item.title || 'Новая вкладка';

    const generateTabContentForItem = (item) => {
      return (
        <Box p={2}>
          <Typography variant="h6">{item.title}</Typography>
          {item.description && (
            <Typography color="textSecondary">{item.description}</Typography>
          )}
          {item.metric && (
            <Box mt={2}>
              <Typography variant="subtitle1">Метрика: {item.metric}</Typography>
              {/* Здесь можно добавить визуализацию метрики */}
            </Box>
          )}
        </Box>
      );
    };

    // Проверяем, существует ли уже такая вкладка
    const existingTab = tabs.find(tab => tab.id === tabId);

    if (!existingTab) {
      const newTab = {
        id: tabId,
        title: tabTitle,
        content: generateTabContentForItem(item),
        type: 'menuItem',
        itemData: item // Сохраняем данные элемента для возможного обновления
      };

      handleOpenTab(newTab);
    } else {
      setActiveTab(tabId);
    }
  };

  return (
    <DashboardContainer>
      {/* Сайдбар - теперь используется SidebarMenuWrapper */}
      <SidebarMenuWrapper
        isDarkMode={isDarkMode}
        setIsDarkMode={setIsDarkMode}
        onSelectItem={handleMenuSelect}
      />

      {/* Основной контент */}
      <Box sx={{
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 1,
        overflow: 'hidden'
      }}>
        {/* Вкладки */}
        <Box sx={{
          borderBottom: 1,
          borderColor: 'divider',
          backgroundColor: 'background.default',
          zIndex: 1,
          transform: 'translateY(3px)'
        }}>
          <CustomTabs
            tabs={tabs}
            activeTab={activeTab}
            onTabClick={setActiveTab}
            onCloseTab={handleCloseTab}
          />
        </Box>

        {/* Остальной контент */}
        <MainContent>
          {/* Контент вкладки */}
          <Content>
            <TabContent
              activeTab={activeTab}
              statusHistories={statusHistories}
              treeData1={treeData1}
              tabContent={tabContent}
              handleOpenTab={handleOpenTab}
            />
          </Content>
        </MainContent>
      </Box>
    </DashboardContainer>
  );
};

export default Dashboard;