// PhaseDetail — lower panel. Description, agent list, finding snippet,
// and (for phase 5) the ChainReveal.

function PhaseDetail({ phase, selectedAgent, setSelectedAgent }) {
  const { React, ChainReveal } = window;
  const [hover, setHover] = React.useState(null);

  const activeAgent = selectedAgent || hover || phase.agents[0];

  return (
    <div className="phase-detail">
      <div className="phase-detail-left">
        <div className="pd-eyebrow">
          phase {String(phase.id).padStart(2,'0')} · {phase.tagline}
        </div>
        <h3 className="pd-title">{phase.name}</h3>
        <p className="pd-desc">{phase.description}</p>

        <div className="pd-agents-title">
          <span>agents & tools</span>
          <span className="pd-agents-count">{phase.agents.length}</span>
        </div>
        <ul className="pd-agents">
          {phase.agents.map(a => (
            <li
              key={a.id}
              className={`pd-agent ${selectedAgent && selectedAgent.id === a.id ? 'is-selected' : ''} kind-${a.kind}`}
              onMouseEnter={() => setHover(a)}
              onMouseLeave={() => setHover(null)}
              onClick={() => setSelectedAgent(a)}
            >
              <span className="pd-agent-kind">{a.kind === 'tool' ? 'tool' : a.kind === 'more' ? '···' : 'agent'}</span>
              <span className="pd-agent-name">{a.id === '__more__' ? a.role : a.id}</span>
              <span className="pd-agent-role">{a.id === '__more__' ? '' : '— ' + a.role}</span>
            </li>
          ))}
        </ul>

        {activeAgent && activeAgent.hover && activeAgent.id !== '__more__' && (
          <div className="pd-hover-detail">
            <div className="pd-hover-label">about {activeAgent.id}</div>
            <div className="pd-hover-text">{activeAgent.hover}</div>
          </div>
        )}
      </div>

      <div className="phase-detail-right">
        <div className="pd-code">
          <div className="pd-code-head">
            <span className="pd-code-lang">rust</span>
            <span className="pd-code-title">{phase.finding.title}</span>
          </div>
          <pre className="pd-code-body">
            {phase.finding.code.map((l, i) => (
              <div key={i} className="pd-code-line">
                <span className="pd-code-ln">{String(i + 1).padStart(2,' ')}</span>
                <span className="pd-code-text" dangerouslySetInnerHTML={{ __html: highlightRust(l) }} />
              </div>
            ))}
          </pre>
        </div>

        {phase.isChainMoment && <ChainReveal visible={true} />}
      </div>
    </div>
  );
}

// super lightweight rust-ish syntax highlight
function highlightRust(line) {
  const esc = (s) => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  let s = esc(line);
  // comments
  s = s.replace(/(\/\/[^\n]*)/g, '<span class="c-comment">$1</span>');
  // strings
  s = s.replace(/("[^"]*")/g, '<span class="c-string">$1</span>');
  // numbers
  s = s.replace(/\b(\d+\.?\d*)\b/g, '<span class="c-num">$1</span>');
  // identifiers CamelCase (types / enums)
  s = s.replace(/\b([A-Z][A-Za-z0-9]+)\b/g, '<span class="c-type">$1</span>');
  // keys before :
  s = s.replace(/\b([a-z_][a-z0-9_]*)(\s*:)/gi, '<span class="c-key">$1</span>$2');
  // bools + keywords
  s = s.replace(/\b(true|false|Some|None|pub|struct|fn|let|enum)\b/g, '<span class="c-kw">$1</span>');
  return s;
}
window.PhaseDetail = PhaseDetail;