import { useEffect, useState } from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import { usePage } from '@inertiajs/react';
import Swal from "sweetalert2"
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';

function Login({ status }) {
    const { data, setData, post, processing, errors, reset } = useForm({
        nis: '',
        password: '',
        remember: false,
    });
    const { flash } = usePage().props;
    const [showPassword, setShowPassword] = useState(false);

    useEffect(() => {
        if (flash.success) {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: flash.success
            });
        } else if (flash.error) {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: flash.success
            });
        }
    }, [flash]);

    useEffect(() => {
        return () => {
            reset('password');
        };
    }, []);

    const submit = (e) => {
        e.preventDefault();
        post(route('login'));
    };

    return (
        <div className="min-h-screen flex items-center justify-center">
            <div className="w-full max-w-md p-8 rounded-lg bg-gray-800">
                <Head title="Log in" />

                <h1 className="text-3xl font-bold mb-8 text-white">Masuk Untuk Melanjutkan</h1>

                {status && <div className="mb-4 font-medium text-sm text-green-500">{status}</div>}

                <form onSubmit={submit}>
                    <div className="mb-6">
                        <label htmlFor="nis" className="block text-xl mb-2 text-white">
                            Masukkan NIS
                        </label>
                        <input
                            id="nis"
                            type="text"
                            name="nis"
                            value={data.nis}
                            className="w-full p-3 border border-gray-700 rounded-lg text-gray-700"
                            placeholder="Masukkan Nis Anda"
                            autoComplete="username"
                            onChange={(e) => setData('nis', e.target.value)}
                        />
                        {errors.nis && <p className="mt-1 text-sm text-red-500">{errors.nis}</p>}
                    </div>

                    <div className="mb-6 relative">
                        <label htmlFor="password" className="block text-xl mb-2 text-white">
                            Password
                        </label>
                        <input
                            id="password"
                            type={showPassword ? 'text' : 'password'}
                            name="password"
                            value={data.password}
                            className="w-full p-3 border border-gray-700 rounded-lg pr-12"
                            placeholder="••••••••"
                            autoComplete="current-password"
                            onChange={(e) => setData('password', e.target.value)}
                        />
                        <div
                            className="absolute top-[50px] right-4 cursor-pointer text-gray-400 hover:text-black"
                            onClick={() => setShowPassword(!showPassword)}
                        >
                            {showPassword ? (
                                <EyeSlashIcon className="h-5 w-5" />
                            ) : (
                                <EyeIcon className="h-5 w-5" />
                            )}
                        </div>
                        {errors.password && <p className="mt-1 text-sm text-red-500">{errors.password}</p>}
                    </div>


                    <div className="flex items-center justify-between mb-6">
                        <div className="flex items-center">
                            <input
                                id="remember"
                                type="checkbox"
                                className="w-4 h-4 border border-gray-700 rounded"
                                name="remember"
                                checked={data.remember}
                                onChange={(e) => setData('remember', e.target.checked)}
                            />
                            <label htmlFor="remember" className="ml-2 text-sm text-white">
                                Remember me
                            </label>
                        </div>
                    </div>

                    <button
                        type="submit"
                        disabled={processing}
                        className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-center"
                    >
                        Sign in
                    </button>
                </form>
            </div>
        </div>
    );
}

Login.layout = (page) => page;

export default Login;

