CPLv4.0/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx

"use client"; // /components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
import React, { useState } from "react";
import Image from "next/image";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../redux/store";
import { toggleOpcUaServer } from "../../../redux/slices/opcuaSettingsSlice";

export default function OPCUAInterfaceSettings() {
  const dispatch = useDispatch();
  const opcuaSettings = useSelector(
    (state: RootState) => state.opcuaSettingsSlice
  );

  // Anzahl der aktuellen OPC-Clients (Mock, bis Backend liefert)
  const opcUaActiveClientCount = opcuaSettings.opcUaActiveClientCount ?? 3; // 3 als Beispielwert

  // Lokale Zustände für das neue Benutzerformular

  const [nodesetName, setNodesetName] = useState(
    opcuaSettings.opcUaNodesetName
  );

  return (
    <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]">
      <div className="flex justify-between items-center mb-3">
        <Image
          src="/images/OPCUA.jpg"
          alt="OPCUA Logo"
          width={48}
          height={48}
          className="h-12 w-auto"
        />
        <Image
          src="/images/OPCUA.jpg"
          alt="OPCUA Logo"
          width={48}
          height={48}
          className="h-12 w-auto"
        />
      </div>

      {/* ✅ Server Aktivierung */}
      <div className="mb-3 flex flex-wrap items-center">
        <label className="mr-3 font-medium text-sm">Server Status:</label>
        <button
          onClick={() => dispatch(toggleOpcUaServer())}
          className={`px-3 py-1 rounded text-sm font-medium transition-colors text-white ${
            opcuaSettings.isEnabled
              ? "bg-accent hover:brightness-110"
              : "bg-[var(--color-muted)] hover:bg-[var(--color-fg)]/20"
          }`}
        >
          {opcuaSettings.isEnabled ? "Aktiviert" : "Deaktiviert"}
        </button>
      </div>

      {/* ✅ Verschlüsselung */}

      {/* 
                 <div className="mb-3">
        <label className="block font-medium text-sm mb-1">
          Verschlüsselung
        </label>
        <select
          value={opcuaSettings.encryption}
          onChange={(e) => dispatch(setOpcUaEncryption(e.target.value))}
          className="w-full p-1 border border-base rounded-md text-sm bg-[var(--color-surface)] text-[var(--color-fg)]"
        >
          <option value="None">Keine</option>
          <option value="Basic256">Basic256</option>
          <option value="Basic256Sha256">Basic256Sha256</option>
        </select>
      </div>
           */}

      {/* ✅ OPCUA Zustand */}
      <div className="mb-3">
        <label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
        <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
          {opcuaSettings.opcUaZustand}
        </div>
      </div>

      {/* ✅ Nodeset Name */}
      <div className="mb-3">
        <label className="block font-medium text-sm mb-1">Nodeset Name</label>
        <div className="flex">
          <input
            type="text"
            className="flex-grow p-1 border border-base rounded-l-md text-sm bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none"
            value={nodesetName}
            onChange={(e) => setNodesetName(e.target.value)}
            disabled={opcuaSettings.isEnabled} // Disable input when server is enabled
          />
          {/*
            <button
              onClick={handleNodesetUpdate}
              className="px-3 py-1 bg-littwin-blue text-white rounded-r-md text-sm"
            >
              Übernehmen
            </button>
          */}
        </div>
      </div>

      {/* ✅ Anzahl der aktuellen OPC-Clients */}
      <div className="mb-3">
        <label className="block font-medium text-sm mb-1">
          Aktuelle OPC-Clients
        </label>
        <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
          {opcUaActiveClientCount}
        </div>
      </div>

      {/* ✅ Benutzerverwaltung */}
      {/* 
       
             <div className="mb-3">
        <h3 className="text-base font-semibold mb-2">Benutzer</h3>
        <ul className="space-y-1">
          {opcuaSettings.users.map((user) => (
            <li
              key={user.id}
              className="p-1 bg-[var(--color-surface)] border border-base rounded-md flex justify-between items-center text-sm text-[var(--color-fg)]"
            >
              <span className="font-medium">{user.username}</span>
              <button
                onClick={() => dispatch(removeOpcUaUser(user.id))}
                className="text-danger hover:underline"
              >
                Löschen
              </button>
            </li>
          ))}
        </ul>

    
        <div className="mt-2 flex flex-wrap gap-2">
          <input
            type="text"
            placeholder="Benutzername"
            value={newUsername}
            onChange={(e) => setNewUsername(e.target.value)}
            className="p-1 border border-base rounded flex-grow text-sm bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] focus:outline-none focus:border-accent"
          />
          <input
            type="password"
            placeholder="Passwort"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            className="p-1 border border-base rounded flex-grow text-sm bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] focus:outline-none focus:border-accent"
          />
          <button
            onClick={handleAddUser}
            className="btn-primary p-1 rounded text-sm"
          >
            Hinzufügen
          </button>
        </div>
      </div>
       
       */}
    </div>
  );
}