Skripsi_Valentino_5103022014/frontend/app/login/page.tsx

"use client";

import { useState } from "react";
import axios from "axios";
import { useRouter } from "next/navigation";
import { Lock, User, Shield } from "lucide-react";

export default function LoginPage() {
  const router = useRouter();
  
  const [loginRole, setLoginRole] = useState("user");
  const [nrp, setNrp] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");

    try {
      const response = await axios.post("http://172.17.172.17:8080/api/auth/login", {
        nrp_nip: nrp,
        password: password,
      });

      const { token, user } = response.data;
      
      // Simpan di localStorage untuk kebutuhan frontend
      localStorage.setItem("token", token);
      localStorage.setItem("user", JSON.stringify(user));

      // Simpan role ke cookie juga agar Middleware Next.js tahu siapa yang sedang login
      document.cookie = `token=${token}; path=/; max-age=86400; SameSite=Lax`;
      document.cookie = `userRole=${user.role}; path=/; max-age=86400; SameSite=Lax`;

      // Logika Pengalihan Halaman
      if (user.role === "admin" && loginRole === "admin") {
        router.push("/admin/monitoring"); // Langsung arahkan ke halaman utama admin
      } else if (user.role === "student" && loginRole === "user") {
        router.push("/dashboard"); 
      } else {
        setError("Role tidak sesuai dengan tipe akun Anda.");
        localStorage.clear();
        document.cookie = "token=; path=/; max-age=0;"; 
        document.cookie = "userRole=; path=/; max-age=0;";
      }

    } catch (err: any) {
      setError(err.response?.data?.error || "Gagal terhubung ke server");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-100">
      <div className="w-full max-w-md bg-white p-8 rounded-2xl shadow-lg">
        <div className="text-center mb-6">
          <h1 className="text-3xl font-bold text-blue-600 mb-2">S-CLASS</h1>
          <p className="text-gray-500">Smart Classroom Booking System</p>
        </div>

        <div className="flex justify-center mb-6 bg-gray-100 p-1 rounded-lg">
          <button
            type="button"
            onClick={() => { setLoginRole("user"); setError(""); }}
            className={`w-1/2 py-2 text-sm font-semibold rounded-md transition-all ${
              loginRole === "user" ? "bg-white text-blue-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
            }`}
          >
            Pengguna
          </button>
          <button
            type="button"
            onClick={() => { setLoginRole("admin"); setError(""); }}
            className={`w-1/2 py-2 text-sm font-semibold rounded-md transition-all ${
              loginRole === "admin" ? "bg-white text-blue-600 shadow-sm" : "text-gray-500 hover:text-gray-700"
            }`}
          >
            Administrator
          </button>
        </div>

        <form onSubmit={handleLogin} className="space-y-6">
          {error && (
            <div className="bg-red-100 text-red-600 p-3 rounded-lg text-sm text-center">
              {error}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {loginRole === "admin" ? "Username Admin" : "NRP / NIP"}
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                {loginRole === "admin" ? <Shield className="h-5 w-5 text-gray-400" /> : <User className="h-5 w-5 text-gray-400" />}
              </div>
              <input
                type="text"
                required
                className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                placeholder={loginRole === "admin" ? "Masukkan Username..." : "Masukkan NRP..."}
                value={nrp}
                onChange={(e) => setNrp(e.target.value)}
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <Lock className="h-5 w-5 text-gray-400" />
              </div>
              <input
                type="password"
                required
                className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                placeholder="••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
          </div>

          <button
            type="submit"
            disabled={loading}
            className={`w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white transition-colors
              ${loading ? "bg-blue-400 cursor-not-allowed" : loginRole === "admin" ? "bg-slate-800 hover:bg-slate-900" : "bg-blue-600 hover:bg-blue-700"}`}
          >
            {loading ? "Memproses..." : loginRole === "admin" ? "Login sebagai Admin" : "Masuk Sekarang"}
          </button>
        </form>

        <div className="mt-6 text-center text-xs text-gray-400">
          © 2026 Skripsi S-CLASS Project
        </div>
      </div>
    </div>
  );
}