'use client';

import React, {useState} from 'react';
import Link from 'next/link';
import {Mail, Lock, X} from 'lucide-react';
import {useForm} from 'react-hook-form';
import {z} from 'zod';
import {zodResolver} from '@hookform/resolvers/zod';

const loginSchema = z.object({
    email: z.string().email('Please enter a valid email'),
    password: z.string().min(6, 'Password must be at least 6 characters'),
    rememberMe: z.boolean().optional(),
});

type LoginFormValues = z.infer<typeof loginSchema>;

const LoginPage = () => {
    const [apiError, setApiError] = useState('');
    const [loading, setLoading] = useState(false);

    const {register, handleSubmit, formState: {errors}} = useForm<LoginFormValues>({
        resolver: zodResolver(loginSchema),
    });

    const onSubmit = async (data: LoginFormValues) => {
        setApiError('');
        setLoading(true);

        try {
            const res = await fetch('/api/auth/login', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data),
            });

            const result = await res.json();

            if (!res.ok) {
                setApiError(result.error || 'Invalid credentials');
                setLoading(false);
                return;
            }

            // Store JWT and user info
            localStorage.setItem('token', result.token);
            localStorage.setItem('user', JSON.stringify(result.user));

            // Redirect to dashboard
            window.location.href = '/';
        } catch (err) {
            console.error(err);
            setApiError('Something went wrong. Please try again.');
            setLoading(false);
        }
    };

    return (
        <div className="flex flex-col w-full">
            <h3 className="text-4xl font-bold text-blue1 mb-5">Welcome Back</h3>
            <p>Enter your email and password to continue.</p>

            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 my-10">
                {apiError && (
                    <div
                        className="relative bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-md text-center">
                        {apiError}
                        <button
                            type="button"
                            onClick={() => setApiError('')}
                            className="absolute top-1 right-2 text-red-700 hover:text-red-900"
                        >
                            <X className="h-4 w-4"/>
                        </button>
                    </div>
                )}

                {/* EMAIL */}
                <div className="flex flex-col gap-1">
                    <label>Email address</label>
                    <div className="flex items-center gap-3 bg-white rounded-3xl py-1.5 px-4">
                        <Mail className="h-4 text-gray-400"/>
                        <input
                            type="email"
                            {...register('email')}
                            placeholder="username@gmail.com"
                            className="w-full border-none outline-none focus:ring-0"
                        />
                    </div>
                    {errors.email && <p className="text-sm text-red-600">{errors.email.message}</p>}
                </div>

                {/* PASSWORD */}
                <div className="flex flex-col gap-1">
                    <label>Password</label>
                    <div className="flex items-center gap-3 bg-white rounded-3xl py-1.5 px-4">
                        <Lock className="h-4 text-gray-400"/>
                        <input
                            type="password"
                            {...register('password')}
                            placeholder="********"
                            className="w-full border-none outline-none focus:ring-0"
                        />
                    </div>
                    {errors.password && <p className="text-sm text-red-600">{errors.password.message}</p>}
                </div>

                <button
                    type="submit"
                    disabled={loading}
                    className={`w-full py-3 rounded-3xl font-semibold text-white cursor-pointer ${
                        loading ? 'bg-blue1/60 cursor-not-allowed' : 'bg-blue1 hover:bg-blue1/90'
                    }`}
                >
                    {loading ? 'Signing in...' : 'Sign in'}
                </button>
            </form>

            <p className="mt-6 ext-gray-600">
                Don’t have an account?{' '}
                <Link className="font-bold text-blue1 underline" href="/auth/signup">
                    Sign up
                </Link>
            </p>
        </div>
    );
};

export default LoginPage;