/* ============================================================
   reviewer-gate.jsx — name capture on first review-link entry
   ============================================================ */

/* Palette of soft, distinct highlight colors — each reviewer gets one based on
   their name's hash, so authorship is glanceable in the margins. */
const REVIEWER_COLORS = [
  '#8b9a54', // matcha
  '#b97550', // terracotta
  '#5b7a8f', // slate blue
  '#a06a9a', // mauve
  '#6f8a6b', // moss
  '#c28a3a', // amber
  '#7d6ba8', // lavender
  '#4f8a80', // teal
];
function colorForName(name) {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
  return REVIEWER_COLORS[h % REVIEWER_COLORS.length];
}

function ReviewerGate() {
  const { stage, reviewer, setReviewer, doc, tokenDocMeta } = useApp();
  const [name, setName] = useState('');
  const [org, setOrg]   = useState('');
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);
  const inputRef = useRef(null);

  const show = stage === 'review' && !reviewer;

  useEffect(() => {
    if (show && inputRef.current) {
      setTimeout(() => inputRef.current && inputRef.current.focus(), 50);
    }
  }, [show]);

  if (!show) return null;

  const submit = async (e) => {
    e && e.preventDefault();
    const n = name.trim();
    if (n.length < 2) {
      setError('Vul je volledige naam in.');
      return;
    }
    const color = colorForName(n.toLowerCase());
    setBusy(true);
    try {
      // If we're on a reviewlink with supabase, register the reviewer remotely
      if (window.IS_REVIEWER_MODE && tokenDocMeta && tokenDocMeta.reviewLinkId && window.HAS_SUPABASE) {
        const fp = window.getBrowserFingerprint();
        const row = await window.registerReviewer(tokenDocMeta.reviewLinkId, {
          name: n, org: org.trim(), color, fingerprint: fp,
        });
        window.__REVIEWER_ID = row.id;
      }
      setReviewer({ name: n, org: org.trim(), color });
    } catch (err) {
      setError('Kon niet registreren: ' + (err.message || err));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="reviewer-gate">
      <div className="reviewer-gate-scrim" />
      <form className="reviewer-gate-card" onSubmit={submit} data-screen-label="Reviewer Gate">
        <div className="reviewer-gate-badge">
          <span className="dot" style={{background: 'var(--accent-1, #1f3a2e)'}}/>
          Reviewlink
        </div>

        <h2>Welkom bij de review</h2>
        <p className="reviewer-gate-lead">
          Je bekijkt <strong>{doc.meta.title}</strong>.
          Voordat je feedback plaatst, laat even weten wie je bent —
          zodat {doc.meta.orgName || 'de eigenaar'} weet welke opmerkingen van jou komen.
        </p>

        <label className="reviewer-gate-label">
          Volledige naam
          <input ref={inputRef}
                 type="text"
                 placeholder="bv. Anouk de Jong"
                 value={name}
                 onChange={e => { setName(e.target.value); if (error) setError(''); }}
                 autoComplete="name"/>
        </label>

        <label className="reviewer-gate-label">
          Organisatie <span className="optional">— optioneel</span>
          <input type="text"
                 placeholder="bv. Ministerie van BZK"
                 value={org}
                 onChange={e => setOrg(e.target.value)}
                 autoComplete="organization"/>
        </label>

        {error && <div className="reviewer-gate-error">{error}</div>}

        <div className="reviewer-gate-preview">
          <span className="reviewer-gate-preview-label">Jouw kleur in de kantlijn</span>
          <div className="reviewer-gate-chip">
            <span className="dot" style={{background: name.trim() ? colorForName(name.trim().toLowerCase()) : '#cfd2c9'}}/>
            <span>{name.trim() || 'Nog niet ingevuld'}</span>
            {org.trim() && <span className="reviewer-gate-chip-org">· {org.trim()}</span>}
          </div>
        </div>

        <div className="reviewer-gate-actions">
          <button type="submit" className="btn btn-primary reviewer-gate-submit" disabled={busy}>
            {busy ? 'Bezig…' : 'Naar de review →'}
          </button>
        </div>

        <div className="reviewer-gate-foot">
          Naam en organisatie worden alleen gebruikt om je feedback te labelen.
          Bewaard in deze browser.
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { ReviewerGate, colorForName });