'use client';

import React, { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import IconLockDots from '@/components/icon/icon-lock-dots';
import IconMail from '@/components/icon/icon-mail';
import Link from 'next/link';
import { Eye, EyeOff } from 'lucide-react';
import { FcGoogle } from 'react-icons/fc';

const ComponentsAuthLoginForm = () => {
    const router = useRouter();
    const searchParams = useSearchParams();
    const nextUrl = searchParams.get('next') || '/';

    const [formData, setFormData] = useState({
        email: '',
        password: '',
    });

    const [loading, setLoading] = useState(false);
    const [err, setErr] = useState<string | null>(null);
    const [msg, setMsg] = useState<string | null>(null);
    const [showPassword, setShowPassword] = useState(false);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData((prev) => ({ ...prev, [name]: value }));
    };

    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setErr(null);
        setMsg(null);

        if (!formData.email || !formData.password) {
            setErr('Please enter email and password.');
            return;
        }

        setLoading(true);
        try {
            // ✅ SAME backend logic as your old working code
            const res = await fetch(
                'https://api.socialbuddy.co/api/auth/login',
                {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'same-origin',
                    body: JSON.stringify(formData),
                }
            );

            const contentType = res.headers.get('content-type') || '';
            const data =
                contentType.includes('application/json')
                    ? await res.json()
                    : await res.text();

            if (!res.ok) {
                throw new Error(
                    (typeof data === 'object' &&
                        (data?.message || data?.error)) ||
                        `Login failed (${res.status})`
                );
            }

            // ✅ Preserve existing storage behavior
            try {
                sessionStorage.setItem('USERID', data.userid);
                sessionStorage.setItem('EBAYSTOREID', data.store?.urlPath);
                localStorage.setItem('data4auto_uid', data.userid);
                localStorage.setItem('d4a_email', data.email);

                data?.payment?.stripeSessionId &&
                    localStorage.setItem(
                        'payment_session',
                        data.payment.stripeSessionId
                    );
            } catch {}

            setMsg('Login successful!');
            setTimeout(() => router.push(nextUrl), 500);
        } catch (e: any) {
            setErr(e?.message || 'Login failed');
        } finally {
            setLoading(false);
        }
    };

    return (
        <form onSubmit={submitForm} className="dark:text-white">

            {/* Alerts */}
            {err && (
                <div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                    {err}
                </div>
            )}
            {msg && (
                <div className="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
                    {msg}
                </div>
            )}

            <div className="relative w-full min-w-[500px] p-8 rounded-3xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl">

                {/* Logo */}
                <div className="flex flex-col items-center mb-6">
                    <img
                        src="/assets/images/logo_sb.png"
                        alt="Logo"
                        className="h-[120px] w-[120px]"
                    />
                    <h1 className="text-xl text-white font-medium mt-3">
                        Sign in to SocialBuddy
                    </h1>
                </div>

                {/* Email */}
                <div className="mb-4 relative">
                    <input
                        name="email"
                        type="email"
                        placeholder="Email Address"
                        className="w-full ps-10 py-3 bg-[rgba(7,13,30,0.7)]
                        border border-white/15 rounded-lg text-white
                        focus:outline-none focus:border-white/30"
                        value={formData.email}
                        onChange={handleChange}
                        autoComplete="email"
                    />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2 text-white">
                        <IconMail fill />
                    </span>
                </div>

                {/* Password */}
                <div className="mb-2 relative">
                    <input
                        name="password"
                        type={showPassword ? 'text' : 'password'}
                        placeholder="Password"
                        className="w-full ps-10 py-3 bg-[rgba(7,13,30,0.7)]
                        border border-white/15 rounded-lg text-white
                        focus:outline-none focus:border-white/30"
                        value={formData.password}
                        onChange={handleChange}
                        autoComplete="current-password"
                    />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2 text-white">
                        <IconLockDots fill />
                    </span>
                    <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"
                    >
                        {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                    </button>
                </div>

                {/* Forgot password */}
                <div className="flex justify-end mb-6">
                    <Link
                        href="/forgot-password"
                        className="text-sm text-blue-400 hover:underline"
                    >
                        Forgot Password?
                    </Link>
                </div>

                {/* Login button */}
                <button
                    disabled={loading}
                    className="w-full py-3 rounded-xl text-lg font-semibold text-white
                    bg-gradient-to-r from-blue-600 to-pink-500
                    shadow-lg transition-all hover:opacity-90 hover:scale-[1.02]
                    disabled:opacity-60 mb-3"
                >
                    {loading ? 'Logging in…' : 'LOG IN'}
                </button>

                {/* Divider */}
                <div className="relative text-center my-3">
                    <span className="absolute inset-x-0 top-1/2 h-px bg-white/20" />
                    <span className="relative bg-[#0b0d1c] px-3 text-xs uppercase text-gray-300">
                        or
                    </span>
                </div>

                {/* Google Sign-in */}
                <div className="flex justify-center px-8 mb-4">
                    <Link
                        href="https://api.socialbuddy.co/api/auth/google/"
                        className="flex items-center gap-3 px-8 py-3 rounded-lg
                        border border-white/20 text-white
                        hover:bg-white/10 transition active:scale-[0.98]"
                    >
                        <FcGoogle size={20} />
                        <span className="text-sm">Continue with Google</span>
                    </Link>
                </div>

                {/* Footer */}
                <div className="text-center text-sm text-gray-400">
                    Don&rsquo;t have an account?{' '}
                    <Link href="/signup" className="text-blue-400 hover:underline">
                        SIGN UP
                    </Link>
                </div>
            </div>
        </form>
    );
};

export default ComponentsAuthLoginForm;