'use client';

import { useState, useTransition } from 'react';
import { motion } from 'framer-motion';
import { User, Mail, Save, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
import { updateProfile } from '@/services/profile-actions';

import { useI18n } from '@/i18n/I18nContext';

interface ProfileFormProps {
    initialData: {
        email?: string;
        username?: string | null;
    };
}

export default function ProfileForm({ initialData }: ProfileFormProps) {
    const { t } = useI18n();
    const [username, setUsername] = useState(initialData.username || '');
    const [isPending, startTransition] = useTransition();
    const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
    const [error, setError] = useState<string | null>(null);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setStatus('idle');
        setError(null);

        const formData = new FormData();
        formData.set('username', username);

        startTransition(async () => {
            const result = await updateProfile(formData);
            if (result.success) {
                setStatus('success');
                setTimeout(() => setStatus('idle'), 3000);
            } else {
                setStatus('error');
                setError(result.error || t('common.error'));
            }
        });
    };

    return (
        <motion.form
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6"
            onSubmit={handleSubmit}
        >
            <h2 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
                <User size={20} className="text-orange-500" />
                {t('nav.profile')}
            </h2>

            <div className="space-y-4">
                {/* Email (read-only) */}
                <div>
                    <label className="block text-sm font-medium text-zinc-400 mb-2">
                        <Mail size={14} className="inline mr-2" />
                        E-Mail
                    </label>
                    <input
                        type="email"
                        value={initialData.email || ''}
                        disabled
                        className="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-zinc-500 cursor-not-allowed"
                    />
                </div>

                {/* Username */}
                <div>
                    <label className="block text-sm font-medium text-zinc-400 mb-2">
                        {t('bottle.nameLabel')}
                    </label>
                    <input
                        type="text"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        placeholder={t('bottle.nameLabel')}
                        className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    />
                </div>
            </div>

            {/* Status messages */}
            {status === 'success' && (
                <div className="mt-4 p-3 bg-green-500/10 border border-green-500/20 rounded-xl flex items-center gap-2 text-green-500 text-sm">
                    <CheckCircle size={16} />
                    {t('common.success')}
                </div>
            )}
            {status === 'error' && (
                <div className="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-2 text-red-500 text-sm">
                    <AlertCircle size={16} />
                    {error}
                </div>
            )}

            {/* Submit button */}
            <button
                type="submit"
                disabled={isPending}
                className="mt-6 w-full px-4 py-3 bg-orange-500 hover:bg-orange-400 disabled:opacity-50 disabled:cursor-not-allowed text-zinc-900 font-bold rounded-xl flex items-center justify-center gap-2 transition-colors"
            >
                {isPending ? (
                    <>
                        <Loader2 size={18} className="animate-spin" />
                        {t('common.loading')}
                    </>
                ) : (
                    <>
                        <Save size={18} />
                        {t('common.save')}
                    </>
                )}
            </button>
        </motion.form>
    );
}
