'use client';
import IconLockDots from '@/components/icon/icon-lock-dots';
import IconMail from '@/components/icon/icon-mail';
import IconUser from '@/components/icon/icon-user';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import axios from 'axios';

const ComponentsAuthRegisterForm = () => {
    const router = useRouter();

    const [form, setForm] = useState({
        name: '',
        email: '',
        password: '',
        subscribe: false,
    });

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value, type, checked } = e.target;
        setForm((prev) => ({
            ...prev,
            [name]: type === 'checkbox' ? checked : value,
        }));
    };

    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setLoading(true);
        setError(null);

        try {
            // ✅ Send POST request via Axios
            const response = await axios.post('https://api.crawlerx.co/api/auth/signup', {
                name: form.name,
                email: form.email,
                password: form.password,
                subscribe: form.subscribe,
            });

            alert('Signup successful!');
            router.push('/login');
        } catch (err: any) {
            // ✅ Axios error handling
            if (err.response) {
                // Server responded with status code out of 2xx
                setError(err.response.data.error || 'Signup failed');
            } else if (err.request) {
                // Request was made but no response
                setError('No response from server');
            } else {
                setError(err.message);
            }
        } finally {
            setLoading(false);
        }
    };

    return (
        <form className="space-y-5 dark:text-white" onSubmit={submitForm}>
            {error && <p className="text-red-500">{error}</p>}

            <div>
                <label htmlFor="name">Name</label>
                <div className="relative text-white-dark">
                    <input
                        id="name"
                        name="name"
                        type="text"
                        placeholder="Enter Name"
                        className="form-input ps-10 placeholder:text-white-dark"
                        value={form.name}
                        onChange={handleChange}
                    />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
                        <IconUser fill={true} />
                    </span>
                </div>
            </div>

            <div>
                <label htmlFor="email">Email</label>
                <div className="relative text-white-dark">
                    <input
                        id="email"
                        name="email"
                        type="email"
                        placeholder="Enter Email"
                        className="form-input ps-10 placeholder:text-white-dark"
                        value={form.email}
                        onChange={handleChange}
                    />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
                        <IconMail fill={true} />
                    </span>
                </div>
            </div>

            <div>
                <label htmlFor="password">Password</label>
                <div className="relative text-white-dark">
                    <input
                        id="password"
                        name="password"
                        type="password"
                        placeholder="Enter Password"
                        className="form-input ps-10 placeholder:text-white-dark"
                        value={form.password}
                        onChange={handleChange}
                    />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
                        <IconLockDots fill={true} />
                    </span>
                </div>
            </div>

            <div>
                <label className="flex cursor-pointer items-center">
                    <input
                        type="checkbox"
                        name="subscribe"
                        checked={form.subscribe}
                        className="form-checkbox bg-white dark:bg-black"
                        onChange={handleChange}
                    />
                    <span className="text-white-dark">Subscribe to weekly newsletter</span>
                </label>
            </div>

            <button
                type="submit"
                className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"
                disabled={loading}
            >
                {loading ? 'Signing up...' : 'Sign Up'}
            </button>
        </form>
    );
};

export default ComponentsAuthRegisterForm;