'use client'

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

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const error = searchParams.get('error');
  const [loading, setLoading] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const [show, context] = notification.useNotification();
  const [notificationShown, setNotificationShown] = useState(false);

  useEffect(() => {
    if (!notificationShown) {
      openNotification();
      setNotificationShown(true);
    }
  }, [notificationShown]);

  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) {
      messageApi.success('Login Berhasil')
      router.push("/beranda");
    } else {
      messageApi.error("Login Gagal, Cek kembali username dan password");
      setLoading(false);
    }
  };

  const pesan =
    "Apabila Anda mengalami kendala pada aplikasi, mohon untuk menghubungi layanan helpdesk IT.";

  const openNotification = () => {
    show.open({
      type: "info",
      message: "Informasi Penting",
      description: pesan,
      duration: 5,
    });
  };

  return (
    <div>
      {contextHolder}
      {context}
      <div className="min-h-screen flex items-center justify-center px-4">
        <div className="max-w-md w-full p-6">
          <Image preview={false} src='/assets/logo-login-new.svg' />
          <Form
            initialValues={{ remember: true }}
            onFinish={handleSubmit}
            autoComplete="off"
          >
              <Form.Item
                name="username"
                rules={[{ required: true, message: 'Mohon masukan username anda!' }]}
              >
                <Input placeholder="Username" />
              </Form.Item>

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

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

export default function Login() {
  return (
    <Suspense fallback={null}>
      <LoginForm />
    </Suspense>
  );
}