/* global React, V2Icon, V2_DATA */

function V2PatientHeader({ patient, mode, onBackToQuick }) {
  return (
    <div style={{
      padding: '10px 22px',
      background: '#fff',
      borderBottom: '1px solid var(--sage-200)',
      display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0
    }}>
      {mode === 'writing' &&
      <button
        onClick={onBackToQuick}
        style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '5px 10px', borderRadius: 6,
          border: '1px solid var(--sage-200)', background: '#fff',
          color: 'var(--sage-600)', cursor: 'pointer',
          fontSize: 11.5, fontWeight: 500,
          fontFamily: 'var(--font-sans)'
        }}>
        
          <V2Icon name="arrowLeft" size={12} />
          Quick note
        </button>
      }
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
          color: 'var(--primary)', background: 'var(--primary-muted)',
          padding: '2px 7px', borderRadius: 4
        }}>{patient.bed}</span>
        <h2 style={{ margin: 0, fontSize: 17, fontWeight: 600, color: 'var(--sage-800)', letterSpacing: '-0.01em' }}>
          {patient.fullName}
        </h2>
        <span style={{ fontSize: 11.5, color: 'var(--sage-500)', fontFamily: 'var(--font-mono)' }}>
          {patient.mrn} · {patient.dob} · {patient.age}{patient.sex}
        </span>
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--sage-500)' }} data-comment-anchor="3bbbecdb7c-div-30-7">
        <Tag>Day {patient.day}</Tag>
        <Tag>{patient.consultant}</Tag>
      </div>
    </div>);

}

function Tag({ children, tone }) {
  const styles = tone === 'warn' ?
  { background: 'var(--flag-surface)', color: 'var(--flag-text)', border: '1px solid var(--flag-border)' } :
  { background: 'var(--sage-100)', color: 'var(--sage-600)', border: '1px solid var(--sage-200)' };
  return (
    <span style={{
      ...styles,
      padding: '2px 8px', borderRadius: 9999,
      fontSize: 10.5, fontWeight: 500, letterSpacing: '0.01em',
      whiteSpace: 'nowrap'
    }}>{children}</span>);

}

window.V2PatientHeader = V2PatientHeader;
window.V2Tag = Tag;