import React from 'react';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import MarketingLayout from '@/layouts/mainWebsite';
import { Loader2, CheckCircle2 } from 'lucide-react';

const Kontakt: React.FC = () => {
  const { data, setData, post, processing, errors, reset } = useForm({
    name: '',
    email: '',
    message: '',
    nickname: '',
  });

  const { flash } = usePage<{ flash?: { success?: string } }>().props;
  const { t } = useTranslation('marketing');
  const { localizedPath } = useLocalizedRoutes();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    post(localizedPath('/kontakt'), {
      onSuccess: () => reset(),
    });
  };

  React.useEffect(() => {
    if (Object.keys(errors).length > 0) {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }, [errors]);

  return (
    <MarketingLayout title={t('kontakt.title')}>
      <Head title={t('kontakt.title')} />
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-2xl mx-auto">
          <h1 className="text-3xl font-bold text-center mb-8 font-display text-gray-900 dark:text-gray-100">{t('kontakt.title')}</h1>
          <p className="text-center text-gray-600 dark:text-gray-300 mb-8 font-sans-marketing">{t('kontakt.description')}</p>
          {flash?.success && (
            <div className="mb-4 flex items-center gap-2 rounded-xl border border-emerald-200/70 bg-emerald-50 px-3 py-2 text-sm text-emerald-800 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-100">
              <CheckCircle2 className="h-4 w-4" />
              <span>{flash.success}</span>
            </div>
          )}
          <form key={`kontakt-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
            <input
              type="text"
              name="nickname"
              value={data.nickname}
              onChange={(e) => setData('nickname', e.target.value)}
              className="hidden"
              tabIndex={-1}
              autoComplete="off"
              aria-hidden
            />
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.name')}</label>
              <input
                type="text"
                id="name"
                value={data.name}
                onChange={(e) => setData('name', e.target.value)}
                required
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                aria-invalid={Boolean(errors.name)}
                aria-describedby={errors.name ? 'kontakt-name-error' : undefined}
              />
              {errors.name && <p id="kontakt-name-error" key="error-name" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
            </div>
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.email')}</label>
              <input
                type="email"
                id="email"
                value={data.email}
                onChange={(e) => setData('email', e.target.value)}
                required
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                aria-invalid={Boolean(errors.email)}
                aria-describedby={errors.email ? 'kontakt-email-error' : undefined}
              />
              {errors.email && <p id="kontakt-email-error" key="error-email" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
            </div>
            <div>
              <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.message')}</label>
              <textarea
                id="message"
                value={data.message}
                onChange={(e) => setData('message', e.target.value)}
                rows={4}
                required
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                aria-invalid={Boolean(errors.message)}
                aria-describedby={errors.message ? 'kontakt-message-error' : undefined}
              ></textarea>
              {errors.message && <p id="kontakt-message-error" key="error-message" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
            </div>
            <button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
              {processing ? (
                <span className="flex items-center justify-center gap-2">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  {t('kontakt.sending')}
                </span>
              ) : (
                t('kontakt.send')
              )}
            </button>
          </form>
          {flash?.success && <p className="mt-4 text-green-600 dark:text-green-400 text-center font-serif-custom">{flash.success}</p>}
          {Object.keys(errors).length > 0 && (
            <div key={`general-errors-${Object.keys(errors).join('-')}`} className="mt-4 p-4 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-600 rounded-md">
              <ul className="list-disc list-inside">
                {Object.values(errors).map((error, index) => (
                  <li key={`error-${index}`} className="font-serif-custom text-red-700 dark:text-red-300">{error}</li>
                ))}
              </ul>
            </div>
          )}
          <div className="mt-8 text-center">
            <Link href={localizedPath('/')} className="text-[#FFB6C1] hover:underline font-sans-marketing">{t('kontakt.back_home')}</Link>
          </div>
        </div>
      </div>
    </MarketingLayout>
  );
};

Kontakt.layout = (page: React.ReactNode) => page;

export default Kontakt;
