// Reusable code window with tabs, copy, and (optional) run button + response panel
const { useState, useRef, useEffect } = React;

function CodeTokens({ tokens }) {
  return (
    <>
      {tokens.map((tk, i) => {
        if (tk.t === 'br') return <br key={i} />;
        return <span key={i} className={`tk-${tk.t}`}>{tk.v}</span>;
      })}
    </>
  );
}

function CodeWindow({ samples, defaultLang = 'js', langs = ['js', 'py', 'go', 'curl'], runnable = false, onRun, response, responseOpen, showTraffic = true, height }) {
  const [lang, setLang] = useState(defaultLang);
  const [copied, setCopied] = useState(false);
  const [running, setRunning] = useState(false);

  const labels = { js: 'JavaScript', ts: 'TypeScript', py: 'Python', go: 'Go', curl: 'cURL' };

  const copy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
    window.dispatchEvent(new CustomEvent('toast', { detail: 'Copied to clipboard' }));
  };

  const run = () => {
    if (!onRun) return;
    setRunning(true);
    setTimeout(() => {
      setRunning(false);
      onRun();
    }, 700);
  };

  return (
    <div className="code-window">
      <div className="code-tabs">
        {showTraffic && (
          <div className="code-traffic"><span /><span /><span /></div>
        )}
        {langs.map(l => (
          <button
            key={l}
            className={`code-tab ${l === lang ? 'active' : ''}`}
            onClick={() => setLang(l)}
          >{labels[l]}</button>
        ))}
      </div>
      <div className="code-body" style={height ? { minHeight: height } : null}>
        {runnable && (
          <button className={`run-btn ${running ? 'loading' : ''}`} onClick={run}>
            <Icon.Play /> {running ? 'Running…' : 'Run'}
          </button>
        )}
        <button className={`code-copy ${copied ? 'copied' : ''}`} onClick={copy}>
          {copied ? <><Icon.Check size={11} /> Copied</> : <><Icon.Copy /> Copy</>}
        </button>
        <CodeTokens tokens={samples[lang] || samples.js} />
      </div>
      {runnable && (
        <div className={`response-panel ${responseOpen ? 'open' : ''}`}>
          <div className="response-header">
            <span className="response-status"><span className="dot" /> 200 OK</span>
            <span style={{ color: '#4a5b73' }}>•</span>
            <span>POST /v1/{response?.endpoint || 'kem/encapsulate'}</span>
            <span style={{ color: '#4a5b73' }}>•</span>
            <span>{response?.duration || 'sandbox'}</span>
          </div>
          <pre style={{ margin: 0, fontFamily: 'inherit', whiteSpace: 'pre-wrap', color: '#c8d1de' }}>
            {response?.body || ''}
          </pre>
        </div>
      )}
    </div>
  );
}

window.CodeWindow = CodeWindow;