// pages/index.js

import Image from "next/image";
import { useState } from "react";
import { useRouter } from "next/router";

const USERS = {
  Admin: { username: "admin", password: "admin", role: "Admin" },
  Ismail: { username: "ismail", password: "ismailpasswort", role: "Admin" },
};

function generateToken(user) {
  const payload = {
    username: user.username,
    role: user.role,
    exp: Date.now() + 5 * 60 * 1000, // Ablauf in 5 Minuten
  };
  return btoa(JSON.stringify(payload)); // Verwende btoa für das Payload
}

export default function Home() {
  const router = useRouter();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleLogin = (e) => {
    e.preventDefault();
    const user = Object.values(USERS).find(
      (u) => u.username.toLowerCase() === username.toLowerCase()
    );

    if (user && user.password === password) {
      const token = generateToken(user);
      localStorage.setItem("token", token);
      router.replace("/dashboard");
    } else {
      setError("Login fehlgeschlagen");
    }
  };

  return (
    <div className="relative flex items-center justify-center h-5/6 overflow-hidden bg-gray-900">
      {/* Hintergrundbild */}
      <div
        className="absolute inset-0 bg-cover bg-center opacity-80"
        style={{
          backgroundImage: "url('/loginPageImg/background.png')",
          height: "75vh", // Setzt die Höhe auf 75% des Viewports
        }}
      ></div>

      {/* Overlay */}
      <div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-transparent to-gray-900 opacity-90"></div>

      <div className="relative z-10 flex flex-col items-center p-3 bg-white bg-opacity-80 rounded-lg shadow-lg md:w-1/5 lg:w-1/6 max-h-[90vh]">
        {/* Logo */}
        <div className="mb-2">
          <Image
            src="/loginPageImg/logo.png"
            alt="Littwin Logo"
            width={60}
            height={60}
          />
        </div>

        {/* Titel */}
        <h2 className="text-xl font-semibold text-gray-800 mb-3">Willkommen</h2>

        {/* Formular */}
        <form className="w-full" onSubmit={handleLogin}>
          {/* Benutzername */}
          <div className="mb-3">
            <label
              className="block text-gray-600 text-xs mb-1"
              htmlFor="username"
            >
              Benutzername
            </label>
            <input
              type="text"
              id="username"
              placeholder="Benutzername"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          {/* Passwort */}
          <div className="mb-3">
            <label
              className="block text-gray-600 text-xs mb-1"
              htmlFor="password"
            >
              Passwort
            </label>
            <input
              type="password"
              id="password"
              placeholder="Passwort"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          {/* Login Button */}
          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-1 text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500"
          >
            Einloggen
          </button>
        </form>
        {error && <p className="text-red-500 mt-2 text-sm">{error}</p>}
      </div>
    </div>
  );
}