import { __ } from "@wordpress/i18n";
import { useRef, useEffect, useMemo } from "@wordpress/element";
import PageRow from "./PageRow";


export default function PriorityPageSelector({ pages, selectedPageIds, selectedPageIdSet, onChange, allSelected, someSelected, onSelectAll, highlightByPageId }) {
    const selectAllRef = useRef(null);
    const resolvedSelectedIdSet = useMemo(
        () => (selectedPageIdSet instanceof Set
            ? selectedPageIdSet
            : new Set(selectedPageIds || [])),
        [selectedPageIdSet, selectedPageIds],
    );

    // Set indeterminate state on checkbox (not possible via JSX)
    useEffect(() => {
        if (selectAllRef.current) {
            selectAllRef.current.indeterminate = someSelected;
        }
    }, [someSelected]);

    const handleToggle = (pageId) => {
        const nextIds = new Set(resolvedSelectedIdSet);
        if (nextIds.has(pageId)) {
            nextIds.delete(pageId);
        } else {
            nextIds.add(pageId);
        }
        onChange(Array.from(nextIds));
    };

    const handleSelectAllChange = (e) => {
        onSelectAll(e.target.checked);
    };

    if (pages.length === 0) {
        return (
            <p className="ecw-no-items">
                {__("No pages found.", "cache-autopilot")}
            </p>
        );
    }

    return (
        <div className='ekesto-responsive-table-container'>
            <div className='ekesto-responsive-table-inner'>
                <table className='widefat ecw-priority-pages-table'>
                    <thead>
                        <tr>
                            <th className='ecw-priority-pages-table__col-priority'>
                                <input
                                    ref={selectAllRef}
                                    type='checkbox'
                                    checked={allSelected}
                                    onChange={handleSelectAllChange}
                                    title={__(
                                        "Select/deselect all visible pages",
                                        "cache-autopilot",
                                    )}
                                />
                            </th>
                            <th className='ecw-priority-pages-table__col-title'>
                                {__("Title", "cache-autopilot")}
                            </th>
                            <th className='ecw-priority-pages-table__col-url'>
                                {__("URL", "cache-autopilot")}
                            </th>
                            <th className='ecw-priority-pages-table__col-status'>
                                {__("Status", "cache-autopilot")}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {pages.map((page) => (
                            <PageRow
                                key={page.id}
                                page={page}
                                isSelected={resolvedSelectedIdSet.has(page.id)}
                                onToggle={() => handleToggle(page.id)}
                                highlights={highlightByPageId?.get(page.id) || null}
                            />
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}
