import { Link, useForm } from '@inertiajs/react';
import { AlertCircle, CheckCircle, Eye, EyeOff } from 'lucide-react';
import { FormEvent, useState } from 'react';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

interface Agreements {
    terms: boolean;
    consent: boolean;
    communication: boolean;
}

interface FormData {
    name: string;
    company: string;
    firmName: string;
    vkn: string;
    phone: string;
    email: string;
    password: string;
    agreements: Agreements;
}

export default function Register() {
    const [agreements, setAgreements] = useState<Agreements>({
        terms: false,
        consent: false,
        communication: false,
    });

    const [showPassword, setShowPassword] = useState(false);
    const [touchedFields, setTouchedFields] = useState<Set<string>>(new Set());

    const form = useForm<FormData>({
        name: '',
        company: '',
        firmName: '',
        vkn: '',
        phone: '',
        email: '',
        password: '',
        agreements: agreements,
    });

    const { data, setData, post, processing, errors, clearErrors, reset } =
        form as typeof form & {
            setData: (key: keyof FormData, value: any) => void;
            clearErrors: (key?: keyof FormData | string) => void;
        };

    // Helper: errors objesi dinamik indexlenince TS sıkıntı çıkarıyor.
    // Bu wrapper'lar runtime'da güvenli şekilde string path kullanmamızı sağlar.
    const getError = (path: string): string | undefined => {
        return (errors as Record<string, any>)[path];
    };

    const clearErrorPath = (path: string) => {
        clearErrors(path);
    };

    const handleCheckboxChange = (key: keyof Agreements) => {
        const updated = { ...agreements, [key]: !agreements[key] };
        setAgreements(updated);
        // setData için key olarak 'agreements' ve value olarak updated veriyoruz
        setData('agreements', updated);
        clearErrorPath(`agreements.${key}`);
    };

    const handleInputChange = (field: string, value: string) => {
        // setData overload'ı field:string için generic tip almadığı için cast yapıyoruz
        setData(field as unknown as keyof FormData, value as any);
        if (touchedFields.has(field)) {
            clearErrorPath(field);
        }
    };

    const handleBlur = (field: string) => {
        setTouchedFields((prev) => new Set(prev).add(field));
    };

    // Giriş Adresi için özel handler - Türkçe karakter, boşluk, büyük harf kontrolü
    const handleFirmNameChange = (value: string) => {
        const turkishChars: { [key: string]: string } = {
            ç: 'c',
            ğ: 'g',
            ı: 'i',
            İ: 'i',
            ö: 'o',
            ş: 's',
            ü: 'u',
            Ç: 'c',
            Ğ: 'g',
            Ö: 'o',
            Ş: 's',
            Ü: 'u',
        };

        let cleaned = value.toLowerCase();

        Object.keys(turkishChars).forEach((char) => {
            cleaned = cleaned.replace(
                new RegExp(char, 'g'),
                turkishChars[char],
            );
        });

        cleaned = cleaned.replace(/\s+/g, '-');
        cleaned = cleaned.replace(/[^a-z0-9-]/g, '');
        cleaned = cleaned.replace(/-+/g, '-');
        cleaned = cleaned.replace(/^-+|-+$/g, '');

        handleInputChange('firmName', cleaned);
    };

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();

        setTouchedFields(
            new Set([
                'name',
                'company',
                'firmName',
                'vkn',
                'phone',
                'email',
                'password',
            ]),
        );

        // Debug için
        console.log('Gönderilen data:', data);

        post(route('frontend.register.store'), {
            onSuccess: (response) => {
                console.log('Success response:', response);
                reset();
                setAgreements({
                    terms: false,
                    consent: false,
                    communication: false,
                });
            },
            onError: (errors) => {
                console.log('Error response:', errors);
                setTimeout(() => {
                    const firstError = document.querySelector(
                        '[data-error="true"]',
                    );
                    firstError?.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center',
                    });
                }, 100);
            },
        });
    };

    const allChecked =
        agreements.terms && agreements.consent && agreements.communication;

    // Helper: Input'un hatalı olup olmadığını kontrol et
    const hasError = (field: string): boolean => {
        return !!(getError(field) && touchedFields.has(field));
    };

    // Şifre gücü kontrolü
    const getPasswordStrength = (
        password: string,
    ): { strength: number; label: string; color: string } => {
        let strength = 0;
        if (password.length >= 8) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/\d/.test(password)) strength++;
        if (/[^a-zA-Z0-9]/.test(password)) strength++;

        if (strength <= 2)
            return { strength, label: 'Zayıf', color: 'bg-red-500' };
        if (strength === 3)
            return { strength, label: 'Orta', color: 'bg-yellow-500' };
        if (strength === 4)
            return { strength, label: 'Güçlü', color: 'bg-green-500' };
        return { strength, label: 'Çok Güçlü', color: 'bg-green-600' };
    };

    const passwordStrength = data.password
        ? getPasswordStrength(data.password)
        : null;

    // Agreements hataları (dot-path kullanarak kontrol)
    const agreementErrors = [
        getError('agreements.terms'),
        getError('agreements.consent'),
        getError('agreements.communication'),
    ].filter(Boolean) as string[];

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

                        {/* Ad Soyad */}
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                Ad Soyad <span className="text-red-500">*</span>
                            </label>
                            <input
                                type="text"
                                value={data.name}
                                onChange={(e) =>
                                    handleInputChange('name', e.target.value)
                                }
                                onBlur={() => handleBlur('name')}
                                data-error={hasError('name')}
                                className={`w-full rounded-xl border py-3 pl-4 outline-none transition ${
                                    hasError('name')
                                        ? 'border-red-500 focus:ring-2 focus:ring-red-500'
                                        : 'border-gray-300 focus:border-transparent focus:ring-2 focus:ring-blue-500'
                                }`}
                                placeholder="Ad Soyad"
                            />
                            {hasError('name') && (
                                <p className="mt-1 flex items-center text-sm text-red-600">
                                    <AlertCircle className="mr-1 h-4 w-4" />
                                    {getError('name')}
                                </p>
                            )}
                        </div>

                        {/* Firma / Şahıs Adı */}
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                Firma / Şahıs Adı{' '}
                                <span className="text-red-500">*</span>
                            </label>
                            <input
                                type="text"
                                value={data.company}
                                onChange={(e) =>
                                    handleInputChange('company', e.target.value)
                                }
                                onBlur={() => handleBlur('company')}
                                data-error={hasError('company')}
                                className={`w-full rounded-xl border py-3 pl-4 outline-none transition ${
                                    hasError('company')
                                        ? 'border-red-500 focus:ring-2 focus:ring-red-500'
                                        : 'border-gray-300 focus:border-transparent focus:ring-2 focus:ring-blue-500'
                                }`}
                                placeholder="Firma / Şahıs Adı"
                            />
                            {hasError('company') && (
                                <p className="mt-1 flex items-center text-sm text-red-600">
                                    <AlertCircle className="mr-1 h-4 w-4" />
                                    {getError('company')}
                                </p>
                            )}
                        </div>

                        {/* Giriş Adresi */}
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                Giriş Adresi{' '}
                                <span className="text-red-500">*</span>
                            </label>
                            <div className="relative">
                                <input
                                    type="text"
                                    value={data.firmName}
                                    onChange={(e) =>
                                        handleFirmNameChange(e.target.value)
                                    }
                                    onBlur={() => handleBlur('firmName')}
                                    data-error={hasError('firmName')}
                                    className={`w-full rounded-xl border py-3 pl-4 pr-32 outline-none transition ${
                                        hasError('firmName')
                                            ? 'border-red-500 focus:ring-2 focus:ring-red-500'
                                            : 'border-gray-300 focus:border-transparent focus:ring-2 focus:ring-blue-500'
                                    }`}
                                    placeholder="firma-adi"
                                />
                                <span className="absolute right-4 top-1/2 -translate-y-1/2 transform font-medium text-gray-500">
                                    .marsms.com
                                </span>
                            </div>
                            <p className="mt-1 text-xs text-gray-500">
                                Sadece küçük harf, rakam ve tire (-)
                                kullanabilirsiniz
                            </p>
                            {hasError('firmName') && (
                                <p className="mt-1 flex items-center text-sm text-red-600">
                                    <AlertCircle className="mr-1 h-4 w-4" />
                                    {getError('firmName')}
                                </p>
                            )}
                            {data.firmName &&
                                !getError('firmName') &&
                                touchedFields.has('firmName') &&
                                data.firmName.length >= 3 && (
                                    <p className="mt-1 flex items-center text-sm text-green-600">
                                        <CheckCircle className="mr-1 h-4 w-4" />
                                        Giriş adresiniz: {data.firmName}
                                        .marsms.com
                                    </p>
                                )}
                        </div>

                        {/* TCKN/VKN */}
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                TCKN / VKN{' '}
                                <span className="text-red-500">*</span>
                            </label>
                            <input
                                type="text"
                                value={data.vkn}
                                onChange={(e) =>
                                    handleInputChange(
                                        'vkn',
                                        e.target.value.replace(/\D/g, ''),
                                    )
                                }
                                onBlur={() => handleBlur('vkn')}
                                maxLength={11}
                                data-error={hasError('vkn')}
                                className={`w-full rounded-xl border py-3 pl-4 outline-none transition ${
                                    hasError('vkn')
                                        ? 'border-red-500 focus:ring-2 focus:ring-red-500'
                                        : 'border-gray-300 focus:border-transparent focus:ring-2 focus:ring-blue-500'
                                }`}
                                placeholder="TCKN (11 haneli) veya VKN (10 haneli)"
                            />
                            {hasError('vkn') && (
                                <p className="mt-1 flex items-center text-sm text-red-600">
                                    <AlertCircle className="mr-1 h-4 w-4" />
                                    {getError('vkn')}
                                </p>
                            )}
                            {data.vkn &&
                                !getError('vkn') &&
                                touchedFields.has('vkn') && (
                                    <p className="mt-1 text-xs text-gray-500">
                                        {data.vkn.length === 11
                                            ? 'TCKN (11 haneli)'
                                            : data.vkn.length === 10
                                              ? 'VKN (10 haneli)'
                                              : `${data.vkn.length}/11 karakter`}
                                    </p>
                                )}
                        </div>

                        {/* Telefon */}
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                Telefon Numarası{' '}
                                <span className="text-red-500">*</span>
                            </label>
                            <PhoneInput
                                country={'tr'}
                                value={data.phone}
                                onChange={(value) => {
                                    setData('phone', value as any);
                                    if (touchedFields.has('phone'))
                                        clearErrorPath('phone');
                                }}
                                onBlur={() => handleBlur('phone')}
                                inputProps={{
                                    name: 'phone',
                                    required: true,
                                    'data-error': hasError('phone'),
                                }}
                                containerClass="!w-full"
                                inputClass={`!w-full !h-[52px] !rounded-xl !pl-14 !pr-4 !text-[15px] !text-gray-800 !placeholder-gray-400 !border !outline-none !transition-all ${
                                    hasError('phone')
                                        ? '!border-red-500 focus:!ring-2 focus:!ring-red-500'
                                        : '!border-gray-300 focus:!border-transparent focus:!ring-2 focus:!ring-blue-500'
                                }`}
                                buttonClass="!border-gray-300 !rounded-l-xl !bg-white hover:!bg-gray-50"
                                dropdownClass="!text-sm"
                                countryCodeEditable={false}
                                disableDropdown={false}
                                enableSearch={false}
                                placeholder="5XX XXX XX XX"
                            />
                            {hasError('phone') && (
                                <p className="mt-1 flex items-center text-sm text-red-600">
                                    <AlertCircle className="mr-1 h-4 w-4" />
                                    {getError('phone')}
                                </p>
                            )}
                        </div>

                        {/* E-posta */}
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                E-posta Adresi{' '}
                                <span className="text-red-500">*</span>
                            </label>
                            <input
                                type="email"
                                value={data.email}
                                onChange={(e) =>
                                    handleInputChange(
                                        'email',
                                        e.target.value.toLowerCase(),
                                    )
                                }
                                onBlur={() => handleBlur('email')}
                                data-error={hasError('email')}
                                className={`w-full rounded-xl border py-3 pl-4 outline-none transition ${
                                    hasError('email')
                                        ? 'border-red-500 focus:ring-2 focus:ring-red-500'
                                        : 'border-gray-300 focus:border-transparent focus:ring-2 focus:ring-blue-500'
                                }`}
                                placeholder="ornek@email.com"
                            />
                            {hasError('email') && (
                                <p className="mt-1 flex items-center text-sm text-red-600">
                                    <AlertCircle className="mr-1 h-4 w-4" />
                                    {getError('email')}
                                </p>
                            )}
                        </div>

                        {/* Şifre */}
                        <div className="mb-6">
                            <label className="mb-2 block text-sm font-medium text-gray-700">
                                Şifre <span className="text-red-500">*</span>
                            </label>
                            <div className="relative">
                                <input
                                    type={showPassword ? 'text' : 'password'}
                                    value={data.password}
                                    onChange={(e) =>
                                        handleInputChange(
                                            'password',
                                            e.target.value,
                                        )
                                    }
                                    onBlur={() => handleBlur('password')}
                                    data-error={hasError('password')}
                                    className={`w-full rounded-xl border py-3 pl-4 pr-12 outline-none transition ${
                                        hasError('password')
                                            ? 'border-red-500 focus:ring-2 focus:ring-red-500'
                                            : 'border-gray-300 focus:border-transparent focus:ring-2 focus:ring-blue-500'
                                    }`}
                                    placeholder="En az 8 karakter"
                                />
                                <button
                                    type="button"
                                    onClick={() =>
                                        setShowPassword(!showPassword)
                                    }
                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                                >
                                    {showPassword ? (
                                        <EyeOff className="h-5 w-5" />
                                    ) : (
                                        <Eye className="h-5 w-5" />
                                    )}
                                </button>
                            </div>

                            {/* Şifre Gücü Göstergesi */}
                            {data.password && passwordStrength && (
                                <div className="mt-2">
                                    <div className="flex items-center justify-between text-xs text-gray-600">
                                        <span>
                                            Şifre Gücü:{' '}
                                            <span className="font-medium">
                                                {passwordStrength.label}
                                            </span>
                                        </span>
                                        <span className="text-gray-500">
                                            {passwordStrength.strength}/5
                                        </span>
                                    </div>
                                    <div className="mt-1 flex gap-1">
                                        {[1, 2, 3, 4, 5].map((level) => (
                                            <div
                                                key={level}
                                                className={`h-1 flex-1 rounded transition-all duration-300 ${
                                                    level <=
                                                    passwordStrength.strength
                                                        ? passwordStrength.color
                                                        : 'bg-gray-200'
                                                }`}
                                            />
                                        ))}
                                    </div>
                                    <div className="mt-2 space-y-1 text-xs text-gray-600">
                                        <div
                                            className={`flex items-center ${data.password.length >= 8 ? 'text-green-600' : ''}`}
                                        >
                                            <span className="mr-1">
                                                {data.password.length >= 8
                                                    ? '✓'
                                                    : '○'}
                                            </span>
                                            En az 8 karakter
                                        </div>
                                        <div
                                            className={`flex items-center ${/[A-Z]/.test(data.password) ? 'text-green-600' : ''}`}
                                        >
                                            <span className="mr-1">
                                                {/[A-Z]/.test(data.password)
                                                    ? '✓'
                                                    : '○'}
                                            </span>
                                            En az 1 büyük harf
                                        </div>
                                        <div
                                            className={`flex items-center ${/[a-z]/.test(data.password) ? 'text-green-600' : ''}`}
                                        >
                                            <span className="mr-1">
                                                {/[a-z]/.test(data.password)
                                                    ? '✓'
                                                    : '○'}
                                            </span>
                                            En az 1 küçük harf
                                        </div>
                                        <div
                                            className={`flex items-center ${/\d/.test(data.password) ? 'text-green-600' : ''}`}
                                        >
                                            <span className="mr-1">
                                                {/\d/.test(data.password)
                                                    ? '✓'
                                                    : '○'}
                                            </span>
                                            En az 1 rakam
                                        </div>
                                    </div>
                                </div>
                            )}

                            {hasError('password') && (
                                <p className="mt-1 flex items-center text-sm text-red-600">
                                    <AlertCircle className="mr-1 h-4 w-4" />
                                    {getError('password')}
                                </p>
                            )}
                        </div>

                        {/* Checkboxlar */}
                        <div className="mb-6 space-y-3 text-sm text-gray-700">
                            <label
                                className={`flex items-start space-x-2 rounded-lg p-2 transition ${
                                    getError('agreements.terms')
                                        ? 'bg-red-50'
                                        : ''
                                }`}
                            >
                                <input
                                    type="checkbox"
                                    checked={agreements.terms}
                                    onChange={() =>
                                        handleCheckboxChange('terms')
                                    }
                                    className="mt-1 h-4 w-4 rounded border-gray-300 text-[#FF6000] focus:ring-[#FF6000]"
                                />
                                <span>
                                    <Link
                                        href="/kullanici-sozlesmesi"
                                        className="text-[#FF6000] hover:underline"
                                    >
                                        Kullanıcı Sözleşmesi'ni
                                    </Link>{' '}
                                    okudum, onaylıyorum.{' '}
                                    <span className="text-red-500">*</span>
                                </span>
                            </label>

                            <label
                                className={`flex items-start space-x-2 rounded-lg p-2 transition ${
                                    getError('agreements.consent')
                                        ? 'bg-red-50'
                                        : ''
                                }`}
                            >
                                <input
                                    type="checkbox"
                                    checked={agreements.consent}
                                    onChange={() =>
                                        handleCheckboxChange('consent')
                                    }
                                    className="mt-1 h-4 w-4 rounded border-gray-300 text-[#FF6000] focus:ring-[#FF6000]"
                                />
                                <span>
                                    <Link
                                        href="/aydinlatma-metni"
                                        className="text-[#FF6000] hover:underline"
                                    >
                                        Aydınlatma Metni
                                    </Link>{' '}
                                    uyarınca kişisel verilerimin işlenmesine ve
                                    aktarılmasına{' '}
                                    <Link
                                        href="/acik-riza-metni"
                                        className="text-[#FF6000] hover:underline"
                                    >
                                        Açık Rıza Metni
                                    </Link>{' '}
                                    kapsamında açık rıza veriyorum.{' '}
                                    <span className="text-red-500">*</span>
                                </span>
                            </label>

                            <label
                                className={`flex items-start space-x-2 rounded-lg p-2 transition ${
                                    getError('agreements.communication')
                                        ? 'bg-red-50'
                                        : ''
                                }`}
                            >
                                <input
                                    type="checkbox"
                                    checked={agreements.communication}
                                    onChange={() =>
                                        handleCheckboxChange('communication')
                                    }
                                    className="mt-1 h-4 w-4 rounded border-gray-300 text-[#FF6000] focus:ring-[#FF6000]"
                                />
                                <span>
                                    Marsms tarafından{' '}
                                    <Link
                                        href="/aydinlatma-metni"
                                        className="text-[#FF6000] hover:underline"
                                    >
                                        Aydınlatma Metni
                                    </Link>{' '}
                                    uyarınca tarafıma ticari elektronik ileti
                                    gönderilmesine{' '}
                                    <Link
                                        href="/acik-riza-metni"
                                        className="text-[#FF6000] hover:underline"
                                    >
                                        Açık Rıza Metni
                                    </Link>{' '}
                                    kapsamında onay veriyorum.{' '}
                                    <span className="text-red-500">*</span>
                                </span>
                            </label>

                            {/* Agreement Hataları */}
                            {agreementErrors.length > 0 && (
                                <div className="rounded-lg border border-red-200 bg-red-50 p-3">
                                    {agreementErrors.map((error, index) => (
                                        <p
                                            key={index}
                                            className="flex items-center text-sm text-red-600"
                                        >
                                            <AlertCircle className="mr-1 h-4 w-4 flex-shrink-0" />
                                            {error}
                                        </p>
                                    ))}
                                </div>
                            )}
                        </div>

                        {/* Kayıt Ol */}
                        <button
                            type="submit"
                            disabled={!allChecked || processing}
                            className={`mb-6 w-full rounded-xl py-3 font-medium text-white transition-all ${
                                allChecked && !processing
                                    ? 'bg-[#D97707] hover:bg-[#E55500] hover:shadow-lg'
                                    : 'cursor-not-allowed bg-gray-300'
                            }`}
                        >
                            {processing ? (
                                <span className="flex items-center justify-center">
                                    <svg
                                        className="mr-2 h-5 w-5 animate-spin"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                    >
                                        <circle
                                            className="opacity-25"
                                            cx="12"
                                            cy="12"
                                            r="10"
                                            stroke="currentColor"
                                            strokeWidth="4"
                                        />
                                        <path
                                            className="opacity-75"
                                            fill="currentColor"
                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                        />
                                    </svg>
                                    Gönderiliyor...
                                </span>
                            ) : (
                                'Kayıt Ol'
                            )}
                        </button>
                    </form>

                    {/* Giriş Linki */}
                    <div className="text-center text-sm text-gray-600">
                        Hesabınız var mı?{' '}
                        <Link
                            href="/login"
                            className="font-medium text-[#FF6000] hover:underline"
                        >
                            Giriş Yap
                        </Link>
                    </div>
                </div>
            </div>

            {/* Sağ Taraf - Görsel */}
            <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>
    );
}