import { useState } from 'react';
import { motion } from 'framer-motion';
import { useLanguage } from '../../contexts/LanguageContext';
import { ArrowLeft, Send, CheckCircle, AlertCircle } from 'lucide-react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const EraseData = () => {
    const { t, language } = useLanguage();
    const [formData, setFormData] = useState({
        nom: '',
        prenom: '',
        email: '',
        message: '',
        confirm: false
    });
    const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
    const [errorMessage, setErrorMessage] = useState('');

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!formData.confirm) return;

        setStatus('submitting');
        setErrorMessage('');

        try {
            // Using absolute URL for localhost dev, in prod simple /api might work if proxied or configured
            // Assuming localhost:3000 for backend based on previous steps
            await axios.post('http://localhost:4000/api/messages', {
                nom: formData.nom,
                prenom: formData.prenom,
                email: formData.email,
                message: formData.message
            });
            setStatus('success');
            setFormData({ nom: '', prenom: '', email: '', message: '', confirm: false });
        } catch (error: any) {
            console.error('Submission error', error);
            setStatus('error');
            setErrorMessage(error.response?.data?.message || 'Une erreur est survenue. Veuillez réessayer.');
        }
    };

    const containerVariants = {
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0 }
    };

    return (
        <div className="erase-data-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
            <div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
                <Link
                    to={`/${language}/travelmate`}
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: '8px',
                        marginBottom: '2rem',
                        textDecoration: 'none',
                        color: 'var(--text-color)',
                        opacity: 0.8
                    }}
                >
                    <ArrowLeft size={18} />
                    {t('policies.back')}
                </Link>

                <motion.div
                    initial="hidden"
                    animate="visible"
                    variants={containerVariants}
                    style={{
                        background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
                        padding: '2.5rem',
                        borderRadius: '1.5rem',
                        border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
                    }}
                >
                    <h1 style={{ marginBottom: '1.5rem', fontSize: '2rem' }}>{t('erasedata.title')}</h1>
                    <p style={{ marginBottom: '2rem', opacity: 0.8, lineHeight: '1.6' }}>
                        {t('erasedata.description')}
                    </p>

                    {status === 'success' ? (
                        <div style={{
                            padding: '2rem',
                            background: 'rgba(16, 185, 129, 0.1)',
                            borderRadius: '1rem',
                            border: '1px solid rgba(16, 185, 129, 0.2)',
                            textAlign: 'center',
                            color: '#10B981'
                        }}>
                            <CheckCircle size={48} style={{ marginBottom: '1rem' }} />
                            <h3>{t('erasedata.success.title')}</h3>
                            <p>{t('erasedata.success.message')}</p>
                        </div>
                    ) : (
                        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
                                <div>
                                    <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.lastname')}</label>
                                    <input
                                        type="text"
                                        required
                                        value={formData.nom}
                                        onChange={e => setFormData({ ...formData, nom: e.target.value })}
                                        className="form-input"
                                        style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
                                    />
                                </div>
                                <div>
                                    <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.firstname')}</label>
                                    <input
                                        type="text"
                                        required
                                        value={formData.prenom}
                                        onChange={e => setFormData({ ...formData, prenom: e.target.value })}
                                        className="form-input"
                                        style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
                                    />
                                </div>
                            </div>

                            <div>
                                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.email')}</label>
                                <input
                                    type="email"
                                    required
                                    value={formData.email}
                                    onChange={e => setFormData({ ...formData, email: e.target.value })}
                                    className="form-input"
                                    style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
                                />
                            </div>

                            <div>
                                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.message')}</label>
                                <textarea
                                    required={false}
                                    rows={4}
                                    value={formData.message}
                                    onChange={e => setFormData({ ...formData, message: e.target.value })}
                                    className="form-input"
                                    style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
                                    placeholder={t('erasedata.form.placeholder')}
                                />
                            </div>

                            <label style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', cursor: 'pointer', opacity: 0.9 }}>
                                <input
                                    type="checkbox"
                                    required
                                    checked={formData.confirm}
                                    onChange={e => setFormData({ ...formData, confirm: e.target.checked })}
                                    style={{ marginTop: '4px', width: '18px', height: '18px' }}
                                />
                                <span style={{ fontSize: '0.9rem' }}>
                                    {t('erasedata.form.confirm')}
                                </span>
                            </label>

                            {status === 'error' && (
                                <div style={{ color: '#EF4444', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.95rem' }}>
                                    <AlertCircle size={16} />
                                    {errorMessage}
                                </div>
                            )}

                            <button
                                type="submit"
                                disabled={!formData.confirm || status === 'submitting'}
                                className="btn btn-primary"
                                style={{
                                    marginTop: '1rem',
                                    padding: '1rem',
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    gap: '10px',
                                    opacity: (!formData.confirm || status === 'submitting') ? 0.5 : 1,
                                    cursor: (!formData.confirm || status === 'submitting') ? 'not-allowed' : 'pointer'
                                }}
                            >
                                {status === 'submitting' ? t('erasedata.form.submitting') : (
                                    <>
                                        <Send size={18} />
                                        {t('erasedata.form.submit')}
                                    </>
                                )}
                            </button>
                        </form>
                    )}
                </motion.div>
            </div>
        </div>
    );
};

export default EraseData;