app/components/AnnotationsList.js

"use client";

const TAG_STYLES = {
    named: { color: '#10b981', bg: '#10b98120' },
    descriptive: { color: '#f59e0b', bg: '#f59e0b20' },
    vague: { color: '#a78bfa', bg: '#a78bfa20' },
    'non-dataset': { color: '#64748b', bg: '#64748b20' },
};

export default function AnnotationsList({ annotations }) {
    if (!annotations || annotations.length === 0) return null;

    return (
        <div className="annotations-list">
            <h3>Annotations ({annotations.length})</h3>
            <ul>
                {annotations.map((a, i) => {
                    const text = a.dataset_name?.text || a.selected_text || '';
                    const tag = a.dataset_tag || 'named';
                    const author = a.annotation_tag || a.annotator_name || 'user';
                    const style = TAG_STYLES[tag] || TAG_STYLES.named;

                    return (
                        <li key={`${text}-${i}`}>
                            <div className="annotation-meta">
                                <span className="annotation-location">
                                    Doc {a.document_index} / Pg {a.page_number}
                                </span>
                                <span
                                    className="annotation-tag-badge"
                                    style={{ color: style.color, backgroundColor: style.bg }}
                                >
                                    {tag}
                                </span>
                            </div>
                            <p className="annotation-text">
                                <strong>Dataset:</strong> "{text}"
                            </p>
                            <small>
                                by {author} · {a.timestamp ? new Date(a.timestamp).toLocaleString() : ''}
                            </small>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
}