const { useState, useEffect } = React;

function DownloadModal({ hook, onClose }) {
    const [count, setCount] = useState(5);
    const [downloading, setDownloading] = useState(false);

    useEffect(() => {
        let timer;
        if (count > 0 && !downloading) {
            timer = setTimeout(() => setCount(c => c - 1), 1000);
        } else if (count === 0 && !downloading) {
            setDownloading(true);
            
            const formData = new FormData();
            formData.append('action', 'incress_views');
            formData.append('file_hash', hook.file_hash); 
            
            fetch('ajax.php?action=incress_views', {
                method: 'POST',
                body: formData
            }).then(r => r.json()).then(res => {
                if (res.status === 'success') {
                    let url = `ajax.php?action=download&file_hash=${res.new_hash}`;
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = res.filename;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    
                    setTimeout(() => {
                        onClose();
                    }, 500);
                }
            }).catch(e => {
                console.error("Error during download trigger:", e);
                onClose();
            });
        }
        return () => clearTimeout(timer);
    }, [count, downloading, hook, onClose]);

    return (
        <div className="modal fade show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(3px)' }} tabIndex="-1">
            <div className="modal-dialog modal-dialog-centered modal-lg">
                <div className="modal-content border-0 shadow-lg" style={{ borderRadius: '1.25rem' }}>
                    <div className="modal-header border-0 pb-0 z-1">
                        <button type="button" className="btn-close p-2 m-0 mt-3 ms-3 position-absolute start-0" onClick={onClose} aria-label="Close"></button>
                    </div>
                    <div className="modal-body pb-5 pt-4 text-center">
                        <h4 className="fw-bold mb-3">تحميل الهاك</h4>
                        <p className="text-muted mb-4 fs-5">لحظات وسوف يتم تحميل الهاك تلقائياً</p>
                        
                        <div className="p-3 bg-light rounded-3 mb-4 d-inline-block text-start gap-2">
                            <div className="d-flex align-items-start mb-2 gap-2">
                                <i className="fa fa-file-archive-o text-primary me-2 fs-4"></i>
                                <span className="fw-bold">{hook.name}</span>
                            </div>
                            <div className="text-muted small">الإصدار: {hook.version}</div>
                        </div>

                        <div className="countdown active d-flex justify-content-center align-items-center mx-auto" style={{
                            width: '90px', height: '90px', position: 'relative'
                        }}>
                            <div className="countdown-number fs-1 fw-bold text-primary position-absolute">{count}</div>
                            <svg width="90" height="90" style={{ transform: 'rotate(-90deg)' }}>
                                <circle r="40" cx="45" cy="45" fill="transparent" stroke="#e9ecef" strokeWidth="6" />
                                <circle r="40" cx="45" cy="45" fill="transparent" stroke="#0d6efd" strokeWidth="6" 
                                    strokeDasharray="251.2" strokeDashoffset={251.2 * (1 - count / 5)} 
                                    strokeLinecap="round"
                                    style={{ transition: 'stroke-dashoffset 1s linear' }} />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}