web-campaignpool/components/form/login.tsx

"use client";

import { useState } from "react";
import Cookies from "js-cookie";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Eye, EyeOff } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Footer from "../landing-page/footer";
import Navbar from "../landing-page/navbar";

// ✅ Dummy user data
const users = [
  {
    nrp: "1001",
    password: "admin123",
    role: "admin",
  },
  {
    nrp: "1002",
    password: "user123",
    role: "user",
  },
  {
    nrp: "1003",
    password: "super123",
    role: "supervisor",
  },
  {
    nrp: "1004",
    password: "approve123",
    role: "approver",
  },
];

export default function Login() {
  const [showPassword, setShowPassword] = useState(false);
  const [nrp, setNrp] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const router = useRouter();

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();

    const foundUser = users.find(
      (u) => u.nrp === nrp && u.password === password
    );

    if (!foundUser) {
      setError("NRP atau kata sandi salah!");
      return;
    }

    // ✅ Simpan data user ke cookies agar bisa diakses dari mana saja
    Cookies.set("userRole", foundUser.role, { expires: 1 }); // expires 1 day

    // ✅ Redirect sesuai role
    switch (foundUser.role) {
      case "admin":
        router.push("/dashboard/admin");
        break;
      case "user":
        router.push("/dashboard/user");
        break;
      case "supervisor":
        router.push("/dashboard/supervisor");
        break;
      case "approver":
        router.push("/dashboard/approver");
        break;
      default:
        router.push("/");
    }
  };

  return (
    <div className="min-h-screen flex flex-col justify-between bg-white">
      <Navbar />
      <div className="flex flex-1 items-center justify-center px-6 md:px-20 py-10">
        <div className="grid md:grid-cols-2 gap-10 items-center w-full max-w-5xl">
          {/* LEFT: FORM */}
          <div className="w-full max-w-sm mx-auto">
            <h1 className="text-lg font-semibold text-gray-800 mb-6">
              Selamat Datang
            </h1>

            <form className="space-y-4" onSubmit={handleLogin}>
              <div>
                <Label htmlFor="nrp" className="text-gray-700">
                  NRP
                </Label>
                <Input
                  id="nrp"
                  value={nrp}
                  onChange={(e) => setNrp(e.target.value)}
                  placeholder="Masukkan NRP"
                  className="mt-1 bg-white border-gray-300 focus:border-yellow-600 focus:ring-yellow-600"
                  required
                />
              </div>

              <div className="relative">
                <Label htmlFor="password" className="text-gray-700">
                  Kata Sandi
                </Label>
                <div className="relative mt-1">
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="Masukkan kata sandi"
                    className="pr-10 bg-white border-gray-300 focus:border-yellow-600 focus:ring-yellow-600"
                    required
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
                  >
                    {showPassword ? (
                      <EyeOff className="h-4 w-4" />
                    ) : (
                      <Eye className="h-4 w-4" />
                    )}
                  </button>
                </div>
              </div>

              {error && (
                <p className="text-red-600 text-sm font-medium">{error}</p>
              )}

              <Button
                type="submit"
                className="w-full bg-yellow-700 hover:bg-yellow-800 text-white font-semibold"
              >
                Login
              </Button>
            </form>

            <p className="text-center text-sm text-gray-600 mt-4">
              Belum punya akun?{" "}
              <Link href="/register" className="text-blue-600 hover:underline">
                Register
              </Link>
            </p>
          </div>

          {/* RIGHT: ILLUSTRATION */}
          <div className="hidden md:flex justify-center">
            <Image
              src="/login.png"
              alt="Ilustrasi Login"
              width={400}
              height={400}
              className="object-contain"
            />
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}