import { Component, StrictMode, useState, type ReactNode } from 'react';
import { createRoot } from 'react-dom/client';
import { ProbeMap } from './ProbeMap';
import './probe.css';

// A probe that white-screens teaches nothing: the run has to say *whose* bug it
// was, ol-ext's or ours. This boundary keeps the error on the page so the gate
// result stays attributable.
class ErrorBoundary extends Component<{ children: ReactNode }, { error: Error | null }> {
  state: { error: Error | null } = { error: null };

  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  render() {
    const { error } = this.state;
    if (!error) return this.props.children;
    return (
      <section className="probe-error">
        <h1>探针崩溃了</h1>
        <p>请把下面整段发给我 —— 它决定这次失败算谁的。</p>
        <pre>
          {error.name}: {error.message}
          {'\n\n'}
          {error.stack}
        </pre>
        <button type="button" onClick={() => this.setState({ error: null })}>
          重试
        </button>
      </section>
    );
  }
}

// The mount toggle exists so the React lifecycle question gets answered too: a
// remount is *expected* to build a new Map, while dragging and re-rendering must
// not. Gate 1 is about the latter.
function Probe() {
  const [mounted, setMounted] = useState(true);
  return (
    <>
      <nav className="probe-nav">
        <strong>ol-ext Transform 限时探针</strong>
        <span>隔离页面，不接 API，不影响生产图层</span>
        <button type="button" onClick={() => setMounted(!mounted)}>
          {mounted ? '卸载地图' : '重新挂载地图'}
        </button>
      </nav>
      {mounted ? <ProbeMap /> : <p className="probe-empty">地图已卸载。重新挂载会构造新的 Map，这是预期行为。</p>}
    </>
  );
}

createRoot(document.getElementById('probe')!).render(
  <StrictMode>
    <ErrorBoundary>
      <Probe />
    </ErrorBoundary>
  </StrictMode>,
);