"use client";

import { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const GUIDE_CONTENT = `
## Getting Started

1. **Sign in** with your HuggingFace account
2. Your assigned documents appear in the dropdown
3. Only accounts in the annotator config will see documents

---

## Interface Layout

| Panel | Purpose |
|-------|---------|
| **Left** | PDF viewer — original document page |
| **Right** | Markdown text with highlighted data mentions |

---

## Page Navigation

| Button | Action |
|--------|--------|
| **← Prev / Next →** | Move one page at a time |
| **⏮ / ⏭** | Jump to page with data mentions |
| **● green dot** | Current page has mentions |

---

## Data Mention Colors

| Color | Tag | Meaning |
|-------|-----|---------|
| 🟢 Green | **Named** | A specific, named dataset |
| 🟡 Amber | **Descriptive** | Described but not formally named |
| 🟣 Purple | **Vague** | Unclear or ambiguous reference |
| ⚪ Gray | **Non-Dataset** | Not actually a dataset |

---

## Validating Mentions

1. Click the **toggle (‹)** to open the side panel
2. For each mention:
   - ✅ **Correct** — real dataset mention
   - ❌ **Wrong** — false positive
   - **Edit tag** — click the tag badge to change it
   - **Delete** — remove false mentions (click twice to confirm)

---

## Adding New Annotations

1. **Select text** in the markdown preview (click & drag)
2. Click **✍️ Annotate Selection**
3. Choose a tag: Named, Descriptive, or Vague
4. Click **Save Annotation**

---

## Recommended Workflow

1. **Read** the markdown text, reference the PDF for context
2. **Review** each highlighted mention in the side panel
3. **Add** any mentions the AI missed via text selection
4. **Move** to the next page (warning if unvalidated mentions remain)

---

## Tips

- Use **⏮/⏭ jump buttons** to skip pages without mentions
- Pages without mentions may still have datasets the AI missed
- Select just the **dataset name**, not surrounding text
- The **PDF is the source of truth** — markdown may have formatting issues
`;

export default function HelpModal({ isOpen, onClose }) {
    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;

    return (
        <div className="modal-overlay help-modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
            <div className="modal-content help-modal-content">
                <div className="modal-header">
                    <h3>📖 Annotator Guide</h3>
                    <button className="modal-close" onClick={onClose}>&times;</button>
                </div>
                <div className="modal-body help-modal-body">
                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
                        {GUIDE_CONTENT}
                    </ReactMarkdown>
                </div>
                <div className="modal-footer">
                    <button className="btn btn-primary" onClick={onClose}>Got it!</button>
                </div>
            </div>
        </div>
    );
}