/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';
import Image from "next/image";
import Button from "../components/Button";
import { useRouter } from 'next/navigation';
import { Formik, Field, Form, ErrorMessage, FormikHelpers } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import { useState } from "react";
import { useAuth } from "../context/AuthContext";
import Loader from "../loading";
import { loginUser } from "../lib/api/api";

interface LoginFormValues {
  email: string;
  password: string;
  remember: boolean;
}

export default function Login() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const { setToken, setUser } = useAuth();

  const handleContinue = async (
    values: LoginFormValues,
    { setSubmitting }: FormikHelpers<LoginFormValues>
  ) => {
    setLoading(true);
    setError(null);
    
    try {
      const response = await loginUser( {
        email: values.email,
        password: values.password,
      });

      if (response.data.code !== 200) {
        throw new Error(response.data.message || 'Login failed');
      }

      setToken(response.data.data.token);
      setUser(response.data.data.user);
      router.push('/dashboard');
    } catch (error: any) {
      if (axios.isAxiosError(error) && error.response) {
        setError(error.response.data[0]?.message || 'Login failed');
      } else if (error.message === 'You are not authorized to access this page') {
        setError(error.message);
      } else {
        setError('An unexpected error occurred. Please try again.');
      }
    } finally {
      setLoading(false); 
      setSubmitting(false);
    }
  };

  const validationSchema = Yup.object({
    email: Yup.string().email('Invalid email address').required('Email is required'),
    password: Yup.string().required('Password is required'),
  });

  return (
    <div className="min-h-screen flex flex-col md:flex-row bg-white">
      {loading && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <Loader />
        </div>
      )}
      
      {/* Image Section */}
      <div className="w-full md:w-1/2 relative h-64 md:h-auto">
        <Image
          src="/assets/AuthImage.png"
          alt="Auth Image"
          fill
          sizes="(max-width: 768px) 100vw, 50vw"
          className="object-cover"
          priority
        />
      </div>

      {/* Form Section */}
      <div className="w-full md:w-1/2 flex items-center justify-center p-6 md:p-20">
        <div className="w-full max-w-md">
          <Formik
            initialValues={{ email: '', password: '', remember: false }}
            validationSchema={validationSchema}
            onSubmit={handleContinue}
          >
            {({ isSubmitting }) => (
              <Form className="rounded-3xl p-4 sm:p-8">
                <h1 className="text-2xl sm:text-3xl font-bold text-center mb-5 text-gray-600">
                  Grow your wealth with ease
                </h1>
                <p className="text-center mb-6 text-gray-600">
                  Join thousands of people in building your own financial freedom and start living your life
                </p>

                {error && (
                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
                    {error}
                  </div>
                )}

                {/* Email Field */}
                <div className="mb-4">
                  <Field
                    id="email"
                    name="email"
                    type="email"
                    className="w-full border text-gray-950 border-gray-300 bg-gray-50 p-3 sm:p-4 rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    placeholder="Email"
                  />
                  <ErrorMessage 
                    name="email" 
                    component="p" 
                    className="text-red-500 text-sm mt-1 ml-4" 
                  />
                </div>

                {/* Password Field */}
                <div className="mb-4">
                  <Field
                    id="password"
                    name="password"
                    type="password"
                    className="w-full border text-gray-950 border-gray-300 bg-gray-50 p-3 sm:p-4 rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    placeholder="Password"
                  />
                  <ErrorMessage 
                    name="password" 
                    component="p" 
                    className="text-red-500 text-sm mt-1 ml-4" 
                  />
                </div>

                {/* Remember Me */}
                <div className="mb-8 mt-6 flex justify-between items-center">
                  <label className="flex gap-2 items-center cursor-pointer">
                    <Field
                      id="remember"
                      name="remember"
                      type="checkbox"
                      className="w-4 h-4 text-purple-600 rounded focus:ring-2 focus:ring-purple-500"
                    />
                    <span className="text-sm text-gray-700">Remember Me</span>
                  </label>
                </div>

                {/* Submit Button */}
                <Button type="submit" disabled={isSubmitting || loading}>
                  {isSubmitting ? 'Logging in...' : 'Login'}
                </Button>

                {/* Sign Up Link */}
                <div className="mt-8 text-center">
                  <span className="text-gray-600">
                    Don&#39;t have an account?{' '}
                  </span>
                  <a 
                    href="/register" 
                    className="text-[#541592] hover:text-purple-500 font-medium hover:underline"
                  >
                    Sign Up
                  </a>
                </div>
              </Form>
            )}
          </Formik>
        </div>
      </div>
    </div>
  );
}