src/components/HelpModal.jsx

import React from 'react';
import { DEVICE_DATABASE } from '../utils/formatters';

const HelpModal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div className="help-modal" onClick={onClose}>
      <div className="help-content" onClick={(e) => e.stopPropagation()}>
        <button className="help-close" onClick={onClose}>×</button>
        
        <h2 style={{ marginBottom: '24px', color: '#1e293b' }}>
          🎯 Activity Simulation Detection Dashboard - Help Guide
        </h2>

        <div className="help-section">
          <h3>📊 Machine Risk</h3>
          <p>
            Shows the overall risk score for the monitored machine. The score ranges from 0.0 (definitely human) 
            to 1.0 (definitely a jiggler). The color coding helps you quickly identify risk levels:
          </p>
          <ul style={{ marginLeft: '20px', color: '#475569' }}>
            <li><strong style={{ color: '#059669' }}>Green (0.0-0.3):</strong> Low risk - likely human activity</li>
            <li><strong style={{ color: '#d97706' }}>Orange (0.3-0.7):</strong> Medium risk - suspicious activity</li>
            <li><strong style={{ color: '#dc2626' }}>Red (0.7-1.0):</strong> High risk - likely jiggler activity</li>
          </ul>
        </div>

        <div className="help-section">
          <h3>🔍 Evidence</h3>
          <p>
            Raw data and calculations behind the risk score. Key components:
          </p>
          <ul style={{ marginLeft: '20px', color: '#475569' }}>
            <li><strong>onnxScore:</strong> ML model prediction (Level 2 AI analysis)</li>
            <li><strong>heuristicRisk:</strong> Rule-based analysis (Level 1 behavioral patterns)</li>
            <li><strong>features:</strong> Individual measurements like timing patterns, mouse movement smoothness</li>
            <li><strong>unknownDevice:</strong> Whether the hardware is recognized</li>
          </ul>
        </div>

        <div className="help-section">
          <h3>🛡️ Device Trust</h3>
          <p>
            List of hardware devices (mice, keyboards) observed on this machine. Known devices contribute 
            to lower risk scores, while unknown devices increase suspicion.
          </p>
          <p>
            <strong>Device ID Format:</strong> VID/PID (Vendor ID/Product ID) - unique identifiers for hardware.
          </p>
        </div>

        <div className="help-section">
          <h3>🧠 Heuristics</h3>
          <p>
            Level 1 behavioral analysis that measures human vs robotic patterns:
          </p>
          <ul style={{ marginLeft: '20px', color: '#475569' }}>
            <li><strong>Inter-event Entropy:</strong> How random are timing patterns? High = suspicious</li>
            <li><strong>Interval Regularity:</strong> How consistent are time gaps? Perfect consistency = robotic</li>
            <li><strong>Path Straightness:</strong> How straight are mouse movements? Too straight = jiggler</li>
          </ul>
        </div>

        <div className="help-section">
          <h3>🤖 ML Model (Level 2)</h3>
          <p>
            Advanced AI/ML contribution to risk assessment:
          </p>
          <ul style={{ marginLeft: '20px', color: '#475569' }}>
            <li><strong>ML Anomaly Score:</strong> What the machine learning models think (0.0-1.0)</li>
            <li><strong>Model Confidence:</strong> How sure the AI is about its prediction</li>
            <li><strong>Model Status:</strong> Which ML models are currently active</li>
          </ul>
          <p>
            <strong>Models Used:</strong> Isolation Forest and One-Class SVM for anomaly detection.
          </p>
        </div>

        <div className="help-section">
          <h3>💻 Machines</h3>
          <p>
            List of computers currently being monitored:
          </p>
          <ul style={{ marginLeft: '20px', color: '#475569' }}>
            <li><strong>hb:</strong> Last heartbeat (when activity was last detected)</li>
            <li><strong>ft:</strong> First seen timestamp (when monitoring started)</li>
          </ul>
        </div>

        <div className="help-section">
          <h3>📈 Risk History</h3>
          <p>
            Timeline showing how the risk score has changed over time. Helps identify patterns 
            and trends in activity behavior.
          </p>
        </div>

        <div className="help-section">
          <h3>🎮 Control Buttons</h3>
          <ul style={{ marginLeft: '20px', color: '#475569' }}>
            <li><strong>Seed Demo:</strong> Generates realistic test data with both human and jiggler patterns</li>
            <li><strong>Clear:</strong> Removes all demo data and resets the system</li>
            <li><strong>Evict Stale (120m):</strong> Removes data for machines inactive for 120+ minutes</li>
            <li><strong>Help:</strong> Opens this help guide</li>
          </ul>
        </div>

        <div className="device-reference">
          <h4>🔧 Device Reference Database</h4>
          <p style={{ marginBottom: '16px', color: '#475569' }}>
            Common device manufacturers and their VID codes:
          </p>
          
          <table className="device-table">
            <thead>
              <tr>
                <th>VID</th>
                <th>Manufacturer</th>
                <th>Popular Models</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(DEVICE_DATABASE).map(([vid, vendor]) => (
                <tr key={vid}>
                  <td><code>{vid}</code></td>
                  <td>{vendor.name}</td>
                  <td>
                    {Object.values(vendor.devices).slice(0, 3).join(', ')}
                    {Object.keys(vendor.devices).length > 3 && '...'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="help-section">
          <h3>🔬 How It Works</h3>
          <p>
            The system combines three detection methods for maximum accuracy:
          </p>
          <ol style={{ marginLeft: '20px', color: '#475569' }}>
            <li><strong>Device Trust (30%):</strong> Recognized hardware = lower risk</li>
            <li><strong>Heuristics (30%):</strong> Behavioral pattern analysis</li>
            <li><strong>ML Models (40%):</strong> AI-powered anomaly detection</li>
          </ol>
          <p>
            The final risk score is a weighted blend of all three methods, providing 
            enterprise-grade detection of mouse jigglers and simulated activity.
          </p>
        </div>
      </div>
    </div>
  );
};

export default HelpModal;