// record-shell.jsx — top bar (brand + mode toggle + doctor) and the
// home / module-selection screen for PulseChart Record.

const RSH = window.PCT;

function RShell({ children, crumb, headerRight }) {
  const store = useRStore();
  const mode = store.state.mode;
  return (
    <div style={{ minHeight:'100vh', display:'flex', flexDirection:'column', background:RSH.c.bg, fontFamily:RSH.f.sans, color:RSH.c.text }}>
      <RTopBar mode={mode} crumb={crumb} right={headerRight}/>
      <div style={{ flex:1 }}>{children}</div>
      <RToastHost/>
    </div>
  );
}

function RTopBar({ mode, crumb, right }) {
  const store = useRStore();
  return (
    <header style={{ height:60, padding:'0 28px', borderBottom:`1px solid ${RSH.c.border}`, background:RSH.c.surface, display:'flex', alignItems:'center', gap:16, position:'sticky', top:0, zIndex:50 }}>
      {/* Brand */}
      <a href="#/" style={{ display:'flex', alignItems:'center', gap:11, textDecoration:'none', color:RSH.c.text }}>
        <div style={{ width:30, height:30, borderRadius:8, background:'linear-gradient(135deg, #6D28D9, #4C1D95)', display:'grid', placeItems:'center', color:'#fff', fontFamily:RSH.f.mono, fontWeight:700, fontSize:14, letterSpacing:'-.04em' }}>P</div>
        <div>
          <div style={{ fontSize:15, fontWeight:600, letterSpacing:'-.01em', lineHeight:1 }}>PulseChart Record</div>
          <div style={{ fontSize:10, color:RSH.c.textMuted, fontFamily:RSH.f.mono, letterSpacing:'.06em', textTransform:'uppercase', marginTop:2 }}>Counseling · Discharge</div>
        </div>
      </a>

      {/* Crumb */}
      {crumb && (
        <div style={{ display:'flex', alignItems:'center', gap:8, marginLeft:10 }}>
          <span style={{ color:RSH.c.textDim }}><RIcon name="right" size={13} color={RSH.c.textDim}/></span>
          {crumb.map((c, i) => (
            <React.Fragment key={i}>
              {i>0 && <RIcon name="right" size={12} color={RSH.c.textDim}/>}
              <span style={{ fontSize:13, fontWeight: i===crumb.length-1?600:400, color: i===crumb.length-1?RSH.c.text:RSH.c.textMuted }}>{c}</span>
            </React.Fragment>
          ))}
        </div>
      )}

      <div style={{ flex:1 }}/>
      {right}

      {/* Mode toggle */}
      <RModeToggle mode={mode}/>

      {/* Doctor */}
      <div style={{ display:'flex', alignItems:'center', gap:9, paddingLeft:14, borderLeft:`1px solid ${RSH.c.border}` }}>
        <div style={{ width:30, height:30, borderRadius:'50%', background:'#E0E7FF', display:'grid', placeItems:'center', fontSize:11, fontWeight:600, color:'#3730A3' }}>
          {store.state.doctorName.replace('Dr. ','').split(' ').map(s=>s[0]).slice(0,2).join('')}
        </div>
        <div style={{ lineHeight:1.2 }}>
          <div style={{ fontSize:12.5, fontWeight:500 }}>{store.state.doctorName}</div>
          <div style={{ fontSize:10, color:RSH.c.textMuted, fontFamily:RSH.f.mono }}>{store.state.doctorReg}</div>
        </div>
      </div>
    </header>
  );
}

function RModeToggle({ mode }) {
  const store = useRStore();
  return (
    <div style={{ display:'flex', background:RSH.c.surface2, borderRadius:8, padding:2, gap:1, border:`1px solid ${RSH.c.border}` }}>
      {[
        { id:'integrated', label:'Inside HMS', dot:RSH.c.accent },
        { id:'standalone', label:'Standalone', dot:RSH.c.brand },
      ].map(o => (
        <button key={o.id} onClick={()=>store.setMode(o.id)} style={{
          display:'flex', alignItems:'center', gap:6, padding:'5px 11px', borderRadius:6,
          background: mode===o.id?'#fff':'transparent', color: mode===o.id?RSH.c.text:RSH.c.textMuted,
          fontSize:11.5, fontWeight: mode===o.id?600:500, border:'none', cursor:'pointer',
          boxShadow: mode===o.id?'0 1px 2px rgba(0,0,0,.06)':'none', fontFamily:RSH.f.sans }}>
          <span style={{ width:6, height:6, borderRadius:'50%', background:o.dot }}/>{o.label}
        </button>
      ))}
    </div>
  );
}

// ── Home / module selection ──────────────────────────────
function RecordHome() {
  const store = useRStore();
  const mode = store.state.mode;
  return (
    <RShell>
      <div style={{ maxWidth:1080, margin:'0 auto', padding:'48px 28px 100px' }}>
        {/* Hero */}
        <div style={{ textAlign:'center', marginBottom:40 }}>
          <div style={{ fontFamily:RSH.f.mono, fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:RSH.c.brand, marginBottom:14 }}>
            {mode==='integrated' ? 'Inside PulseChart HMS' : 'Standalone demo'}
          </div>
          <h1 style={{ fontSize:34, fontWeight:600, letterSpacing:'-.025em', margin:'0 0 14px', textWrap:'balance' }}>
            What would you like to do today?
          </h1>
          <p style={{ fontSize:16, color:RSH.c.textMuted, maxWidth:600, margin:'0 auto', lineHeight:1.55, textWrap:'pretty' }}>
            {mode==='integrated'
              ? 'Patient context flows in automatically from the HMS admission record — you pick the patient and PulseChart pre-fills demographics, diagnosis and clinical notes.'
              : 'Capture informed-consent counselling or generate an NABH-compliant discharge summary. Enter patient data directly — no HMS required.'}
          </p>
        </div>

        {/* Module cards */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
          <ModuleCard
            module="counseling" icon="shield" accent={RSH.c.brand}
            title="Counseling Capture"
            tagline="Voice-capture informed consent, get structured medico-legal evidence in 3 minutes."
            bullets={['Patient-specific risk derivation','Procedure coverage checklist','Multi-party signed consent (EN + ಕನ್ನಡ)']}
            cta="Start counselling"
            onClick={()=>rNav('#/counseling')}
          />
          <ModuleCard
            module="discharge" icon="discharge" accent={RSH.c.accent}
            title="Discharge Summary"
            tagline="Synthesize multi-day patient data into an NABH-compliant discharge summary."
            bullets={['10-section structured summary','Hallucination guardrails ([INSUFFICIENT DATA])','Consultant sign-off + bilingual PDF']}
            cta="Start discharge"
            onClick={()=>rNav('#/discharge')}
          />
        </div>

        {/* Specialty note */}
        <div style={{ marginTop:28, display:'flex', justifyContent:'center', gap:20, flexWrap:'wrap' }}>
          <SpecialtyNote specialty="OBGYN"/>
          <SpecialtyNote specialty="ORTHO"/>
        </div>

        {/* Mode explainer */}
        <div style={{ marginTop:28, padding:'16px 20px', background:RSH.c.surface, border:`1px solid ${RSH.c.border}`, borderRadius:12, display:'flex', gap:14, alignItems:'flex-start' }}>
          <div style={{ width:34, height:34, borderRadius:8, background: mode==='integrated'?RSH.c.accentTint:RSH.c.brandSoft, color: mode==='integrated'?RSH.c.accent:RSH.c.brand, display:'grid', placeItems:'center', flexShrink:0 }}>
            <RIcon name={mode==='integrated'?'link':'doc'} size={17}/>
          </div>
          <div style={{ fontSize:13, color:RSH.c.textMuted, lineHeight:1.6 }}>
            <strong style={{ color:RSH.c.text }}>{mode==='integrated' ? 'HMS-integrated mode' : 'Standalone mode'}.</strong>{' '}
            {mode==='integrated'
              ? 'When the hospital runs PulseChart HMS, every patient already exists — admission demographics, diagnosis, daily progress notes and labs flow into Record automatically. The doctor reviews instead of typing. Toggle to Standalone (top-right) to see what a hospital on another HMS would do.'
              : 'For hospitals on another HMS, Record works fully on its own — the doctor enters or voice-loads the patient and uses sample journeys to move fast. Toggle to Inside HMS (top-right) to see how much the integrated version pre-fills automatically.'}
          </div>
        </div>
      </div>
    </RShell>
  );
}

function ModuleCard({ icon, title, tagline, bullets, cta, accent, onClick }) {
  return (
    <div onClick={onClick} style={{
      background:RSH.c.surface, border:`1px solid ${RSH.c.border}`, borderRadius:16, padding:28, cursor:'pointer',
      transition:'transform .12s, box-shadow .12s, border-color .12s', display:'flex', flexDirection:'column',
    }}
      onMouseEnter={e=>{ e.currentTarget.style.boxShadow='0 12px 28px -8px rgba(0,0,0,.12)'; e.currentTarget.style.borderColor=accent; e.currentTarget.style.transform='translateY(-2px)'; }}
      onMouseLeave={e=>{ e.currentTarget.style.boxShadow='none'; e.currentTarget.style.borderColor=RSH.c.border; e.currentTarget.style.transform='none'; }}>
      <div style={{ width:48, height:48, borderRadius:12, background:accent+'15', color:accent, display:'grid', placeItems:'center', marginBottom:18 }}>
        <RIcon name={icon} size={24} color={accent}/>
      </div>
      <div style={{ fontSize:20, fontWeight:600, letterSpacing:'-.015em', marginBottom:8 }}>{title}</div>
      <div style={{ fontSize:14, color:RSH.c.textMuted, lineHeight:1.55, marginBottom:18 }}>{tagline}</div>
      <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:22 }}>
        {bullets.map((b,i)=>(
          <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:9, fontSize:13, color:RSH.c.text }}>
            <span style={{ marginTop:2, color:accent, flexShrink:0 }}><RIcon name="check" size={14} color={accent}/></span>{b}
          </div>
        ))}
      </div>
      <div style={{ marginTop:'auto' }}>
        <RBtn kind={accent===RSH.c.brand?'brand':'primary'} iconRight="right" full>{cta}</RBtn>
      </div>
    </div>
  );
}

function SpecialtyNote({ specialty }) {
  const sp = window.PR.specialties[specialty];
  return (
    <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:12, color:RSH.c.textMuted }}>
      <RSpecChip specialty={specialty}/>
      {sp.validated
        ? <span style={{ color:RSH.c.success, display:'flex', alignItems:'center', gap:4 }}><RIcon name="check" size={12} color={RSH.c.success}/>Clinically validated</span>
        : <RUnverifiedBadge small/>}
    </div>
  );
}

Object.assign(window, { RShell, RecordHome });
