// components/main/settingsPageComponents/SettingsView.tsx
"use client";

import React, { useEffect, useState } from "react";
import { useAppDispatch } from "@/redux/store";
import { getSystemSettingsThunk } from "@/redux/thunks/getSystemSettingsThunk";
import GeneralSettings from "./GeneralSettings";
import OPCUAInterfaceSettings from "./OPCUAInterfaceSettings";
import DatabaseSettings from "./DatabaseSettings";
import NTPSettings from "./NTPSettings";
import UserManagementSettings from "./UserManagementSettings";

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

  useEffect(() => {
    dispatch(getSystemSettingsThunk());
  }, [dispatch]);

  return (
    <div className="p-4">
      <div className="flex border-b border-gray-200">
        <button
          className={`px-4 py-2 ${
            activeTab === "tab1"
              ? "border-b-2 border-littwin-blue text-littwin-blue"
              : ""
          }`}
          onClick={() => setActiveTab("tab1")}
        >
          Allgemeine Einstellungen
        </button>
        <button
          className={`px-4 py-2 ${
            activeTab === "tab2"
              ? "border-b-2 border-littwin-blue text-littwin-blue"
              : ""
          }`}
          onClick={() => setActiveTab("tab2")}
        >
          OPCUA
        </button>
        <button
          className={`px-4 py-2 ${
            activeTab === "tab3"
              ? "border-b-2 border-littwin-blue text-littwin-blue"
              : ""
          }`}
          onClick={() => setActiveTab("tab3")}
        >
          Datenbank
        </button>
        <button
          className={`px-4 py-2 ${
            activeTab === "tab4"
              ? "border-b-2 border-littwin-blue text-littwin-blue"
              : ""
          }`}
          onClick={() => setActiveTab("tab4")}
        >
          NTP
        </button>
        <button
          className={`px-4 py-2 ${
            activeTab === "tab5"
              ? "border-b-2 border-littwin-blue text-littwin-blue"
              : ""
          }`}
          onClick={() => setActiveTab("tab5")}
        >
          Benutzerverwaltung
        </button>
      </div>

      <div className="mt-4">
        {activeTab === "tab1" && <GeneralSettings />}
        {activeTab === "tab2" && <OPCUAInterfaceSettings />}
        {activeTab === "tab3" && <DatabaseSettings />}
        {activeTab === "tab4" && <NTPSettings />}
        {activeTab === "tab5" && <UserManagementSettings />}
      </div>
    </div>
  );
}