import React, { useState } from "react";
import { ArrowDownTrayIcon, ArrowUpTrayIcon } from "@heroicons/react/24/outline";

export default function NetworkMonitor(args) {
    const [selectedTab, setSelectedTab] = useState("interfaces");
    const tabs = [
        { id: "interfaces", label: "Интерфейсы" },
        { id: "topology", label: "Топология сети" },
    ];
    const handleTabClick = (tabId) => {
        setSelectedTab(tabId);
    };

    const [NetIfaces, setNetIfaces] = useState(
        [
            {
                name: "Ethernet 6",
                wireless: false,
                mac: "FF-FF-FF-FF-FF-FF",
                ip: "192.168.2.5",
                mask: "255.255.255.0",
                mtu: 1500,
                speed_mbit: 2500,
                status: true,
                trafic_down_mb: 100,
                trafic_up_mb: 1000,

            },
            {
                name: "Wireles Adapter 1",
                wireless: true,
                mac: "F1-FF-0F-FF-1F-F0",
                ip: "192.168.1.5",
                mask: "255.255.255.0",
                mtu: 1500,
                speed_mbit: 0,
                status: false,
                trafic_down_mb: 35,
                trafic_up_mb: 2,

            }
        ]
    );
    return (
        <>
            <div className="flex justify-center md:justify-start">
                {/* Контейнер для вкладок */}
                <div className="flex p-2 bg-gray-100 dark:bg-gray-900 gap-2 rounded-lg shadow-sm">
                    {tabs.map((tab) => (
                        <button
                            key={tab.id}
                            onClick={() => handleTabClick(tab.id)}
                            className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100 font-semibold  ${selectedTab === tab.id
                                ? "bg-gray-200 dark:bg-gray-800 text-orange-600"
                                : "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-600 duration-300"
                                }`}
                        >
                            {tab.label}
                        </button>
                    ))}
                </div>
            </div>
            <div className="mt-6">
                {selectedTab === "interfaces" && (

                    <>
                        <div className="flex flex-wrap gap-2 flex-col anim-pop">
                            {NetIfaces.map((iface, index) => (
                                <div className="max-w-full md:max-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"iface" + index}>
                                    <div className="flex gap-3">
                                        {!iface.wireless &&
                                            <i className="fi fi-rr-ethernet text-2xl dark:text-gray-200"></i>
                                        }
                                        {iface.wireless &&
                                            <i className="fi fi-rr-wifi text-2xl dark:text-gray-200"></i>
                                        }

                                        <div>
                                            <div className="flex gap-3 items-center">
                                                <span className="block text-lg font-bold text-gray-800 dark:text-gray-200">{iface.name}</span>

                                                <span className={"h-3 w-3 " + (iface.status ? "bg-green-500" : "bg-red-500") + " rounded-full shadow-lg " + (iface.status ? "shadow-green-500/50" : "shadow-red-500/50") + " animate-pulse"} />
                                            </div>
                                            <span className="block text-sm font-normal text-gray-800 dark:text-gray-200"><span className="font-semibold">{iface.ip}</span> • <span className="text-gray-600 dark:text-gray-300">{iface.mac}</span></span>

                                            <div className="flex gap-5 items-center mt-3">
                                                <span className="flex gap-2 items-center">
                                                    <ArrowDownTrayIcon className="h-5 text-gray-700 dark:text-gray-300" />
                                                    <span className="text-gray-700 dark:text-gray-300">{iface.trafic_down_mb} МБ</span>
                                                </span>
                                                <span className="flex gap-2 items-center">
                                                    <ArrowUpTrayIcon className="h-5 text-gray-700 dark:text-gray-300" />
                                                    <span className="text-gray-700 dark:text-gray-300">{iface.trafic_up_mb} МБ</span>
                                                </span>
                                            </div>
                                            <span className="flex gap-2 items-center mt-1">
                                                <span className="text-gray-700 dark:text-gray-300">{iface.speed_mbit} Мбит/c</span>
                                            </span>
                                        </div>


                                    </div>
                                </div>
                            ))}
                        </div>
                    </>
                )}
            </div>
        </>
    );
}