export default function MaskReviewPanel({ review, busy, onSubmit }) {
  if (!review?.candidates?.length) return null
  return (
    <div className="runlog-overlay" role="dialog" aria-labelledby="mask-review-title">
      <div className="runlog-modal">
        <div className="runlog-head">
          <div>
            <h2 id="mask-review-title">Maskierung prüfen</h2>
            <p className="runlog-status">
              Lernmodus: nur diese Nennung. Bestätigen legt die Bezeichnung lokal ab.
              „Nicht schützenswert“ verhindert die Maskierung. Beides bei demselben Wort markiert es als mehrdeutig.
            </p>
          </div>
        </div>
        <form
          className="stack"
          onSubmit={(event) => {
            event.preventDefault()
            const data = new FormData(event.currentTarget)
            const decisions = review.candidates.map((item) => ({
              id: item.id,
              decision: data.get(`decision-${item.id}`) || 'identity'
            }))
            onSubmit(decisions)
          }}
        >
          <ul className="stack">
            {review.candidates.map((item) => (
              <li key={item.id} className="row-item">
                <div>
                  <strong>{item.text}</strong>
                  <span className="muted"> · {item.entity_type}{item.ambiguous ? ' · mehrdeutig' : ''}</span>
                  {item.excerpt && <p className="muted">{item.excerpt}</p>}
                </div>
                <fieldset className="row-actions">
                  <label className="check">
                    <input type="radio" name={`decision-${item.id}`} value="identity" defaultChecked={item.suggested !== 'not_identity'} />
                    Identität
                  </label>
                  <label className="check">
                    <input type="radio" name={`decision-${item.id}`} value="not_identity" defaultChecked={item.suggested === 'not_identity'} />
                    Nicht schützenswert
                  </label>
                </fieldset>
              </li>
            ))}
          </ul>
          <button type="submit" disabled={busy}>{busy ? 'Übernimmt …' : 'Übernehmen und weiter'}</button>
        </form>
      </div>
    </div>
  )
}