// Detective's notebook — right column
function Notebook({ suspects, flagged, listened, onJump, onUnflag, onAccuse, canAccuse }) {
  const entries = [];
  flagged.forEach((line, key) => {
    const [suspectId] = key.split(":");
    const suspect = suspects.find(s => s.id === suspectId);
    if (!suspect) return;
    entries.push({ key, suspect, line });
  });
  // group by suspect
  const grouped = {};
  for (const e of entries) {
    grouped[e.suspect.id] = grouped[e.suspect.id] || { suspect: e.suspect, items: [] };
    grouped[e.suspect.id].items.push(e);
  }

  return (
    <aside className="notebook">
      <div className="col-header">
        <span className="col-header-num">03</span>
        <span className="col-header-label">NOTEBOOK</span>
        <span className="col-header-count">{flagged.size} FLAG{flagged.size === 1 ? "" : "S"}</span>
      </div>
      <div className="notebook-meta">
        <div className="notebook-meta-row">
          <span>HEARD</span>
          <span className="notebook-meta-val">{listened.size} OF {suspects.length}</span>
        </div>
        <div className="notebook-meta-row">
          <span>FLAGGED</span>
          <span className="notebook-meta-val">{flagged.size}</span>
        </div>
      </div>

      <div className="notebook-list">
        {flagged.size === 0 && (
          <div className="notebook-empty">
            <div className="notebook-empty-glyph">▢</div>
            <div className="notebook-empty-title">NO FLAGS YET</div>
            <div className="notebook-empty-hint">
              Listen carefully. Click any line — or press <span className="kbd">F</span> — to mark it suspicious.
            </div>
          </div>
        )}
        {Object.values(grouped).map(g => (
          <div key={g.suspect.id} className="notebook-group">
            <div className="notebook-group-head">
              <span className="notebook-group-name">{g.suspect.name}</span>
              <span className="notebook-group-role">— {g.suspect.role}</span>
            </div>
            {g.items.map(({ key, suspect, line }) => (
              <div key={key} className="notebook-entry">
                {line.tag && <span className={"notebook-entry-tag tag-" + line.tag.toLowerCase()}>{line.tag}</span>}
                <div className="notebook-entry-quote">
                  <span className="quote-mark">“</span>
                  <span>{line.text}</span>
                  <span className="quote-mark">”</span>
                </div>
                {Array.isArray(line.contradicts) && line.contradicts.length > 0 && (
                  <div className="notebook-entry-contradicts">
                    <div className="contradicts-head">⚠ CONTRADICTED BY</div>
                    {line.contradicts.map((c, i) => {
                      const other = suspects.find(s => s.id === c.suspect);
                      const otherLine = other && other.lines.find(l => l.id === c.line);
                      if (!other || !otherLine) return null;
                      return (
                        <div key={i} className="contradicts-row">
                          <div className="contradicts-row-head">
                            <span className="contradicts-name">{other.name}</span>
                            <button
                              className="contradicts-jump"
                              onClick={() => onJump(other, otherLine)}
                              title="Jump to that line"
                            >↻ {window.formatTime(otherLine.start)}</button>
                          </div>
                          <div className="contradicts-quote">“{otherLine.text}”</div>
                          <div className="contradicts-note">— {c.note}</div>
                        </div>
                      );
                    })}
                  </div>
                )}
                <div className="notebook-entry-foot">
                  <span className="notebook-tc">{window.formatTime(line.start)}</span>
                  <button
                    className="notebook-jump"
                    onClick={() => onJump(suspect, line)}
                    title="Jump to moment"
                  >
                    <span>↻ JUMP</span>
                  </button>
                  <button
                    className="notebook-remove"
                    onClick={() => onUnflag(suspect, line)}
                    title="Remove flag"
                  >
                    <span>×</span>
                  </button>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>

      <button
        className={"accuse-btn" + (canAccuse ? " ready" : "")}
        disabled={!canAccuse}
        onClick={onAccuse}
      >
        <span className="accuse-label">{canAccuse ? "ACCUSE" : "LISTEN TO ALL FOUR"}</span>
        <span className="accuse-sub">{canAccuse ? "ONE CHANCE" : (listened.size + " OF " + suspects.length + " HEARD")}</span>
      </button>
    </aside>
  );
}

window.Notebook = Notebook;