/* global React, V2Icon */

function V2PreviousNote({ note, onPrev, onNext, canPrev, canNext, idx, total }) {
  const isDraft = note.state !== 'submitted';
  return (
    <div style={{
      flex: 1, overflowY: 'auto', minWidth: 0, minHeight: 0,
      padding: '20px 24px 32px 24px'
    }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        {note.body ?
        <NoteDocument
          note={note}
          onPrev={onPrev} onNext={onNext}
          canPrev={canPrev} canNext={canNext}
          idx={idx} total={total} /> :

        <div style={{
          background: 'var(--sage-100)',
          border: '1px solid var(--sage-200)',
          borderRadius: 12,
          padding: 28,
          color: 'var(--sage-500)',
          fontSize: 13, textAlign: 'center'
        }}>
            This is the source text from a draft note — open it in the editor to continue.
            <div style={{
            marginTop: 14,
            padding: 14,
            background: '#fff',
            border: '1px solid var(--sage-200)',
            borderRadius: 8,
            fontSize: 12.5, color: 'var(--sage-700)',
            textAlign: 'left',
            lineHeight: 1.5,
            fontFamily: 'var(--font-serif)',
            fontStyle: 'italic'
          }}>
              {note.sourceText}
            </div>
          </div>
        }
      </div>
    </div>);

}

function NoteDocument({ note, onPrev, onNext, canPrev, canNext, idx, total }) {
  const b = note.body;
  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--sage-200)',
      borderRadius: 12,
      boxShadow: 'var(--shadow-sm)',
      overflow: 'hidden'
    }}>
      <div style={{
        padding: '12px 18px',
        borderBottom: '1px solid var(--sage-200)',
        background: 'var(--sage-50)',
        display: 'flex', alignItems: 'center', gap: 10,
        flexWrap: 'wrap'
      }}>
        {(onPrev || onNext) && (
          <span style={{
            display: 'inline-flex', alignItems: 'center',
            background: '#fff',
            border: '1px solid var(--sage-200)',
            borderRadius: 6,
            overflow: 'hidden',
            boxShadow: 'var(--shadow-sm)',
          }}>
            <button
              onClick={onPrev}
              disabled={!canPrev}
              aria-label="Previous note"
              title="Previous note"
              style={{
                width: 24, height: 22,
                display: 'grid', placeItems: 'center',
                background: 'transparent', border: 0, padding: 0,
                cursor: canPrev ? 'pointer' : 'default',
                color: canPrev ? 'var(--sage-700)' : 'var(--sage-300)',
              }}>
              <V2Icon name="chevronLeft" size={12} />
            </button>
            <span aria-hidden="true" style={{ width: 1, height: 14, background: 'var(--sage-200)' }} />
            <button
              onClick={onNext}
              disabled={!canNext}
              aria-label="Next note"
              title="Next note"
              style={{
                width: 24, height: 22,
                display: 'grid', placeItems: 'center',
                background: 'transparent', border: 0, padding: 0,
                cursor: canNext ? 'pointer' : 'default',
                color: canNext ? 'var(--sage-700)' : 'var(--sage-300)',
              }}>
              <V2Icon name="chevronRight" size={12} />
            </button>
          </span>
        )}
        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--sage-800)', whiteSpace: 'nowrap' }}>{note.type} note</span>
        {typeof idx === 'number' && total > 0 && (
          <span style={{ fontSize: 10.5, color: 'var(--sage-500)', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}>
            {idx + 1} / {total}
          </span>
        )}
        <span style={{
          fontSize: 11, color: 'var(--sage-500)',
          fontFamily: 'var(--font-mono)',
          whiteSpace: 'nowrap'
        }}>
          {note.author} · {note.submittedAt || note.startedAt}
        </span>
        <div style={{ flex: 1 }} />
        <button style={{
          background: 'transparent', border: 0,
          color: 'var(--sage-500)', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 11.5, whiteSpace: 'nowrap'
        }} data-comment-anchor="43367371ef-button-105-9">
          <V2Icon name="doc" size={12} />
          Copy
        </button>
      </div>
      <div style={{ padding: '20px 24px 24px 24px' }}>
        <Section title="Subjective" body={b.subjective} />
        <Section title="Objective" body={b.objective} />
        <Section title="Assessment" body={b.assessment} />
        <Section title="Plan" list={b.plan} />
      </div>
    </div>);

}

function Section({ title, body, list }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <h4 style={{
        margin: 0, marginBottom: 6,
        fontSize: 11, fontWeight: 600,
        color: 'var(--sage-500)',
        letterSpacing: '0.08em', textTransform: 'uppercase'
      }}>{title}</h4>
      {list ?
      <ol style={{ margin: 0, paddingLeft: 20, fontSize: 13, color: 'var(--sage-700)', lineHeight: 1.55 }}>
          {list.map((p, i) => <li key={i} style={{ marginBottom: 3 }}>{p}</li>)}
        </ol> :

      <p style={{ margin: 0, fontSize: 13, color: 'var(--sage-700)', lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>
          {body}
        </p>
      }
    </div>);

}

function navBtn(enabled) {
  return {
    background: '#fff', border: '1px solid var(--sage-200)',
    width: 26, height: 26, borderRadius: 6,
    cursor: enabled ? 'pointer' : 'default',
    color: enabled ? 'var(--sage-600)' : 'var(--sage-300)',
    display: 'grid', placeItems: 'center',
    boxShadow: 'var(--shadow-sm)'
  };
}

window.V2PreviousNote = V2PreviousNote;