import { useEffect, FormEventHandler, useState } from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import GuestLayout from '@/Layouts/GuestLayout';
import ProjectBanner from '@/Components/ProjectBanner';
import FormGroup from '@/Components/FormGroup';
import InputError from '@/Components/InputError';
import InputLabel from '@/Components/InputLabel';
import TextInput from '@/Components/TextInput';
import PrimaryButton from '@/Components/PrimaryButton';
import { Grid, User, Mail, AtSign, Lock, Eye, EyeOff, LogIn, Unlock, CheckCircle, XOctagon } from 'react-feather';
import axios from 'axios';
import Modal from '@/Components/Modal';
import ModalButton from '@/Components/ModalButton';

export default function Register() {
    const { data, setData, post, processing, errors, reset } = useForm({
        emp_id: '',
        name: '',
        email: '',
        username: '',
        password: '',
        password_confirmation: '',
        role_id: ''
    });

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

    const [showPassword, setShowPassword] = useState(false);
    const toggleShowPassword = () => {
		setShowPassword((prevShowPassword) => !prevShowPassword);
	};
    
    const [status, setStatus] = useState('');
    const [feedback, setFeedback] = useState('');
    const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
    const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);

    const handleCloseSuccessModal = () => {
        setIsSuccessModalOpen(false);
        window.location.href = '/login';
    };

    const submit: FormEventHandler = async (e) => {
        e.preventDefault();

        try {
            const response = await axios.post(route('register'), data);
            setStatus('Success')
            setFeedback(response.data.message);
            setIsSuccessModalOpen(true);
        } catch (error) {
            setStatus('Error')
            if (axios.isAxiosError(error)) {
                setFeedback(error.response?.data.message || 'An error occurred');
            } else {
                setFeedback('An unexpected error occurred');
            }
            setIsErrorModalOpen(true);
        }
    };

    return (
        <GuestLayout>
            <Head title="Register" />

            <div id="Register" className="hero min-h-screen bg-secondary-main">
                <div className="hero-content flex-row-reverse">
                    <ProjectBanner />

                    <div className="card w-104 shrink-0 bg-primary-background">
                        <div className="card-body justify-center items-center">
                            <img src="assets/images/img-signup.png" alt="An image that represents a sign up form from StorySet" width="250" height="250" />

                            <form id="SignUpForm" onSubmit={ submit }>
                                <FormGroup>
                                    <InputLabel htmlFor='emp_id'>
                                        <Grid className='stroke-neutral-10' />
                                    </InputLabel>
                                    <TextInput
                                        id='emp_id'
                                        name='emp_id'
                                        value={data.emp_id}
                                        autoComplete='off'
                                        placeholder='Employee ID'
                                        required
                                        onChange={(e) => setData('emp_id', e.target.value)}
                                    />
                                    <InputError message={errors.emp_id} className="mt-2" />

                                    <select name="role_id" id="role_id" value={data.role_id} onChange={(e) => setData('role_id', e.target.value)}
                                    className='px-2 py-0 flex-grow w-full h-[30px] ml-1 bg-primary-background border border-primary-hover focus:outline-none focus:bg-neutral-10 focus:border focus:border-primary-hover'>
                                        <option value="" selected disabled>Select your role</option>
                                        <option value="1">Admin</option>
                                        <option value="2">Team Leader</option>
                                        <option value="3">Team Member</option>
                                    </select>
                                </FormGroup>

                                <FormGroup>
                                    <InputLabel htmlFor='name'>
                                        <User className='stroke-neutral-10' />
                                    </InputLabel>
                                    <TextInput
                                        id='name'
                                        name='name'
                                        value={data.name}
                                        autoComplete='off'
                                        placeholder='Full Name'
                                        required
                                        onChange={(e) => setData('name', e.target.value)}
                                    />
                                    <InputError message={errors.name} className="mt-2" />
                                </FormGroup>

                                <FormGroup>
                                    <InputLabel htmlFor='email'>
                                        <Mail className='stroke-neutral-10' />
                                    </InputLabel>
                                    <TextInput
                                        type='email'
                                        id='email'
                                        name='email'
                                        value={data.email}
                                        autoComplete='off'
                                        placeholder='Email Address'
                                        required
                                        onChange={(e) => setData('email', e.target.value)}
                                    />
                                    <InputError message={errors.email} className="mt-2" />
                                </FormGroup>

                                <FormGroup>
                                    <InputLabel htmlFor='username'>
                                        <AtSign className='stroke-neutral-10' />
                                    </InputLabel>
                                    <TextInput
                                        id='username'
                                        name='username'
                                        value={data.username}
                                        autoComplete='off'
                                        placeholder='Username'
                                        required
                                        onChange={(e) => setData('username', e.target.value)}
                                    />
                                    <InputError message={errors.username} className="mt-2" />
                                </FormGroup>

                                <FormGroup>
                                    <InputLabel htmlFor='password'>
                                        <Lock className='stroke-neutral-10' />
                                    </InputLabel>
                                    <TextInput
                                        type={showPassword ? "text" : "password"}
                                        id='password'
                                        name='password'
                                        value={data.password}
                                        autoComplete='off'
                                        placeholder='Password'
                                        required
                                        onChange={(e) => setData('password', e.target.value)}
                                        className='border-r-0'
                                    />
                                    <label htmlFor="showPassword" className="swap items-center border border-primary-hover border-l-0">
                                        <input type="checkbox" name="showPassword" id="showPassword" onChange={toggleShowPassword} checked={showPassword} className='hidden' />
                                        <Eye className='stroke-secondary-main swap-off px-1' />
                                        <EyeOff className='stroke-secondary-main swap-on px-1' />
                                    </label>
                                    <InputError message={errors.password} className="mt-2" />
                                </FormGroup>

                                <FormGroup>
                                    <InputLabel htmlFor='password_confirmation'>
                                        <Unlock className='stroke-neutral-10' />
                                    </InputLabel>
                                    <TextInput
                                        type={"password"}
                                        id='password_confirmation'
                                        name='password_confirmation'
                                        value={data.password_confirmation}
                                        autoComplete='off'
                                        placeholder='Confirm Password'
                                        required
                                        onChange={(e) => setData('password_confirmation', e.target.value)}
                                    />
                                </FormGroup>

                                <div className="flex items-center justify-end mt-4">
                                    <Link
                                        href={route('login')}
                                        className="btn btn-link text-secondary-main"
                                    >
                                        Already registered? Login instead.
                                    </Link>

                                    <PrimaryButton type='submit' disabled={processing}>
                                        Sign Up
                                        <LogIn className='stroke-neutral-10' />
                                    </PrimaryButton>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <Modal show={isSuccessModalOpen} onClose={() => setIsSuccessModalOpen(false)} maxWidth="lg" styling='success'>
                    <div className="p-4 flex flex-col items-center">
                        <CheckCircle className='stroke-success-main' size={80} />
                        <h2 className="text-xl font-bold mt-2">{ status }</h2>
                        <p className="mt-4">{ feedback }</p>
                        <ModalButton onClick={handleCloseSuccessModal} className="bg-success-main hover:bg-success-hover active:bg-success-pressed">
                            Login Now
                        </ModalButton>
                    </div>
                </Modal>

                <Modal show={isErrorModalOpen} onClose={() => setIsErrorModalOpen(false)} maxWidth="lg" styling='error'>
                    <div className="p-4 flex flex-col items-center">
                        <XOctagon className='stroke-error-main' size={80} />
                        <h2 className="text-xl font-bold mt-2">{ status }</h2>
                        <p className="mt-4">{ feedback }</p>
                        <ModalButton onClick={() => setIsErrorModalOpen(false)} className="bg-error-main text-white hover:bg-error-hover active:bg-error-pressed">
                            Close
                        </ModalButton>
                    </div>
                </Modal>
            </div>
        </GuestLayout>
    );
}
