'use client'

import React, { useEffect, useState } from 'react';
import { Button, Form, Input } from 'antd';
import { signIn } from 'next-auth/react';
import { useRouter, useSearchParams  } from 'next/navigation';


export default function Login() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const error = searchParams.get('error');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (error) {
      alert("Login gagal: " + error);
    }
  }, [error]);

  const handleSubmit = async (values) => {
    setLoading(true);
    const result = await signIn("credentials", {
      username: values.username,
      password: values.password,
      redirect: false,
    });

    if (result.ok) {
      router.push("/beranda");
    } else {
      alert("Login gagal");
    }
    setLoading(false);
  };

  return (
    <div className="justify-center p-4">
      <div className="pt-[155px]">
        <Form
          initialValues={{ remember: true }}
          onFinish={handleSubmit}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input placeholder="Email" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password placeholder="Password" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block loading={loading}>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}