const { useEffect, useState } = React;
const { Link } = ReactRouterDOM;

function AllHooksPage() {
    const [hooks, setHooks] = useState([]);
    const [page, setPage] = useState(1);
    const [hasMore, setHasMore] = useState(false);
    const [loading, setLoading] = useState(false);
    
    const fetchHooks = async (pageNum, append = false) => {
        try {
            setLoading(true);
            const res = await fetch(`api.php?action=get_hooks&page=${pageNum}&limit=10`);
            const data = await res.json();
            if (data.status === 'success') {
                if (append) {
                    setHooks(prev => {
                        // Prevent duplicates just in case
                        const existingIds = new Set(prev.map(h => h.id));
                        const newHooks = data.data.filter(h => !existingIds.has(h.id));
                        return [...prev, ...newHooks];
                    });
                } else {
                    setHooks(data.data);
                }
                setHasMore(data.has_more);
            }
        } catch (e) {
            console.error('Failed to fetch hooks');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchHooks(1, false);
    }, []);

    const loadMore = () => {
        const nextPage = page + 1;
        setPage(nextPage);
        fetchHooks(nextPage, true);
    };

    const refreshHooks = () => {
        // Reset and fetch from beginning
        setPage(1);
        fetchHooks(1, false);
    };

    return (
        <div className="d-flex flex-column min-vh-100 bg-light">
            <Header />
            
            <div className="bg-primary text-white py-5 mb-5 texture-bg">
                <div className="container text-center py-4">
                    <h1 className="fw-bold display-4 mb-3">جميع الهاكات</h1>
                    <p className="fs-5 opacity-75 mx-auto" style={{maxWidth: '600px'}}>
                        تصفح جميع الهاكات التي تم تحويلها من قبل الزوار والاعضاء.
                    </p>
                </div>
            </div>
            
            <main className="flex-grow-1" style={{marginTop: '-60px'}}>
                <div className="container mb-5">
                    <div className="row justify-content-center">
                        <div className="col-lg-10 z-1">
                            <HooksList 
                                hooks={hooks} 
                                refreshHooks={refreshHooks} 
                                isHomePage={false} 
                                hasMore={hasMore} 
                                loadMore={loadMore} 
                                loading={loading} 
                            />
                        </div>
                    </div>
                </div>
            </main>

            <footer className="mt-auto py-5 bg-white shadow-sm border-top">
                <div className="container">
                    <div className="row align-items-center">
                        <div className="col-md-6 text-end text-md-end mb-3 mb-md-0">
                            <span className="fw-bold text-primary fs-6">محول الترميز</span>
                            <span className="text-muted me-1">جميع الحقوق محفوظة &copy; 2026 - 2027</span>
                        </div>
                        <div className="col-md-6 text-start text-md-start text-muted">
                           <span> برمجة وتطوير </span>
                            <a href="https://www.shqawe.net/" target="_blank" className="fw-bold" title="شقاوي لخدمات البرمجة والتصميم">
                                ShqawE
                            </a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}