import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useEventData } from '../hooks/useEventData';
import { useGuestIdentity } from '../context/GuestIdentityContext';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { useTranslation } from '../i18n/useTranslation';
import { motion } from 'framer-motion';
import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';

export default function ProfileSetupPage() {
  const { token } = useParams<{ token: string }>();
  const nav = useNavigate();
  const { event, loading, error } = useEventData();
  const { name: storedName, setName: persistName, hydrated } = useGuestIdentity();
  const [name, setName] = useState(storedName);
  const [submitting, setSubmitting] = useState(false);
  const { t } = useTranslation();
  const motionEnabled = !prefersReducedMotion();
  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);

  useEffect(() => {
    if (!token) {
      nav('/');
      return;
    }
  }, [token, nav]);

  useEffect(() => {
    if (hydrated) {
      setName(storedName);
    }
  }, [hydrated, storedName]);

  function handleChange(value: string) {
    setName(value);
  }

  function submitName() {
    if (!token) return;
    const trimmedName = name.trim();
    if (!trimmedName) return;

    setSubmitting(true);
    try {
      persistName(trimmedName);
      nav(`/e/${token}`);
    } catch (e) {
      console.error('Fehler beim Speichern des Namens:', e);
      setSubmitting(false);
    }
  }

  if (loading) {
    return (
      <div className="flex justify-center items-center h-32">
        <div className="text-lg">{t('profileSetup.loading')}</div>
      </div>
    );
  }

  if (error || !event) {
    return (
      <div className="text-center p-4">
        <p className="text-red-600 mb-4">{error || t('profileSetup.error.default')}</p>
        <Button onClick={() => nav('/')}>{t('profileSetup.error.backToStart')}</Button>
      </div>
    );
  }

  return (
    <motion.div className="min-h-screen bg-gradient-to-b from-pink-50 to-purple-50 flex flex-col" {...containerMotion}>
      <motion.div className="flex-1 flex flex-col justify-center items-center px-4 py-8" {...fadeUpMotion}>
        <motion.div {...fadeScaleMotion} className="w-full max-w-md">
          <Card>
          <CardHeader className="text-center space-y-2">
            <CardTitle className="text-2xl font-bold text-gray-900">{event.name}</CardTitle>
            <CardDescription className="text-lg text-gray-600">
              {t('profileSetup.card.description')}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4 p-6">
            <div className="space-y-2">
              <Label htmlFor="name" className="text-sm font-medium">{t('profileSetup.form.label')}</Label>
              <Input
                id="name"
                value={name}
                onChange={(e) => handleChange(e.target.value)}
                placeholder={t('profileSetup.form.placeholder')}
                className="text-lg"
                disabled={submitting || !hydrated}
                autoComplete="name"
              />
            </div>
            <Button
              className="w-full bg-gradient-to-r from-pink-500 to-pink-600 hover:from-pink-600 hover:to-pink-700 text-white py-3 text-base font-semibold rounded-xl"
              onClick={submitName}
              disabled={submitting || !name.trim() || !hydrated}
            >
              {submitting ? t('profileSetup.form.submitting') : t('profileSetup.form.submit')}
            </Button>
          </CardContent>
          </Card>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}