"use client"; //components/main/uebersicht/NetworkInfo.tsx
import React, { useEffect } from "react";
import Image from "next/image";
import { useSelector, useDispatch } from "react-redux";
import { RootState, AppDispatch } from "@/redux/store";
import { getSystemSettingsThunk } from "@/redux/thunks/getSystemSettingsThunk";
import { getOpcUaSettingsThunk } from "@/redux/thunks/getOpcUaSettingsThunk";

const NetworkInfo: React.FC = () => {
  const dispatch: AppDispatch = useDispatch();

  // ✅ OPC UA Daten laden, wenn Komponente angezeigt wird
  useEffect(() => {
    dispatch(getSystemSettingsThunk());
    dispatch(getOpcUaSettingsThunk());
  }, [dispatch]);
  // Werte direkt aus Redux holen
  const ip =
    useSelector((state: RootState) => state.systemSettingsSlice.ip) ||
    "Unbekannt";
  const subnet =
    useSelector((state: RootState) => state.systemSettingsSlice.subnet) ||
    "Unbekannt";
  const gateway =
    useSelector((state: RootState) => state.systemSettingsSlice.gateway) ||
    "Unbekannt";
  const opcUaZustandRaw = useSelector(
    (state: RootState) => state.opcuaSettingsSlice.opcUaZustand
  );

  // OPC-UA Zustand in lesbaren Text umwandeln
  const opcUaZustand =
    Number(opcUaZustandRaw) === 1
      ? "Server betriebsbereit"
      : Number(opcUaZustandRaw) === 0
      ? "Server außer Betrieb"
      : "Unbekannt";

  return (
    <div className="w-full flex-direction: row flex">
  <div className=" flex-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
        <div className="flex items-center space-x-4">
          <Image
            src="/images/IP-icon.svg"
            alt="IP Address"
            width={24}
            height={24}
            className="w-6 text-littwin-blue"
            priority
          />
          <div>
            <p className="text-xs text-[var(--color-fg-muted)]">
              IP-Adresse
            </p>
            <p className="text-sm font-medium text-[var(--color-fg)]">
              {ip}
            </p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <Image
            src="/images/subnet-mask.svg"
            alt="subnet mask"
            width={24}
            height={24}
            className="w-6"
            priority
          />
          <div>
            <p className="text-xs text-[var(--color-fg-muted)]">
              Subnet-Maske
            </p>
            <p className="text-sm font-medium text-[var(--color-fg)]">
              {subnet}
            </p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <Image
            src="/images/gateway.svg"
            alt="gateway"
            width={24}
            height={24}
            className="w-6"
            priority
          />
          <div>
            <p className="text-xs text-[var(--color-fg-muted)]">Gateway</p>
            <p className="text-sm font-medium text-[var(--color-fg)]">
              {gateway}
            </p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <div className="text-xs font-bold text-littwin-blue">OPC-UA</div>
          <div>
            <p className="text-xs text-[var(--color-fg-muted)]">Status</p>
            <p className="text-sm font-medium text-[var(--color-fg)]">
              {opcUaZustand}
            </p>
          </div>
        </div>
        {/* OPC UA Nodeset Name */}
        {/* 
       <div className="flex items-center space-x-4">
          <div>
            <p className="text-xs text-gray-500">Nodeset Name</p>
            <p className="text-sm font-medium text-gray-700">
              {opcUaNodesetName}
            </p>
          </div>
        </div>
*/}
      </div>
    </div>
  );
};

export default NetworkInfo;