src/components/Help.jsx

import React, { useState } from 'react';

function Help() {
  const [clearMsg, setClearMsg] = useState('');

  const clearAllHistory = async () => {
    if (!window.confirm('Delete all saved sessions? My Records and My Achievement will reset.')) return;
    setClearMsg('');
    try {
      const res = await fetch('/api/history', { method: 'DELETE' });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.status === 'success') {
        setClearMsg('Session history cleared.');
      } else {
        setClearMsg(data.message || 'Could not clear history.');
      }
    } catch (e) {
      setClearMsg('Request failed.');
    }
  };

  return (
    <main id="page-f" className="page">
      <h1 className="page-title">Help</h1>

      <div className="help-container">
        <section className="help-section">
          <h2>How to Use Focus Guard</h2>
          <ol>
            <li>Navigate to the Focus page from the menu</li>
            <li>Read the setup notes in the intro screen, then allow camera access when prompted</li>
            <li>Click the green "Start" button to begin monitoring</li>
            <li>Position yourself in front of the camera with good lighting</li>
            <li>The system will track your focus in real-time using face mesh analysis</li>
            <li>Use the model selector to switch between detection models (Hybrid, XGBoost, MLP, Geometric)</li>
            <li>Optionally enable <strong>Eye Gaze</strong> tracking for additional gaze-based focus signals</li>
            <li>Click "Stop" when you're done to save the session</li>
          </ol>
        </section>

        <section className="help-section">
          <h2>What is "Focused"?</h2>
          <p>The system considers you focused when:</p>
          <ul>
            <li>Your face is detected and visible in the camera frame</li>
            <li>Your head is oriented toward the screen (low yaw/pitch deviation)</li>
            <li>Your eyes are open and gaze is directed forward</li>
            <li>You are not yawning</li>
          </ul>
          <p>The system uses MediaPipe Face Mesh to extract 478 facial landmarks, then computes features like head pose, eye aspect ratio (EAR), gaze offset, PERCLOS, and blink rate to determine focus.</p>
        </section>

        <section className="help-section">
          <h2>Available Models</h2>
          <p><strong>Hybrid</strong> <em>(Recommended)</em>: Combines XGBoost predictions with geometric face/eye scoring using a trained logistic regression combiner. Most robust across different people. LOPO F1: 0.8409.</p>
          <p><strong>XGBoost:</strong> Gradient-boosted tree model using 10 selected features. Highest raw accuracy (95.87% pooled, LOPO AUC 0.8695). Strong on tabular data with fast inference.</p>
          <p><strong>MLP:</strong> Two-layer neural network (10→64→32 neurons) trained with PyTorch. Good balance of speed and accuracy (92.92% pooled, LOPO AUC 0.8624). Fastest inference.</p>
          <p><strong>Geometric:</strong> Rule-based scoring using head pose and eye openness. No ML model needed — lightweight fallback when model checkpoints are unavailable. LOPO F1: 0.8195.</p>
          <p style={{ marginTop: '10px', color: '#667281', fontSize: '0.9rem' }}>
            <strong>Tip:</strong> If you wear glasses or have unusual lighting, try different models to find the one that works best for your setup.
          </p>
        </section>

        <section className="help-section">
          <h2>Eye Gaze Tracking</h2>
          <p>The <strong>Eye Gaze</strong> button enables L2CS-Net, a deep neural network that estimates your gaze direction from the eye region. It runs alongside your selected base model and can improve focus detection accuracy.</p>
          <p style={{ marginTop: '8px' }}><strong>Performance note:</strong> Eye gaze tracking increases CPU usage and may reduce frame rate. If the system feels sluggish, disable it.</p>
          <h3 style={{ marginTop: '14px', fontSize: '1rem' }}>Calibration</h3>
          <p>For best accuracy, calibrate when prompted:</p>
          <ol>
            <li>Click "Start Calibration" in the warning dialog (or use the "Recalibrate" button during a session)</li>
            <li>Look directly at each dot as it appears on screen — there are <strong>9 calibration points</strong> across the screen</li>
            <li>A final <strong>validation point</strong> confirms accuracy before calibration is applied</li>
          </ol>
          <p>You can skip calibration and recalibrate at any time using the "Recalibrate" button, which appears in the model strip when Eye Gaze is on and a session is running.</p>
        </section>

        <section className="help-section">
          <h2>Adjusting Settings</h2>
          <p><strong>Frame Rate:</strong> Controls how many frames per second are sent for analysis. Range: 10–30 FPS. A minimum of 10 FPS is enforced to keep temporal features (blink rate, PERCLOS) accurate.</p>
          <p><strong>Model Selection:</strong> Switch models in real-time using the pill buttons above the timeline. The active model is highlighted. Different models may perform better depending on your lighting, setup, and whether you wear glasses.</p>
          <p><strong>Floating Window:</strong> Opens a Picture-in-Picture window with your camera feed so you can keep the video visible while working in other apps.</p>
        </section>

        <section className="help-section">
          <h2>Privacy &amp; Data</h2>
          <p>Video frames are processed in real-time on the server and are never stored. Only focus status metadata (timestamps, confidence scores) is saved to the session database. View past runs under <strong>My Records</strong>; stats and badges live under <strong>My Achievement</strong>.</p>
          <p style={{ marginTop: '12px' }}>
            <button
              type="button"
              onClick={clearAllHistory}
              style={{
                padding: '8px 16px',
                borderRadius: '8px',
                border: '1px solid #c44',
                background: 'transparent',
                color: '#e88',
                cursor: 'pointer',
                fontSize: '14px'
              }}
            >
              Clear all session history
            </button>
            {clearMsg && (
              <span style={{ marginLeft: '12px', color: '#aaa', fontSize: '14px' }}>{clearMsg}</span>
            )}
          </p>
        </section>

        <section className="help-section">
          <h2>FAQ</h2>
          <details>
            <summary>Why is my focus score low?</summary>
            <p>Ensure good lighting so the face mesh can detect your landmarks clearly. Face the camera directly and avoid large head movements. Try switching to a different model if one isn't working well for your setup.</p>
          </details>
          <details>
            <summary>Does wearing glasses affect accuracy?</summary>
            <p>Yes, glasses can reduce accuracy — especially for eye-based features like EAR and gaze offset — because the lenses may distort landmark positions or cause reflections. If you wear glasses, try different models (e.g. Geometric or MLP may handle glasses better than XGBoost for some users). Avoid using Eye Gaze tracking with glasses as it may significantly degrade results.</p>
          </details>
          <details>
            <summary>Can I use this without a camera?</summary>
            <p>No, camera access is required. The system relies on real-time face landmark detection to determine focus.</p>
          </details>
          <details>
            <summary>Does this work on mobile?</summary>
            <p>Yes, it works on mobile browsers that support camera access and WebSocket connections. Performance depends on your device and network speed. Eye Gaze tracking is not recommended on mobile due to performance constraints.</p>
          </details>
          <details>
            <summary>Is my data private?</summary>
            <p>Yes. No video frames are stored. Processing happens in real-time and only metadata (focus/unfocused status, confidence, timestamps) is saved.</p>
          </details>
          <details>
            <summary>Why does the face mesh lag behind my movements?</summary>
            <p>The face mesh overlay updates each time the server returns a detection result. The camera feed itself renders locally. Any visible lag depends on network latency and server processing time. Reducing the frame rate slider can help if lag is noticeable.</p>
          </details>
          <details>
            <summary>The Hybrid model doesn't seem to work differently from XGBoost — why?</summary>
            <p>The Hybrid model uses a trained logistic regression combiner on top of XGBoost and geometric scores. If the combiner file wasn't available at startup, it falls back to a simple weighted average which behaves similarly to XGBoost. Check the server logs for "[HYBRID]" messages to confirm the combiner loaded correctly.</p>
          </details>
        </section>

        <section className="help-section">
          <h2>Technical Info</h2>
          <p><strong>Face Detection:</strong> MediaPipe Face Mesh (478 landmarks)</p>
          <p><strong>Feature Extraction:</strong> Head pose (yaw/pitch/roll), EAR, MAR, gaze offset, PERCLOS, blink rate — 10 features selected via LOFO analysis</p>
          <p><strong>ML Models:</strong> PyTorch MLP (10→64→32→2), XGBoost (600 trees), Geometric (rule-based), Hybrid (LR combiner over XGBoost+Geo)</p>
          <p><strong>Eye Gaze:</strong> L2CS-Net (ResNet50 backbone, trained on Gaze360) with 9-point polynomial calibration</p>
          <p><strong>Storage:</strong> SQLite database (sessions, events, settings)</p>
          <p><strong>Framework:</strong> FastAPI + React (Vite) + WebSocket</p>
          <p><strong>Evaluation:</strong> Leave-One-Person-Out (LOPO) cross-validation on 9 participants, 144K frames</p>
        </section>
      </div>
    </main>
  );
}

export default Help;