app/components/ProgressBar.js

"use client";

export default function ProgressBar({
    documents,
    selectedDocIndex,
    currentDoc,
    pageIdx,
    currentPageDatasets,
    annotatorName,
}) {
    if (!documents || documents.length === 0) return null;

    // 1. PDF progress: which doc out of total
    const docPosition = documents.findIndex(d => d.index === selectedDocIndex) + 1;
    const totalDocs = documents.length;

    // 2. Page progress: which page out of annotatable pages in current doc
    const totalPages = currentDoc?.annotatable_pages?.length ?? 0;
    const currentPage = totalPages > 0 ? pageIdx + 1 : 0;

    // 3. Mentions progress: verified by CURRENT USER vs total on current page
    const totalMentions = currentPageDatasets?.length ?? 0;
    const verifiedMentions = currentPageDatasets?.filter(ds => {
        const myValidation = (ds.validations || []).find(v => v.annotator === annotatorName);
        return myValidation?.human_validated === true;
    }).length ?? 0;

    return (
        <div className="progress-container">
            <div className="progress-pills">
                <div className="progress-pill">
                    <span className="pill-icon">📄</span>
                    <span className="pill-label">PDF</span>
                    <span className="pill-value">{docPosition}/{totalDocs}</span>
                </div>
                <div className="pill-divider" />
                <div className="progress-pill">
                    <span className="pill-icon">📑</span>
                    <span className="pill-label">Page</span>
                    <span className="pill-value">{currentPage}/{totalPages}</span>
                </div>
                <div className="pill-divider" />
                <div className="progress-pill">
                    <span className="pill-icon">🏷️</span>
                    <span className="pill-label">Verified</span>
                    <span className={`pill-value ${verifiedMentions === totalMentions && totalMentions > 0 ? 'pill-complete' : ''}`}>
                        {verifiedMentions}/{totalMentions}
                    </span>
                </div>
            </div>
        </div>
    );
}