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

"use client";
import React, { useState } from "react";
import { RootState } from "../../../redux/store";
import { useSelector } from "react-redux";
import handleClearDatabase from "../../header/settingsModal/handlers/handleClearDatabase";
import handleReboot from "../../header/settingsModal/handlers/handleReboot";
import handleSetDateTime from "../../header/settingsModal/handlers/handleSetDateTime";
import handleSubmit from "../../header/settingsModal/handlers/handleSubmit";

const GeneralSettings = () => {
  const systemSettings = useSelector(
    (state: RootState) => state.systemSettings
  );

  const [name, setName] = useState(systemSettings.deviceName || "");
  const [ip, setIp] = useState(systemSettings.ip || "");
  const [subnet, setSubnet] = useState(systemSettings.subnet || "");
  const [gateway, setGateway] = useState(systemSettings.gateway || "");
  const [systemUhr, setSystemUhr] = useState(
    systemSettings.cplInternalTimestamp || ""
  );
  const [ntp1, setNtp1] = useState(systemSettings.ntp1 || "");
  const [ntp2, setNtp2] = useState(systemSettings.ntp2 || "");
  const [ntp3, setNtp3] = useState(systemSettings.ntp3 || "");
  const [ntpTimezone, setNtpTimezone] = useState(
    systemSettings.ntpTimezone || ""
  );
  const [active, setActive] = useState(systemSettings.ntpActive || false);

  return (
    <div className="p-2 bg-gray-100">
      <h2 className="text-md font-bold mb-2">General Settings</h2>
      <form className="grid grid-cols-2 gap-2">
        {/* ✅ Geräte-Name */}
        <div className="col-span-2">
          <label className="block text-xs font-medium">Name:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>

        {/* ✅ Netzwerk-Einstellungen */}
        <div>
          <label className="block text-xs font-medium">IP:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={ip}
            onChange={(e) => setIp(e.target.value)}
          />
        </div>
        <div>
          <label className="block text-xs font-medium">Subnet:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={subnet}
            onChange={(e) => setSubnet(e.target.value)}
          />
        </div>
        <div>
          <label className="block text-xs font-medium">Gateway:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={gateway}
            onChange={(e) => setGateway(e.target.value)}
          />
        </div>

        {/* ✅ System-Zeit */}
        <div className="col-span-2 flex items-center gap-2">
          <div className="flex-1">
            <label className="block text-xs font-medium">Systemzeit:</label>
            <input
              type="text"
              className="border border-gray-300 rounded p-1 w-full text-sm"
              value={systemUhr}
              disabled
            />
          </div>
          <button
            type="button"
            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
            onClick={() => handleSetDateTime()}
          >
            Setzen
          </button>
        </div>

        {/* ✅ NTP-Server */}
        <div>
          <label className="block text-xs font-medium">NTP Server 1:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={ntp1}
            onChange={(e) => setNtp1(e.target.value)}
          />
        </div>
        <div>
          <label className="block text-xs font-medium">NTP Server 2:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={ntp2}
            onChange={(e) => setNtp2(e.target.value)}
          />
        </div>
        <div>
          <label className="block text-xs font-medium">NTP Server 3:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={ntp3}
            onChange={(e) => setNtp3(e.target.value)}
          />
        </div>
        <div>
          <label className="block text-xs font-medium">Zeitzone:</label>
          <input
            type="text"
            className="border border-gray-300 rounded p-1 w-full text-sm"
            value={ntpTimezone}
            onChange={(e) => setNtpTimezone(e.target.value)}
          />
        </div>
        <div className="col-span-2 flex items-center gap-2">
          <input
            id="ntpActive"
            type="checkbox"
            className="peer hidden"
            checked={active}
            onChange={(e) => setActive(e.target.checked)}
          />
          <label
            htmlFor="ntpActive"
            className="w-5 h-5 border-2 border-gray-300 rounded cursor-pointer flex items-center justify-center 
              peer-checked:bg-littwin-blue peer-checked:border-littwin-blue peer-checked:text-white"
          >
            ✓
          </label>
          <span className="text-xs font-medium">NTP Aktiv</span>
        </div>

        {/* ✅ Buttons */}
        <div className="col-span-2 flex justify-between mt-2">
          <button
            type="button"
            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
            onClick={() => handleReboot()}
          >
            Neustart
          </button>
          <button
            type="button"
            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
            onClick={() => handleClearDatabase()}
          >
            Datenbank leeren
          </button>
          <button
            type="button"
            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
            onClick={() =>
              handleSubmit(
                {
                  name,
                  ip,
                  subnet,
                  gateway,
                  ntp1,
                  ntp2,
                  ntp3,
                  ntpTimezone,
                  active,
                },
                systemSettings
              )
            }
          >
            Speichern
          </button>
        </div>
      </form>
    </div>
  );
};

export default GeneralSettings;