import React, { useState, useEffect } from "react";
import { useAppDispatch } from "../redux/store";
import { setSystemSettings } from "../redux/slices/systemSettingsSlice";
import { loadWindowVariables } from "../utils/loadWindowVariables";
import GeneralSettings from "../components/main/settingsPageComponents/GeneralSettings";
import OPCUAInterfaceSettings from "../components/main/settingsPageComponents/OPCUAInterfaceSettings";

export default function Settings() {
  const [activeTab, setActiveTab] = useState("tab1");
  const dispatch = useAppDispatch();

  useEffect(() => {
    const loadSettings = async () => {
      const vars = await loadWindowVariables();
      if (!vars) return;

      const {
        deviceName,
        mac1,
        ip,
        subnet,
        gateway,
        cplInternalTimestamp,
        ntp1,
        ntp2,
        ntp3,
        ntpTimezone,
        ntpActive,
      } = vars;

      dispatch(
        setSystemSettings({
          deviceName,
          mac1,
          ip,
          subnet,
          gateway,
          cplInternalTimestamp,
          ntp1,
          ntp2,
          ntp3,
          ntpTimezone,
          ntpActive,
        })
      );
    };

    loadSettings();
  }, [dispatch]);

  return (
    <div className="p-4">
      {/* Tab-Navigation */}
      <div className="flex border-b border-gray-200">
        <button
          className={`px-4 py-2 ${
            activeTab === "tab1"
              ? "border-b-2 border-blue-500 text-blue-500"
              : ""
          }`}
          onClick={() => setActiveTab("tab1")}
        >
          Allgemeine Einstellungen
        </button>
        <button
          className={`px-4 py-2 ${
            activeTab === "tab2"
              ? "border-b-2 border-blue-500 text-blue-500"
              : ""
          }`}
          onClick={() => setActiveTab("tab2")}
        >
          OPCUA
        </button>
      </div>

      {/* Tab-Inhalt */}
      <div className="mt-4">
        {activeTab === "tab1" && <GeneralSettings />}
        {activeTab === "tab2" && <OPCUAInterfaceSettings />}
      </div>
    </div>
  );
}