const { useState } = React;

function HooksList({ hooks, refreshHooks, isHomePage = true, hasMore = false, loadMore = null, loading = false }) {
    const [selectedHook, setSelectedHook] = useState(null);

    return (
        <div className="hook_form bg-white shadow-sm p-2 p-md-5 rounded-4 border-0 h-100 my-border">
            <div className="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                <h2 className="fw-bold fs-3 m-0">
                    <i className="fa fa-history text-primary ms-2"></i>
                    {isHomePage ? 'آخر الهاكات التي تم تحويلها' : 'جميع الهاكات'}
                </h2>
                {!isHomePage && (
                    <ReactRouterDOM.Link to="/" className="btn btn-outline-primary btn-sm rounded-pill px-3">
                        <i className="fa fa-arrow-right ms-2"></i>
                        العودة للرئيسية
                    </ReactRouterDOM.Link>
                )}
            </div>
            
            {hooks.length === 0 ? (
                <div className="text-center py-5 text-muted">
                    <i className="fa fa-inbox fs-1 mb-3 text-light"></i>
                    <p className="fs-5 fw-medium">لا توجد هاكات محولة بعد.</p>
                </div>
            ) : (
                <ul className="list-unstyled mb-0">
                    <li className="mb-3 px-3 d-none d-md-block">
                        <div className="row fw-bold text-muted small text-uppercase tracking-wide">
                            <div className="col-md-7">معلومات الهاك</div>
                            <div className="col-md-5 text-start">
                                <div className="row">
                                    <div className="col-6 text-center">النسخة</div>
                                    <div className="col-6 text-center pe-4">التحميلات</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {hooks.map((hook, index) => (
                        <li key={hook.id} className="mb-3" style={{ animationDelay: `${index * 0.1}s` }}>
                            <a 
                                className="hook_row row text-decoration-none text-dark bg-white border p-3 rounded-4 align-items-center position-relative overflow-hidden"
                                href="#" 
                                onClick={(e) => { e.preventDefault(); setSelectedHook(hook); }}
                                style={{ transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)', display: 'flex' }}
                                onMouseEnter={(e) => {
                                    e.currentTarget.style.transform = 'translateY(-4px)';
                                    e.currentTarget.style.boxShadow = '0 10px 20px rgba(0,0,0,0.08)';
                                    e.currentTarget.style.borderColor = '#0d6efd';
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.transform = 'translateY(0)';
                                    e.currentTarget.style.boxShadow = 'none';
                                    e.currentTarget.style.borderColor = '#dee2e6';
                                }}
                            >
                                <div className="col-md-7 d-flex align-items-center mb-3 mb-md-0">
                                    <div className="bg-light text-primary rounded-circle d-flex justify-content-center align-items-center me-3" style={{width:'50px', height:'50px', flexShrink: 0}}>
                                        <i className="fa fa-file-code-o fs-4"></i>
                                    </div>
                                    <div className="hook_info d-flex flex-column">
                                        <span className="hook_name fw-bold fs-6 text-truncate text-wrap text-success" style={{maxWidth: '250px'}} title={hook.name}>
                                            {hook.name}
                                        </span>
                                        {hook.username && (
                                            <span className="text-muted small mt-1">
                                                بواسطة: <span className="fw-bold text-primary">{hook.username}</span>
                                            </span>
                                        )}
                                    </div>
                                </div>
                                <div className="row flex-row col-md-5 text-start align-items-center m-0 p-0">
                                    <div className="col-6 text-center">
                                        <span className="badge bg-light text-dark border px-3 py-2 rounded-pill fw-medium">
                                            v{hook.version}
                                        </span>
                                    </div>
                                    <div className="col-6 text-center">
                                        <span className="fw-bold text-primary px-3 py-2 rounded-pill" style={{backgroundColor: 'rgba(13, 110, 253, 0.1)'}}>
                                            {hook.views} <i className="fa fa-download ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    ))}
                </ul>
            )}
            
            {hooks.length > 0 && isHomePage && (
                <div className="see_all_hooks text-center mt-5">
                    <ReactRouterDOM.Link to="/hooks" className="btn btn-outline-secondary rounded-pill px-5 py-2 fw-medium border-2 hover-lift">
                        تصفح جميع الهاكات
                    </ReactRouterDOM.Link>
                </div>
            )}

            {!isHomePage && hasMore && (
                <div className="text-center mt-4">
                    <button 
                        onClick={loadMore} 
                        disabled={loading}
                        className="btn btn-outline-primary rounded-pill px-5 py-2 fw-medium border-2 hover-lift"
                    >
                        {loading ? (
                            <span><i className="fa fa-spinner fa-spin ms-2"></i> جاري التحميل...</span>
                        ) : 'مشاهدة المزيد'}
                    </button>
                </div>
            )}

            {selectedHook && (
                <DownloadModal 
                    hook={selectedHook} 
                    onClose={() => { setSelectedHook(null); refreshHooks(); }} 
                />
            )}
        </div>
    );
}