import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';

import { useAuth } from '@/context/AuthContext.jsx';
import { useNotification } from '@/components/context/NotificationContext.jsx';
import apiClient from '@/services/apiClient.js';
import { getUserManagementSchema } from '@/schemas/userManagementSchema.js';
import capitalize from '@/utils/capitalize.js';

// Internal Components
import LoginHeader from './components/LoginHeader.jsx';
import LoginForm from './components/LoginForm.jsx';

const Login = () => {
    const { setCurrentUser } = useAuth();
    const [showPassword, setShowPassword] = useState(false);
    const [loading, setLoading] = useState(false);

    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    const { showError, showSuccess } = useNotification();

    const formSchema = getUserManagementSchema(true); // login schema

    const {
        handleSubmit,
        control,
        formState: { errors },
    } = useForm({
        resolver: zodResolver(formSchema),
        defaultValues: {
            rememberMe: false,
        },
    });

    // Read the redirect param once
    const rawRedirect = searchParams.get('redirect') || '';
    const redirectTo = rawRedirect.startsWith('/') && !rawRedirect.startsWith('//') ? rawRedirect : '';

    const onSubmit = async (data) => {
        const { email, password, rememberMe } = data;

        try {
            setLoading(true);

            const response = await apiClient.post('/auth/login', {
                email,
                password,
                rememberMe,
            });

            const resData = response?.data || response;
            const { user, token, accessToken } = resData;
            const finalToken = token || accessToken;

            if (finalToken) {
                if (rememberMe) {
                    localStorage.setItem('authToken', finalToken);
                } else {
                    sessionStorage.setItem('authToken', finalToken);
                }
            }

            if (typeof setCurrentUser === 'function') {
                setCurrentUser(user);
            }

            const displayName = `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'User';

            let finalRedirect = redirectTo;
            if (finalRedirect.startsWith('/admin') && user.role !== 'admin') finalRedirect = '';
            if (finalRedirect.startsWith('/service-provider') && user.role !== 'service-provider') finalRedirect = '';
            if (finalRedirect.startsWith('/traveller') && user.role !== 'traveller') finalRedirect = '';

            if (finalRedirect) {
                showSuccess(`Welcome back, ${capitalize(displayName)}!`, 'Login Successful');
                navigate(finalRedirect);
            } else if (user.role === 'admin') {
                navigate('/admin/dashboard');
                showSuccess(`Welcome back, ${displayName}!`, 'Login Granted');
            } else if (user.role === 'service-provider') {
                const providerName = `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'Service Provider';
                showSuccess(`Welcome back, ${capitalize(providerName)}!`, 'Login Successful');
                navigate('/service-provider');
            } else {
                showSuccess(`Welcome back, ${displayName}!`, 'Login Successful');
                navigate('/traveller/dashboard');
            }
        } catch (err) {
            showError(err?.message || 'Something went wrong. Please try again.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <main className="relative px-4 py-6 bg-white z-1 dark:bg-gray-900 sm:p-0">
            <div className="relative flex flex-col justify-center w-full min-h-screen dark:bg-gray-900 sm:p-0">
                <div className="flex flex-col flex-1">
                    <LoginHeader />

                    <div className="flex flex-col flex-1 w-full max-w-md mx-auto">
                        <LoginForm
                            control={control}
                            errors={errors}
                            showPassword={showPassword}
                            setShowPassword={setShowPassword}
                            loading={loading}
                            onSubmit={handleSubmit(onSubmit)}
                        />

                        <div className="mt-5">
                            <p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start">
                                Don&apos;t have an account?{' '}
                                <Link
                                    to="/register"
                                    className="text-brand-500 hover:text-brand-600 dark:text-brand-400"
                                >
                                    Sign Up
                                </Link>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
};

export default Login;