import React, { useEffect, useMemo, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { LoaderCircle, User, Mail, Phone, Lock, MapPin } from 'lucide-react';
import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
import { Alert, AlertDescription } from '@/components/ui/alert';

interface RegisterFormProps {
  packageId?: number;
  onSuccess?: (payload: any) => void;
  privacyHtml: string;
}

const getCsrfToken = () =>
  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';

export default function RegisterForm({ packageId, onSuccess, privacyHtml }: RegisterFormProps) {
  const { t } = useTranslation(['auth', 'common']);
  const csrfToken = useMemo(getCsrfToken, []);

  const { data, setData, errors, setError, clearErrors, reset } = useForm({
    username: '',
    email: '',
    password: '',
    password_confirmation: '',
    first_name: '',
    last_name: '',
    address: '',
    phone: '',
    privacy_consent: false,
    package_id: packageId ?? null,
  });

  const [privacyOpen, setPrivacyOpen] = useState(false);
  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);

  useEffect(() => {
    setData('package_id', packageId ?? null);
  }, [packageId]);

  useEffect(() => {
    if (!hasTriedSubmit) {
      return;
    }

    const errorKeys = Object.keys(errors);
    if (errorKeys.length === 0) {
      return;
    }

    const firstError = errorKeys[0];
    const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement>(`[name="${firstError}"]`);

    if (field) {
      field.scrollIntoView({ behavior: 'smooth', block: 'center' });
      field.focus();
    }
  }, [errors, hasTriedSubmit]);

  const parseJson = async (response: Response) => {
    if (response.headers.get('Content-Type')?.includes('application/json')) {
      const json = await response.json().catch(() => null);
      if (json) return json;
    }
  
    const text = await response.text();
    throw new Error(text || 'Invalid server response (unexpected end of data or non-JSON).');
  };
  
  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setHasTriedSubmit(true);
    setSubmitting(true);
    setFormError(null);
    clearErrors();
  
    try {
      const response = await fetch('/purchase/auth/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'X-CSRF-TOKEN': csrfToken,
          'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify({
          ...data,
          privacy_consent: Boolean(data.privacy_consent),
        }),
      });
  
      if (response.ok) {
        const payload = await parseJson(response);
        reset({
          username: '',
          email: '',
          password: '',
          password_confirmation: '',
          first_name: '',
          last_name: '',
          address: '',
          phone: '',
          privacy_consent: false,
          package_id: packageId ?? null,
        });
        setHasTriedSubmit(false);
        if (onSuccess) {
          onSuccess(payload);
        }
        return;
      }
  
      if (response.status === 422) {
        const body = await parseJson(response);
        const validationErrors = body.errors ?? {};
        let fallbackMessage: string | null = body.message ?? null;
  
        Object.entries(validationErrors).forEach(([key, value]) => {
          const message = Array.isArray(value) ? value[0] : value;
          if (typeof message === 'string') {
            setError(key, message);
            if (!fallbackMessage) {
              fallbackMessage = message;
            }
          }
        });
  
        if (fallbackMessage) {
          setFormError(fallbackMessage);
        }
        return;
      }
  
      setFormError(t('register.generic_error', { defaultValue: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' }));
    } catch (error) {
      const message = (error as Error).message || t('register.generic_error', { defaultValue: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' });
      setFormError(message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form className="space-y-6" onSubmit={submit} noValidate>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="md:col-span-1">
          <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.first_name')} {t('common:required')}
          </label>
          <div className="relative">
            <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              id="first_name"
              name="first_name"
              type="text"
              required
              value={data.first_name}
              onChange={(event) => {
                setData('first_name', event.target.value);
                if (errors.first_name) {
                  clearErrors('first_name');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.first_name ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.first_name_placeholder')}
            />
          </div>
          {errors.first_name && <p className="text-sm text-red-600 mt-1">{errors.first_name}</p>}
        </div>

        <div className="md:col-span-1">
          <label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.last_name')} {t('common:required')}
          </label>
          <div className="relative">
            <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              id="last_name"
              name="last_name"
              type="text"
              required
              value={data.last_name}
              onChange={(event) => {
                setData('last_name', event.target.value);
                if (errors.last_name) {
                  clearErrors('last_name');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.last_name ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.last_name_placeholder')}
            />
          </div>
          {errors.last_name && <p className="text-sm text-red-600 mt-1">{errors.last_name}</p>}
        </div>

        <div className="md:col-span-2">
          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.email')} {t('common:required')}
          </label>
          <div className="relative">
            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              id="email"
              name="email"
              type="email"
              required
              value={data.email}
              onChange={(event) => {
                setData('email', event.target.value);
                if (errors.email) {
                  clearErrors('email');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.email_placeholder')}
            />
          </div>
          {errors.email && <p className="text-sm text-red-600 mt-1">{errors.email}</p>}
        </div>

        <div className="md:col-span-1">
          <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.username')} {t('common:required')}
          </label>
          <div className="relative">
            <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              id="username"
              name="username"
              type="text"
              required
              value={data.username}
              onChange={(event) => {
                setData('username', event.target.value);
                if (errors.username) {
                  clearErrors('username');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.username_placeholder')}
            />
          </div>
          {errors.username && <p className="text-sm text-red-600 mt-1">{errors.username}</p>}
        </div>

        <div className="md:col-span-1">
          <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.phone')} {t('common:required')}
          </label>
          <div className="relative">
            <Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              id="phone"
              name="phone"
              type="tel"
              required
              value={data.phone}
              onChange={(event) => {
                setData('phone', event.target.value);
                if (errors.phone) {
                  clearErrors('phone');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.phone ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.phone_placeholder')}
            />
          </div>
          {errors.phone && <p className="text-sm text-red-600 mt-1">{errors.phone}</p>}
        </div>

        <div className="md:col-span-2">
          <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.address')} {t('common:required')}
          </label>
          <div className="relative">
            <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <textarea
              id="address"
              name="address"
              required
              value={data.address}
              onChange={(event) => {
                setData('address', event.target.value);
                if (errors.address) {
                  clearErrors('address');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.address_placeholder')}
            />
          </div>
          {errors.address && <p className="text-sm text-red-600 mt-1">{errors.address}</p>}
        </div>

        <div className="md:col-span-1">
          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.password')} {t('common:required')}
          </label>
          <div className="relative">
            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              id="password"
              name="password"
              type="password"
              required
              value={data.password}
              onChange={(event) => {
                setData('password', event.target.value);
                if (errors.password) {
                  clearErrors('password');
                }
                if (data.password_confirmation && event.target.value === data.password_confirmation) {
                  clearErrors('password_confirmation');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.password_placeholder')}
            />
          </div>
          {errors.password && <p className="text-sm text-red-600 mt-1">{errors.password}</p>}
        </div>

        <div className="md:col-span-1">
          <label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700 mb-1">
            {t('register.confirm_password')} {t('common:required')}
          </label>
          <div className="relative">
            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              id="password_confirmation"
              name="password_confirmation"
              type="password"
              required
              value={data.password_confirmation}
              onChange={(event) => {
                setData('password_confirmation', event.target.value);
                if (errors.password_confirmation) {
                  clearErrors('password_confirmation');
                }
                if (data.password && event.target.value === data.password) {
                  clearErrors('password_confirmation');
                }
              }}
              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password_confirmation ? 'border-red-500' : 'border-gray-300'}`}
              placeholder={t('register.confirm_password_placeholder')}
            />
          </div>
          {errors.password_confirmation && <p className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
        </div>

        <div className="md:col-span-2 flex items-start">
          <input
            id="privacy_consent"
            name="privacy_consent"
            type="checkbox"
            required
            checked={data.privacy_consent}
            onChange={(event) => {
              setData('privacy_consent', event.target.checked);
              if (event.target.checked && errors.privacy_consent) {
                clearErrors('privacy_consent');
              }
            }}
            className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
          />
          <label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
            {t('register.privacy_consent')}{' '}
            <button
              type="button"
              onClick={() => setPrivacyOpen(true)}
              className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium"
            >
              {t('register.privacy_policy')}
            </button>.
          </label>
          {errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
        </div>
      </div>

      {(formError || Object.keys(errors).length > 0) && (
        <Alert>
          {formError && <AlertDescription>{formError}</AlertDescription>}
          {Object.keys(errors).length > 0 && !formError && (
            <AlertDescription>{Object.values(errors).join(' ')}</AlertDescription>
          )}
        </Alert>
      )}

      <button
        type="submit"
        disabled={submitting}
        className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
      >
        {submitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
        {t('register.submit')}
      </button>

      <Dialog open={privacyOpen} onOpenChange={setPrivacyOpen}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto p-0">
          <DialogTitle className="sr-only">Datenschutzerkl�rung</DialogTitle>
          <DialogDescription className="sr-only">Lesen Sie unsere Datenschutzerkl�rung.</DialogDescription>
          <div className="p-6">
            <div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
          </div>
        </DialogContent>
      </Dialog>
    </form>
  );
}