"use client";

import Image from "next/image"
import { useState } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import Cookies from "js-cookie";
import ErrorToast from "@/components/Error";

export default function LoginPage() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [remember, setRemember] = useState(false);

    const [error, setError] = useState("");
    const router = useRouter();

    const login = async () => {
        try {
            const response = await axios.post("/api/user/login", { email, password, remember });
            
            if (response.status === 200) {
                const token = response.data.token;
                if (token) {
                    Cookies.set("token", token);
                    router.push("/dashboard");
                } else {
                    setError("No login token received");
                }
            }
        } catch (error: any) {
            setError(error.response.data.error);
        }
    };
    
  return (
    <div className="min-h-screen flex flex-col lg:flex-row">
      <div className="flex-1 flex items-center justify-center p-6 lg:p-10">
        <div className="w-full max-w-md space-y-8 bg">
          <div className="text-center">
            <h1 className="text-3xl font-bold">Welcome back</h1>
            <p className="mt-2 text-gray-600">Please login with your account</p>
          </div>

          <div className="mt-8 space-y-6">
            <div className="form-control w-full">
              <label className="label">
                <span className="label-text">Email</span>
              </label>
              <input type="email" placeholder="email@example.com" className="input input-bordered w-full" required value={email} onChange={(e) => setEmail(e.target.value)} />
            </div>

            <div className="form-control w-full">
              <label className="label">
                <span className="label-text">Password</span>
              </label>
              <input type="password" placeholder="Your password" className="input input-bordered w-full" required value={password} onChange={(e) => setPassword(e.target.value)} />
            </div>

            <div className="form-control">
              <label className="label cursor-pointer justify-start gap-2">
                <input type="checkbox" className="checkbox checkbox-primary" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
                <span className="label-text">Stay logged in</span>
              </label>
            </div>

            <button className="btn btn-primary w-full" onClick={login}>Login</button>
          </div>
        </div>
      </div>

      <div className="flex-1 bg-base-200 hidden lg:block">
        <div className="h-full w-full relative">
          <Image
            src="/login_wallpaper.jpg"
            alt="Login Illustration"
            fill
            className="object-cover"
            priority
          />
        </div>
      </div>

      <div className="h-48 bg-base-200 relative lg:hidden">
        <Image
          src="/login_wallpaper.jpg"
          alt="Login Illustration"
          fill
          className="object-cover"
          priority
        />
      </div>

      <ErrorToast message={error} show={error !== ""} onClose={() => setError("")} />
    </div>
  )
}