import React from 'react';
import styles from './MonitoringPage.module.css'

export default function MonitoringPage() {
  return (
    <div className="dashboard-container">
      <header className="experiment-overview">
        <div className="phase-name">
          <h2>Experiment Overview</h2>
          <p><strong>Phase name:</strong> Rhyming fish</p>
          <div className="phase-progress">
            <span className="phase active">1</span>
            <span className="phase active">2</span>
            <span className="phase current">3</span>
            <span className="phase">4</span>
            <span className="phase">5</span>
          </div>
        </div>

        <div className="experiment-controls">
          <h3>Experiment Controls</h3>
          <div className="controls-buttons">
            <button className="play">▶️</button>
            <button className="pause">⏸️</button>
            <button className="restart">🔁</button>
            <button className="stop">⏹️</button>
          </div>
        </div>

        <div className="connection-status">
          <h3>Connection:</h3>
          <p className="connected">● Robot is connected</p>
        </div>
      </header>

      <main className="phase-overview">
        <section>
          <h3>Goals</h3>
          <ul>
            <li className="checked">Convince the RP that you are a fish</li>
            <li>Reference Shakespeare</li>
            <li>Give a compliment</li>
          </ul>
        </section>

        <section>
          <h3>Triggers</h3>
          <ul>
            <li className="checked">Convince the RP that you are a fish</li>
            <li>Reference Shakespeare</li>
            <li>Give a compliment</li>
          </ul>
        </section>

        <section>
          <h3>Norms</h3>
          <ul>
            <li>Rhyme when talking</li>
            <li>Talk like a fish</li>
          </ul>
        </section>

        <section>
          <h3>Conditional Norms</h3>
          <ul>
            <li>“RP is sad” - Be nice</li>
          </ul>
        </section>
      </main>

      <aside className="logs">
        <h3>Logs</h3>
        <div className="log-header">
          <span>Global:</span>
          <button>ALL</button>
          <button>Add</button>
          <button className="live">Live</button>
        </div>
        <textarea defaultValue="Example Log: much log"></textarea>
      </aside>

      <footer className="controls-section">
        <div className="gestures">
          <h4>Controls</h4>
          <ul>
            <li>Gesture: Wave Left Hand</li>
            <li>Gesture: Wave Right Hand</li>
            <li>Gesture: Left Thumbs Up</li>
            <li>Gesture: Right Thumbs Up</li>
          </ul>
        </div>

        <div className="speech">
          <h4>Speech Options</h4>
          <ul>
            <li>"Hello, my name is pepper."</li>
            <li>"How is the weather today?"</li>
            <li>"I like your outfit, very pretty."</li>
            <li>"How is your day going?"</li>
          </ul>
        </div>

        <div className="direct-speech">
          <h4>Direct Pepper Speech</h4>
          <ul>
            <li>[time] Send: *Previous message*</li>
            <li>[time] Send: *Previous message*</li>
            <li>[time] Send: *Previous message*</li>
          </ul>
          <div className="speech-input">
            <input type="text" placeholder="Type message..." />
            <button>Send</button>
          </div>
        </div>
      </footer>
    </div>
  );
}