"use client";

import { useState } from "react";
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"; // ✅ Tambahkan ini
import Footer from "../landing-page/footer";
import Navbar from "../landing-page/navbar";

export default function Registration() {
  const [showPassword, setShowPassword] = useState(false);
  const router = useRouter(); // ✅ gunakan router

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

    // (contoh: kamu bisa tambahkan validasi login di sini)
    // Jika berhasil login:
    router.push("/admin"); // ✅ redirect ke halaman admin
  };

  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"
                  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"}
                    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>

              <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">
              Sudah punya akun?{" "}
              <Link href="/auth" className="text-blue-600 hover:underline">
                Login
              </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>
  );
}