"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useDispatch, useSelector } from "react-redux";
import { ArrowRight, Mail, Lock, Zap, ShieldCheck, TrendingUp, Users } from "lucide-react";

import Header from "../components/Header";
import Footer from "../components/Footer";
import { useLoginMutation } from "@/redux/apis/authApi";
import { setCredentials, selectIsAuthenticated } from "@/redux/slices/authSlice";

export default function LoginPage() {
  const router = useRouter();
  const dispatch = useDispatch();
  const isAuthenticated = useSelector(selectIsAuthenticated);
  const [login, { isLoading }] = useLoginMutation();

  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });
  const [errorMessage, setErrorMessage] = useState<string>("");

  // Redirect if already authenticated
  useEffect(() => {
    if (isAuthenticated) {
      router.push("/");
    }
  }, [isAuthenticated, router]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
    // Clear error when user starts typing
    if (errorMessage) setErrorMessage("");
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMessage("");

    if (!formData.email || !formData.password) {
      setErrorMessage("Please enter both email and password.");
      return;
    }

    try {
      const result = await login(formData).unwrap();

      // Save credentials & user info
      dispatch(
        setCredentials({
          user: result.user,
          token: result.token,
        })
      );

      // Redirect handled by useEffect or explicit push
      router.push("/");
    } catch (err: any) {
      console.error("Login failed:", err);

      // Extract error message from RTK Query error structure
      let message = "Login failed. Please try again.";

      if (err?.data?.message) {
        message = err.data.message;
      } else if (err?.message) {
        message = err.message;
      } else if (err?.status === 401) {
        message = "Invalid email or password.";
      } else if (err?.status === 500) {
        message = "Server error. Please try again later.";
      } else if (err?.status === "FETCH_ERROR") {
        message = "Network error. Please check your connection.";
      }

      setErrorMessage(message);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-sans text-gray-900 selection:bg-green-100 selection:text-green-700">
      <Header />

      <main className="flex-grow pt-32 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-5xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="bg-white rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col lg:flex-row min-h-[600px]"
          >
            {/* Left Side - Visual Branding */}
            <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-green-600 via-emerald-600 to-teal-700 p-12 text-white flex-col justify-between relative overflow-hidden">
              {/* Decorative Background Elements */}
              <div className="absolute top-0 right-0 w-80 h-80 bg-white/10 rounded-full blur-3xl translate-x-1/2 -translate-y-1/2" />
              <div className="absolute bottom-0 left-0 w-64 h-64 bg-green-400/20 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />

              <div className="relative z-10">
                <div className="w-12 h-12 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mb-8 border border-white/30">
                  <Zap className="w-6 h-6 text-white" />
                </div>

                <h2 className="text-4xl font-bold leading-tight mb-6">
                  Welcome Back <br />
                  to <span className="text-green-200">Solar Syndicate</span>
                </h2>

                <p className="text-green-100 text-lg mb-10 max-w-sm">
                  Access your dashboard, manage tenders, and connect with partners seamlessly.
                </p>

                <div className="space-y-6">
                  <div className="flex items-center gap-4 group">
                    <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-green-400 group-hover:text-green-900 transition-colors duration-300">
                      <TrendingUp className="w-5 h-5" />
                    </div>
                    <span className="font-medium">Track Your Tenders</span>
                  </div>
                  <div className="flex items-center gap-4 group">
                    <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-green-400 group-hover:text-green-900 transition-colors duration-300">
                      <ShieldCheck className="w-5 h-5" />
                    </div>
                    <span className="font-medium">Secure Access</span>
                  </div>
                </div>
              </div>

              <div className="relative z-10 mt-12 pt-12 border-t border-white/20">
                <p className="text-sm text-green-200">
                  © 2024 Maharashtra Solar Business Syndicate.
                </p>
              </div>
            </div>

            {/* Right Side - Login Form */}
            <div className="w-full lg:w-1/2 p-6 md:p-12 lg:p-16 bg-white flex flex-col justify-center relative">

              {/* Mobile Logo */}
              <div className="lg:hidden flex justify-center mb-8">
                <div className="w-16 h-16 bg-green-50 rounded-2xl flex items-center justify-center p-3">
                  <Zap className="w-8 h-8 text-green-600" />
                </div>
              </div>

              <div className="max-w-md w-full mx-auto">
                <div className="mb-8 lg:mb-12 text-center lg:text-left">
                  <h1 className="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-2 tracking-tight">Welcome Back</h1>
                  <p className="text-sm lg:text-base text-gray-500 font-medium">
                    Please enter your details to sign in
                  </p>
                </div>

                <form onSubmit={handleSubmit} className="space-y-6" autoComplete="off">
                  {/* Email */}
                  <div className="space-y-2">
                    <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Email Address</label>
                    <div className="relative group">
                      <div className="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-lg flex items-center justify-center text-gray-400 group-focus-within:text-green-600 transition-colors">
                        <Mail className="w-5 h-5" />
                      </div>
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        className="w-full pl-12 pr-4 py-3 lg:py-3.5 rounded-2xl border border-gray-200 bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none text-sm lg:text-base font-medium shadow-sm group-hover:border-gray-300"
                        placeholder="john@example.com"
                      />
                    </div>
                  </div>

                  {/* Password */}
                  <div className="space-y-2">
                    <div className="flex justify-between items-center ml-1">
                      <label className="text-xs sm:text-sm font-bold text-gray-700">Password</label>
                      <Link href="/forgot-password" className="text-xs font-bold text-green-600 hover:text-green-700 hover:underline">
                        Forgot Password?
                      </Link>
                    </div>
                    <div className="relative group">
                      <div className="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-lg flex items-center justify-center text-gray-400 group-focus-within:text-green-600 transition-colors">
                        <Lock className="w-5 h-5" />
                      </div>
                      <input
                        type="password"
                        name="password"
                        value={formData.password}
                        onChange={handleChange}
                        required
                        className="w-full pl-12 pr-4 py-3 lg:py-3.5 rounded-2xl border border-gray-200 bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none text-sm lg:text-base font-medium shadow-sm group-hover:border-gray-300"
                        placeholder="••••••••"
                      />
                    </div>
                  </div>

                  {/* Error Alert */}
                  {errorMessage && (
                    <div className="p-4 bg-red-50 border border-red-200 rounded-2xl flex items-start gap-3 animate-pulse">
                      <div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center shrink-0 mt-0.5">
                        <span className="text-red-600 font-bold text-xs">!</span>
                      </div>
                      <p className="text-sm text-red-600 font-medium">
                        {errorMessage}
                      </p>
                    </div>
                  )}

                  <div className="pt-2">
                    <button
                      type="submit"
                      disabled={isLoading}
                      className="w-full py-3.5 lg:py-4 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-2xl font-bold shadow-lg shadow-green-500/25 hover:shadow-xl hover:shadow-green-500/35 hover:-translate-y-0.5 disabled:opacity-70 disabled:shadow-none disabled:translate-y-0 transition-all duration-300 flex items-center justify-center gap-2 text-sm lg:text-base tracking-wide"
                    >
                      {isLoading ? (
                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      ) : (
                        <>Sign In <ArrowRight className="w-5 h-5" /></>
                      )}
                    </button>
                  </div>
                </form>

                {/* Sign Up Link */}
                <div className="mt-8 pt-6 border-t border-gray-100 text-center">
                  <p className="text-gray-500 text-sm font-medium">
                    Don't have an account?
                    <Link href="/register" className="ml-2 text-green-700 font-bold hover:text-green-800 hover:underline transition-all">
                      Create an Account
                    </Link>
                  </p>
                </div>

              </div>
            </div>
          </motion.div>
        </div>
      </main>

      <Footer />
    </div>
  );
}