import TreeTable from "../UI/TreeTable";
import FlowChart from "../TreeChart/FlowChart";
import { getStatusColor } from "../TreeChart/dataUtils";
import SystemChart from "../../Charts/SystemChart";

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));
            }
        };

        if (data) countRecursive(data);
        return counts;
    };

    if (activeTab === "Главная") {
        const statusCounts = countStatuses(treeData1);

        // Конфигурация для метрики серверов (с несколькими линиями)
        const serverMetric = {
            name: "zvks_server_li",
            title: "Надежность системы",
            description: "Уровень надежности системы",
            multipleLines: true,
            lineKey: "device",
            ranges: [
                { value: 15, color: 'green', label: 'Оптимально' },
                { value: 10, color: 'orange', label: 'Предупреждение' },
                { value: 5, color: 'red', label: 'Критично' }
            ]
        };

        // Конфигурация для метрики приложений (одна линия)
        const appMetric = {
            name: "zvks_application_li",
            title: "Функциональность системы",
            description: "Уровень функциональности  системы",
            multipleLines: false
        };

        return (
            <div>
                <h2 style={{ textAlign: 'center' }}>Общий мониторинг состояния системы</h2>
                <div>
                    <div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
                        <label>Надежность серверов</label>
                        <SystemChart
                            metricInfo={serverMetric}
                            chartHeight={580}
                        />
                    </div>
                    <div style={{ display: 'inline-block', width: '48%' }}>
                        <label>Функциональность приложений</label>
                        <SystemChart
                            metricInfo={appMetric}
                            chartHeight={580}
                        />
                    </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} />
            </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;