app/components/AnnotationModal.js

"use client";

import { useState, useEffect, useRef } from 'react';

const DATASET_TAGS = [
    { value: 'named', label: 'Named Dataset', description: 'A specific, named dataset (e.g. "2022 national census")' },
    { value: 'descriptive', label: 'Descriptive', description: 'A described but not formally named dataset' },
    { value: 'vague', label: 'Vague', description: 'An unclear or ambiguous data reference' },
];

export default function AnnotationModal({
    isOpen,
    selectedText,
    annotatorName,
    onAnnotatorChange,
    onSubmit,
    onClose,
}) {
    const [datasetTag, setDatasetTag] = useState('named');
    const [saving, setSaving] = useState(false);
    const noteRef = useRef(null);

    useEffect(() => {
        if (isOpen && noteRef.current) {
            noteRef.current.focus();
        }
    }, [isOpen]);

    useEffect(() => {
        const handleEsc = (e) => { if (e.key === 'Escape') onClose(); };
        if (isOpen) window.addEventListener('keydown', handleEsc);
        return () => window.removeEventListener('keydown', handleEsc);
    }, [isOpen, onClose]);

    if (!isOpen) return null;

    const handleSubmit = async () => {
        setSaving(true);
        await onSubmit({ dataset_tag: datasetTag });
        setSaving(false);
        setDatasetTag('named');
    };

    return (
        <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
            <div className="modal-content">
                <div className="modal-header">
                    <h3>Add Annotation</h3>
                    <button className="modal-close" onClick={onClose}>&times;</button>
                </div>

                <div className="modal-body">
                    {/* Selected text preview */}
                    <div className="form-group">
                        <label>Selected Text</label>
                        <div className="selected-text-preview">"{selectedText}"</div>
                    </div>

                    {/* Dataset tag dropdown */}
                    <div className="form-group">
                        <label htmlFor="dataset-tag">Dataset Tag</label>
                        <select
                            id="dataset-tag"
                            className="form-select"
                            value={datasetTag}
                            onChange={(e) => setDatasetTag(e.target.value)}
                        >
                            {DATASET_TAGS.map(tag => (
                                <option key={tag.value} value={tag.value}>
                                    {tag.label}
                                </option>
                            ))}
                        </select>
                        <p className="form-help">
                            {DATASET_TAGS.find(t => t.value === datasetTag)?.description}
                        </p>
                    </div>

                    {/* Annotator name */}
                    <div className="form-group">
                        <label htmlFor="annotator-name">Annotator</label>
                        <input
                            id="annotator-name"
                            type="text"
                            className="form-input"
                            value={annotatorName || 'Not signed in'}
                            readOnly
                        />
                    </div>
                </div>

                <div className="modal-footer">
                    <button className="btn btn-secondary" onClick={onClose} disabled={saving}>
                        Cancel
                    </button>
                    <button className="btn btn-primary" onClick={handleSubmit} disabled={saving}>
                        {saving ? 'Saving...' : 'Save Annotation'}
                    </button>
                </div>
            </div>
        </div>
    );
}