"use client";
// /components/main/settingsPageComponents/UserManagementSettings.tsx
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../../redux/store";
import { useAdminAuth } from "./hooks/useAdminAuth";
import handleAdminLogin from "./handlers/handleAdminLogin";

const UserManagementSettings: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true);

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loginSuccess, setLoginSuccess] = useState(false);
  const [error, setError] = useState("");

  const handleLogin = async () => {
    handleAdminLogin(
      username,
      password,
      () => {
        setLoginSuccess(true);
        setError("");
        // Speichere die System-Uhrzeit (Login-Zeitpunkt) im localStorage
        try {
          localStorage.setItem("adminLoginTime", new Date().toISOString());
        } catch {
          // Ignoriere Speicherfehler (z. B. in Private Mode)
        }
      },
      (errorMsg) => {
        setLoginSuccess(false);
        setError(errorMsg);
      },
      dispatch
    );
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleLogin();
    }
  };

  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">Login Admin-Bereich</h2>

      {/* Admin Login/Logout */}
      <div className="flex flex-col gap-1">
        {isAdminLoggedIn ? (
          <button
            type="button"
            className="btn-accent px-4 py-2 h-8 text-xs rounded whitespace-nowrap"
            onClick={() => {
              try {
                localStorage.removeItem("adminLoginTime");
              } catch {
                // ignore
              }
              logoutAdmin();
            }}
          >
            Admin abmelden
          </button>
        ) : (
          <>
            <div className="flex flex-row gap-3">
              <input
                type="text"
                placeholder="Benutzername"
                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={username}
                onChange={(e) => setUsername(e.target.value)}
                onKeyDown={handleKeyDown}
              />
              <input
                type="password"
                placeholder="Passwort"
                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={password}
                onChange={(e) => setPassword(e.target.value)}
                onKeyDown={handleKeyDown}
              />
              <button
                type="button"
                className="btn-accent px-4 py-2 h-8 text-xs rounded whitespace-nowrap"
                onClick={handleLogin}
              >
                Admin anmelden
              </button>
            </div>
          </>
        )}
      </div>

      {loginSuccess && (
        <p className="text-success text-xs mt-2">Login erfolgreich!</p>
      )}
      {error && <p className="text-danger text-xs mt-2">{error}</p>}

      {/* 
        // Benutzerverwaltungstabelle (kommt später)
        <table>...</table>
      */}
    </div>
  );
};

export default UserManagementSettings;