function HighlightedExcerpt({ excerpt, highlightStart, highlightEnd, label }) {
  if (!excerpt) return null
  const start = Number(highlightStart)
  const end = Number(highlightEnd)
  if (Number.isInteger(start) && Number.isInteger(end) && start >= 0 && end <= excerpt.length && end > start) {
    return (
      <p className="mask-excerpt">
        {excerpt.slice(0, start)}
        <mark>{excerpt.slice(start, end)}</mark>
        {excerpt.slice(end)}
      </p>
    )
  }
  const needle = label || ''
  const at = needle ? excerpt.toLowerCase().indexOf(needle.toLowerCase()) : -1
  if (at < 0) return <p className="mask-excerpt">{excerpt}</p>
  return (
    <p className="mask-excerpt">
      {excerpt.slice(0, at)}
      <mark>{excerpt.slice(at, at + needle.length)}</mark>
      {excerpt.slice(at + needle.length)}
    </p>
  )
}

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 die gelb markierte 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>
                  <HighlightedExcerpt
                    excerpt={item.excerpt}
                    highlightStart={item.highlight_start}
                    highlightEnd={item.highlight_end}
                    label={item.text}
                  />
                </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>
  )
}