import { useState } from "react";
import { useNavigate } from "react-router";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();
      
  const handleLogin = async (e: any) => {
    e.preventDefault();

    try {
      const res = await fetch("http://localhost:3000/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        }, 
        body: JSON.stringify({
          username: email,
          password: password
        })
      });

      const data = await res.json();

      if (data.success) {
        localStorage.setItem("token", data.token);
        navigate("/dashboard");
      } else {
        alert(data.message);
      }
    } catch (error) {
      alert("Server error");
    }
  };

  return (
    <div className="min-h-screen bg-gray-500 flex items-center justify-center px-4">

      <div className="w-full max-w-sm bg-gray-800 text-white p-6 rounded-xl shadow-lg">

        <form onSubmit={handleLogin} className="space-y-4">

          <h1 className="text-center text-xl font-bold">
            LOGIN
          </h1>

          <p className="text-center text-sm text-gray-300">
            baru di situs ini?{" "}
            <span className="text-blue-400 cursor-pointer">
              DAFTAR sekarang
            </span>
          </p>

          <input
            type="text"
            placeholder="e-mail pengguna"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full px-4 py-2 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:outline-none"
          />

          <input
            type="password"
            placeholder="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="w-full px-4 py-2 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:outline-none"
          />

          <div className="flex items-center gap-2 text-sm">
            <input type="checkbox" />
            <label>I'm not an animal</label>
          </div>

          <button
            type="submit"
            className="w-full bg-gray-400 text-white py-2 rounded-lg hover:bg-gray-500 transition"
          >
            login
          </button>

        </form>
      </div>

    </div>
  );
}