const { useState, useRef } = React;

function ConverterForm({ onSuccess }) {
    const [loading, setLoading] = useState(false);
    const [result, setResult] = useState(null);
    const formRef = useRef(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData(formRef.current);
        const fileInput = formData.get('file');

        if (!fileInput || fileInput.name === '') {
            setResult({
                type: 'error',
                message: 'الرجاء اختيار ملف'
            });
            return;
        }

        setLoading(true);
        setResult(null);

        try {
            const res = await fetch('conv.php', {
                method: 'POST',
                body: formData
            });
            const data = await res.json();
            
            if (data.status === 'success') {
                setResult({
                    type: 'success',
                    url: data.url,
                    message: data.message
                });
                formRef.current.reset();
                if (onSuccess) onSuccess();
            } else {
                setResult({
                    type: 'error',
                    message: data.message || 'حدث خطأ غير معروف'
                });
            }
        } catch (err) {
            setResult({
                type: 'error',
                message: 'حدث خطأ في الاتصال بالخادم'
            });
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="bg-white my-border shadow-sm p-5 p-md-5 rounded-4 border-0 position-relative overflow-hidden h-100">
            <div className="position-absolute end-0 p-4 opacity-10" style={{top: '30px'}}>
                <i className="fa fa-magic" style={{fontSize: '1.5rem'}}></i>
            </div>
            
            <div className="position-relative z-1">
                <div className="mb-5 pb-3 border-bottom">
                    <h2 className="fw-bold fs-3 text-primary mb-3 me-4">محول ترميز الهاكات</h2>
                    <p className="text-muted m-0 fs-6 lh-lg">
                        قم بتحويل ترميز ملفات الهاكات (XML) من الترميز اللاتيني القديم إلى ترميز UTF-8 العالمي بضغطة زر واحدة، لتعمل بسلاسة في منتداك!
                    </p>
                </div>

                <form ref={formRef} onSubmit={handleSubmit} className="needs-validation">
                    <div className="form-group mb-4">
                        <label className="form-label fw-bold mb-2 text-dark" htmlFor="fileUpload">
                            <i className="fa fa-upload text-primary me-2"></i> ملف الهاك (XML)
                        </label>
                        <div className="input-group">
                            <input type="file" className="form-control border-2 shadow-none" id="fileUpload" name="file" accept=".xml" required />
                        </div>
                        <small className="text-danger align-self-start mt-2">حجم الملف يجي ان لا يتجاوز 50 كيلوبايت</small>
                        <small className="text-success align-self-start mt-2">اذا كان حجم الملف اكبر من ذلك راسلنا لتحويله.</small>
                    </div>

                    <div className="row">
                        <div className="col-12 col-md-6">
                            <div className="form-group mb-4">
                                <label className="form-label fw-bold mb-2 text-dark" htmlFor="username">
                                    <i className="fa fa-user text-primary me-2"></i> اسمك
                                </label>
                                <input type="text" className="form-control form-control-lg border-2 shadow-none fs-6" id="username" name="username" required placeholder="مثال: شقاوي" />
                            </div>
                        </div>
                        <div className="col-12 col-md-6">
                            <div className="form-group mb-4">
                                <label className="form-label fw-bold mb-2 text-dark" htmlFor="user_email">
                                    <i className="fa fa-envelope text-primary me-2"></i> بريدك الإلكتروني
                                </label>
                                <input type="email" className="form-control form-control-lg border-2 shadow-none fs-6" id="user_email" name="user_email" required placeholder="shqawe@gmail.com" />
                            </div>
                        </div>
                    </div>
                    
                    <div className="alert bg-light border-0 text-muted small rounded-3 p-3 mb-4 d-flex align-items-start">
                        <i className="fa fa-info-circle text-primary fs-5 ms-2"></i>
                        اسم سوف يظهر عند عرض الهاك في قسم الهاكات.
                    </div>

                    {result && result.type === 'success' && (
                        <div className="alert alert-success text-center mb-4 rounded-4 shadow-sm border-0 p-4 animation-fade-in">
                            <div className="text-success mb-3">
                                <i className="fa fa-check-circle" style={{fontSize: '4rem'}}></i>
                            </div>
                            <h4 className="fw-bold mb-3">{result.message}</h4>
                            <a href={result.url} className="btn btn-success btn-lg rounded-pill px-5 fw-bold shadow-sm" download>
                                <i className="fa fa-download me-2"></i> تحميل الملف
                            </a>
                        </div>
                    )}

                    {result && result.type === 'error' && (
                        <div className="alert alert-danger mb-4 rounded-3 border-0 px-4 py-3 d-flex align-items-center animation-fade-in">
                            <i className="fa fa-exclamation-circle fs-4 me-3"></i>
                            <span className="fw-medium">{result.message}</span>
                        </div>
                    )}

                    <div className="form-group mt-5">
                        <button type="submit" className="btn btn-primary btn-lg w-100 rounded-pill py-3 fw-bold fs-5 shadow hover-lift" disabled={loading} style={{transition: 'all 0.3s'}}>
                            {loading ? (
                                <span><i className="fa fa-spinner fa-spin me-2"></i> جاري إعداد الملف...</span>
                            ) : (
                                <span><i className="fa fa-cogs me-2"></i> تحويل الهاك الآن</span>
                            )}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}