"use client";
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";

import handleNtpSubmit from "./handlers/handleNtpSubmit";

const NTPSettings: React.FC = () => {
  const systemSettings = useSelector(
    (state: RootState) => state.systemSettingsSlice
  );

  // Lokale States mit Fallback-Werten absichern
  const [ntp1, setNtp1] = React.useState(systemSettings?.ntp1 ?? "");
  const [ntp2, setNtp2] = React.useState(systemSettings?.ntp2 ?? "");
  const [ntp3, setNtp3] = React.useState(systemSettings?.ntp3 ?? "");
  const [ntpTimezone, setNtpTimezone] = React.useState(
    systemSettings?.ntpTimezone ?? ""
  );
  const [active, setActive] = React.useState(
    systemSettings?.ntpActive ?? false
  );

  // Wenn Daten noch nicht geladen sind, Ladeanzeige anzeigen
  if (!systemSettings || systemSettings.ntp1 === undefined) {
    return <p className="text-xs text-gray-500">Lade NTP-Daten...</p>;
  }

  return (
    <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]">
      <h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>

      <div className="grid md:grid-cols-2 gap-3">
        <div>
          <label className="block text-xs font-medium">NTP Server 1</label>
          <input
            type="text"
            className="border border-base rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none"
            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-base rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none"
            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-base rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none"
            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-base rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none"
            value={ntpTimezone}
            onChange={(e) => setNtpTimezone(e.target.value)}
          />
        </div>

        <div className="col-span-2 flex items-center gap-2 mt-2">
          <label className="text-xs font-medium ">NTP aktiv:</label>
          <input
            type="checkbox"
            checked={active}
            onChange={(e) => setActive(e.target.checked)}
            className="accent-littwin-blue w-4 h-4"
          />
        </div>

        <div className="col-span-2">
          <button
            onClick={() =>
              handleNtpSubmit(
                {
                  ntp1: systemSettings.ntp1 ?? "",
                  ntp2: systemSettings.ntp2 ?? "",
                  ntp3: systemSettings.ntp3 ?? "",
                  ntpTimezone: systemSettings.ntpTimezone ?? "",
                  active: systemSettings.ntpActive ?? false,
                },
                {
                  ntp1,
                  ntp2,
                  ntp3,
                  ntpTimezone,
                  active,
                }
              )
            }
            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
          >
            Speichern
          </button>
        </div>
      </div>
    </div>
  );
};

export default NTPSettings;