/* Topic page — explanation, scenario, then the test component */

function TopicScreen({ topicId, onNavTopic, onNavHome, user, onLogout }) {
  const topic = window.TOPICS_BY_ID[topicId];
  const allIds = window.TOPICS.map((t) => t.id);
  const idx = allIds.indexOf(topicId);
  const prev = idx > 0 ? window.TOPICS[idx - 1] : null;
  const next = idx < window.TOPICS.length - 1 ? window.TOPICS[idx + 1] : null;

  const [resetKey, setResetKey] = useState(0);

  const TestComponent = window.TestComponents[topicId];

  if (!topic) {
    return (
      <div>
        <TopBar user={user} onLogout={onLogout} onNavHome={onNavHome} />
        <div className="container">
          <div className="empty">Unknown topic.</div>
        </div>
      </div>
    );
  }

  return (
    <div data-screen-label={`Topic · ${topic.title}`}>
      <TopBar
        user={user}
        onLogout={onLogout}
        onNavHome={onNavHome}
        crumbs={[
          { label: "Assignments", href: "#", onClick: onNavHome },
          { label: topic.title },
        ]}
      />

      <div className="container container-narrow">
        <header className="topic-header">
          <div className="topic-meta-row">
            <span className="topic-card-num mono">
              {String(idx + 1).padStart(2, "0")} / {String(window.TOPICS.length).padStart(2, "0")}
            </span>
            {topic.tags.map((t) => (
              <span key={t} className="badge badge-mono">{t}</span>
            ))}
          </div>
          <h1 className="topic-title" data-testid="topic-title">{topic.title}</h1>
          <p className="subtle" style={{ fontSize: 16, margin: 0 }}>
            {topic.description}
          </p>
        </header>

        <section className="section" data-testid="explanation">
          <div className="section-label">Explanation</div>
          <div className="section-body" dangerouslySetInnerHTML={{ __html: `<p>${topic.explanation}</p>` }} />
        </section>

        <section className="section" data-testid="scenario">
          <div className="section-label">Scenario</div>
          <ol className="scenario-list">
            {topic.scenario.map((s, i) => (
              <li key={i} dangerouslySetInnerHTML={{ __html: s }} />
            ))}
          </ol>
        </section>

        <section className="section" data-testid="test-area">
          <div className="section-label">Test component</div>
          <TestSurface
            title={`Playground · ${topic.title}`}
            onReset={() => setResetKey((k) => k + 1)}
          >
            {TestComponent
              ? <TestComponent resetKey={resetKey} />
              : <div className="subtle">Component not implemented.</div>}
          </TestSurface>
        </section>

        <nav className="topic-nav" data-testid="topic-nav">
          {prev ? (
            <a data-testid="prev-topic" onClick={() => onNavTopic(prev.id)}>
              <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
                <Icon.ChevronLeft /> Previous
              </span>
              <strong>{prev.title}</strong>
            </a>
          ) : <span className="placeholder">x</span>}
          {next ? (
            <a className="next" data-testid="next-topic" onClick={() => onNavTopic(next.id)}>
              <span style={{ display: "flex", alignItems: "center", gap: 4, justifyContent: "flex-end" }}>
                Next <Icon.ChevronRight />
              </span>
              <strong>{next.title}</strong>
            </a>
          ) : <span className="placeholder">x</span>}
        </nav>
      </div>
    </div>
  );
}

window.TopicScreen = TopicScreen;