import React, { useState } from "react";

export default function OPCUAInterfaceSettings() {
  const [isEnabled, setIsEnabled] = useState(true);
  const [encryption, setEncryption] = useState("None");
  const [users, setUsers] = useState([
    { id: 1, username: "admin", password: "admin123" },
    { id: 2, username: "user1", password: "user123" },
  ]);
  const [newUser, setNewUser] = useState({ username: "", password: "" });

  const toggleServer = () => setIsEnabled(!isEnabled);
  const updateEncryption = (event) => setEncryption(event.target.value);
  const addUser = () => {
    if (newUser.username && newUser.password) {
      setUsers([...users, { id: users.length + 1, ...newUser }]);
      setNewUser({ username: "", password: "" });
    }
  };
  const removeUser = (id) => setUsers(users.filter((user) => user.id !== id));

  return (
    <div className="max-w-3xl mx-auto p-6 bg-gray-100 shadow-md rounded-lg">
      <h2 className="text-xl font-semibold mb-4">OPCUA Server Einstellungen</h2>

      {/* Server Aktivierung */}
      <div className="mb-4">
        <label className="flex items-center cursor-pointer">
          <input
            type="checkbox"
            checked={isEnabled}
            onChange={toggleServer}
            className="hidden"
          />
          <div
            className={`w-12 h-6 rounded-full transition-all ${
              isEnabled ? "bg-green-500" : "bg-gray-300"
            }`}
          ></div>
          <span className="ml-2 text-sm">
            {isEnabled ? "Aktiviert" : "Deaktiviert"}
          </span>
        </label>
      </div>

      {/* Verschlüsselung */}
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700">
          Verschlüsselung
        </label>
        <select
          value={encryption}
          onChange={updateEncryption}
          className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200"
        >
          <option value="None">Keine</option>
          <option value="Basic256">Basic256</option>
          <option value="Basic256Sha256">Basic256Sha256</option>
        </select>
      </div>

      {/* Benutzer & Passwörter */}
      <div className="mb-4">
        <h3 className="text-lg font-semibold mb-2">Benutzer</h3>
        <ul className="space-y-2">
          {users.map((user) => (
            <li
              key={user.id}
              className="p-2 bg-white shadow-sm rounded-md flex justify-between items-center"
            >
              <span className="font-medium">{user.username}</span>
              <span className="text-gray-600 ml-2">
                (Passwort: {user.password})
              </span>
              <button
                onClick={() => removeUser(user.id)}
                className="ml-4 text-red-500"
              >
                Löschen
              </button>
            </li>
          ))}
        </ul>
        <div className="mt-4">
          <input
            type="text"
            placeholder="Benutzername"
            value={newUser.username}
            onChange={(e) =>
              setNewUser({ ...newUser, username: e.target.value })
            }
            className="p-2 border rounded mr-2"
          />
          <input
            type="password"
            placeholder="Passwort"
            value={newUser.password}
            onChange={(e) =>
              setNewUser({ ...newUser, password: e.target.value })
            }
            className="p-2 border rounded mr-2"
          />
          <button
            onClick={addUser}
            className="bg-blue-500 text-white p-2 rounded"
          >
            Hinzufügen
          </button>
        </div>
      </div>
    </div>
  );
}