import { useParams } from 'react-router-dom';
import { useScoreboardSync } from '../hooks/useScoreboardSync';
import { Workspace } from '../components/Workspace';

/** Public co-scorekeeping page. No login — access is via the unguessable control token. */
export function Control() {
  const { token = '' } = useParams();
  const { state, sendUpdate, connected } = useScoreboardSync(`control=${token}`, 'editor');

  return (
    <div className="min-h-screen bg-ink text-white">
      <header className="border-b border-edge px-6 py-4">
        <h1 className="text-lg font-bold">Scorekeeper</h1>
        <p className="text-xs text-slate-500">Shared control — your changes go live instantly.</p>
      </header>
      <main className="mx-auto max-w-5xl p-6">
        {state ? (
          <Workspace state={state} onChange={sendUpdate} connected={connected} />
        ) : (
          <p className="text-slate-400">Connecting…</p>
        )}
      </main>
    </div>
  );
}