import type { ClientEvent, VoteRequest } from "../types/events";

interface EventLogPanelProps {
  events: ClientEvent[];
  votes: VoteRequest[];
  sessionId: string;
}

export function EventLogPanel({
  events,
  votes,
  sessionId
}: EventLogPanelProps) {
  return (
    <div className="event-panel">
      <section className="event-panel__section">
        <p className="eyebrow">Session</p>
        <h2>Runtime signals</h2>
        <p className="event-panel__session">{sessionId}</p>
      </section>

      <section className="event-panel__section">
        <h3>Recent events</h3>
        {events.length === 0 ? (
          <p className="event-panel__empty">
            Events will appear here as playback, slide changes, and pauses occur.
          </p>
        ) : (
          <ul className="event-panel__list">
            {events.map((event, index) => (
              <li key={`${event.type}-${index}`} className="event-panel__item">
                <strong>{event.type}</strong>
                <span>{JSON.stringify(event)}</span>
              </li>
            ))}
          </ul>
        )}
      </section>

      <section className="event-panel__section">
        <h3>Committed votes</h3>
        {votes.length === 0 ? (
          <p className="event-panel__empty">
            Resume after switching a candidate to record a vote.
          </p>
        ) : (
          <ul className="event-panel__list">
            {votes.map((vote) => (
              <li
                key={`${vote.slideId}-${vote.selectedGlitchSlideId}-${vote.timestamp}`}
                className="event-panel__item"
              >
                <strong>{vote.slideId}</strong>
                <span>
                  {vote.previousGlitchSlideId} -&gt; {vote.selectedGlitchSlideId}
                </span>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}
