import SystemStatusChart from "../../Charts/SystemStatusChart";
import TreeTable from "../UI/TreeTable";
import FlowChart from "../TreeChart/FlowChart";
import { getStatusColor } from "../TreeChart/dataUtils";
import MetricsAnalyzer from "./MetricsAnalyzer"; // Импортируем новый компонент

const TabContent = ({ activeTab, tabs, statusHistories, treeData1, tabContent, handleOpenTab }) => {
    const countStatuses = (data) => {
        const counts = { green: 0, yellow: 0, orange: 0, red: 0 };

        const countRecursive = (node) => {
            if (node.status) {
                counts[node.status]++;
            }
            if (node.items && node.items.length > 0) {
                node.items.forEach(child => countRecursive(child));
            }
        };

        countRecursive(data);
        return counts;
    };

    if (activeTab === "Главная") {
        const statusCounts = treeData1 ? countStatuses(treeData1) : { green: 0, yellow: 0, orange: 0, red: 0 };

        return (
            <div>
                <h2 style={{ textAlign: 'center' }}>Общий мониторинг состояния системы</h2>
                <div>
                    <div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
                        <label>Надежность системы</label>
                        <SystemStatusChart data={statusHistories.history1} />
                    </div>
                    <div style={{ display: 'inline-block', width: '48%' }}>
                        <label>Функциональность системы</label>
                        <SystemStatusChart data={statusHistories.history2} />
                    </div>
                </div>

                {/* Контейнер для индикаторов статусов */}
                <div style={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                    marginTop: '20px',
                    gap: '10px'
                }}>
                    {Object.entries(statusCounts).map(([status, count]) => (
                        <div key={status} style={{
                            width: '30px',
                            height: '30px',
                            backgroundColor: getStatusColor(status),
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            color: 'white',
                            fontWeight: 'bold',
                            borderRadius: '5px',
                            boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
                        }}>
                            {count}
                        </div>
                    ))}
                </div>

                <label>Статус компонентов системы</label>
                <TreeTable data={treeData1} />

                {/* Добавляем кнопку анализа 
                <MetricsAnalyzer />*/}
            </div>
        );
    } else if (activeTab === "Визуализация") {
        return <FlowChart data={treeData1} onNodeClick={(id, title) => handleOpenTab(id, title)} />;
    } else {
        const tabData = tabs.find(t => t.id === activeTab);
        return tabData ? tabData.content : <p>Нет данных</p>;
    }
};

export default TabContent;