/* What the reader sees when a turn does not happen.
 *
 * `BROWSER-UX-SPEC.md` §17, §71, §72 and §12 of the M8 brief. Three things this
 * has to get right, all of which the inherited toast got wrong:
 *
 *   1. **Say which failure it was.** The toast showed one line of the server's
 *      message with a Retry button beside it, so "Ollama isn't running" and
 *      "the model returned nothing" looked identical and read as equally
 *      hopeless. `errors.js` sorts them into §71's five kinds and each carries
 *      the thing to do about it.
 *   2. **Do not lose what was typed.** A05 requires the player's submitted
 *      input to survive a failed generation. The composer keeps the text and
 *      this says so out loud, because a reader who cannot see their sentence
 *      assumes it is gone and retypes it.
 *   3. **Do not present partial prose as story.** Whatever streamed before the
 *      failure is dropped from the transcript by the caller; if any arrived, it
 *      is shown here, clearly labelled as not part of the story.
 *
 * Technical detail is present but folded away (§72), because the reader who
 * needs the raw message is not the reader who needs the first sentence.
 */

import { Link } from 'react-router-dom'
import { KIND } from '../../errors'

const ICON = {
  [KIND.MODEL]: '⚠',
  [KIND.GENERATION]: '↻',
  [KIND.STATE]: '◆',
  [KIND.KNOWLEDGE]: '❋',
  [KIND.SERVER]: '⚠',
}

export function FailureNotice({ failure, partial, onRetry, onDismiss }) {
  if (!failure) return null
  return (
    <div
      className={`failure failure-${failure.kind}`}
      role="alert"
      data-testid="failure"
      data-kind={failure.kind}
    >
      <div className="failure-head">
        <span className="failure-icon" aria-hidden="true">{ICON[failure.kind] || '⚠'}</span>
        <strong>{failure.title}</strong>
        <button
          type="button"
          className="failure-close"
          aria-label="Dismiss this message"
          onClick={onDismiss}
        >
          ✕
        </button>
      </div>

      {failure.hint && <p className="failure-hint">{failure.hint}</p>}

      <p className="failure-kept">
        Your story is unchanged, and what you typed is still in the box below.
      </p>

      {partial ? (
        <details className="failure-partial">
          <summary>The narrator had begun writing — this was not kept</summary>
          <blockquote>{partial}</blockquote>
        </details>
      ) : null}

      <details className="failure-detail">
        <summary>Show technical details</summary>
        <pre>{failure.detail}</pre>
      </details>

      <div className="failure-actions">
        {failure.retryable && (
          <button type="button" className="primary" onClick={onRetry}>
            Try that turn again
          </button>
        )}
        {failure.action && (
          <Link className="button" to={failure.action.to}>{failure.action.label}</Link>
        )}
      </div>
    </div>
  )
}