import { useState } from 'react';
import { Link, router } from '@inertiajs/react';

export default function Login() {
    const [firmName, setFirmName] = useState('');
    const [error, setError] = useState('');

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setError('');

        router.post(
            route('front.check-domain'),
            { firmName },
            {
                preserveScroll: true,
                onError: (errors: Record<string, string>) => {
                    setError(errors?.firmName || 'Böyle bir kullanıcı bulunamadı.');
                },
            }
        );
    };

    return (
        <div className="flex min-h-screen">
            {/* Left Side - Login Form */}
            <div className="flex w-full items-center justify-center bg-white p-8 lg:w-[40%]">
                <div className="w-full max-w-md">
                    {/* Logo */}
                    <div className="mb-10 flex justify-center">
                        <img
                            src="/assets/logo.png"
                            alt="MarsMS Logo"
                            className="h-16 w-auto"
                        />
                    </div>

                    {/* Form */}
                    <form onSubmit={handleSubmit}>
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                Firma Adı
                            </label>
                            <div className="relative">
                                <input
                                    type="text"
                                    value={firmName}
                                    onChange={(e) => setFirmName(e.target.value)}
                                    className="w-full rounded-xl border border-gray-300 py-3 pl-4 pr-32 outline-none transition focus:border-transparent focus:ring-2 focus:ring-blue-500"
                                    placeholder="Firma Adınız"
                                />
                                <span className="absolute right-4 top-1/2 -translate-y-1/2 transform font-medium text-gray-500">
                                    .marsms.test
                                </span>
                            </div>
                            {error && (
                                <p className="mt-2 text-sm text-red-500">{error}</p>
                            )}
                        </div>

                        <button
                            type="submit"
                            className="mb-6 w-full rounded-xl bg-[#D97707] py-3 font-medium text-white transition-colors hover:bg-[#E55500]"
                        >
                            Devam Et
                        </button>
                    </form>

                    {/* Register link */}
                    <div className="text-center text-sm text-gray-600">
                        Hesabınız yok mu?{' '}
                        <Link
                            href={route('front.register')}
                            className="text-[#FF6000] hover:underline"
                        >
                            Kayıt Ol
                        </Link>
                    </div>
                </div>
            </div>

            {/* Right Side */}
            <div className="relative hidden items-center justify-center overflow-hidden p-12 lg:flex lg:w-[60%]">
                <div
                    className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                    style={{
                        backgroundImage:
                            'url(https://cdn.dsmcdn.com/seller-center/seller-center-auth/images/login-bg.png)',
                    }}
                />
                <div className="relative z-10 max-w-3xl text-center">
                    <h1 className="mb-6 text-balance text-6xl font-bold">
                        <span className="text-[#FF6000]">10+</span>{' '}
                        <span className="text-[#FF6000]">Bin</span>{' '}
                        <span className="text-white">Kullanıcı Bize Güveniyor!</span>
                    </h1>
                    <p className="mb-8 text-xl text-white">
                        Yüzbinlerce satıcı iş ortağımız bize güveniyor!
                    </p>
                </div>
            </div>
        </div>
    );
}