/* ───────────────────────────────────────────────────────────────────────────
   Surface 6 — Care Team Companion
   For the care team, not the individual. Two editions:
     · Clinical    — concise cross-condition summary, designed to land in <60s.
     · Practitioner — drillable detail to make it actionable with a client.
   The trojan horse for clinician pull-through: the clinician reads the
   companion, never the patient-facing document.
   ─────────────────────────────────────────────────────────────────────────── */

function CompanionSurface({ persona, go }) {
  const [edition, setEdition] = React.useState('clinical');
  return (
    <div className="surface comp-surface">
      <SurfaceHead
        eyebrow="Care Team Companion · for the care team"
        title={<>Lands in <em>sixty seconds.</em></>}
        sub="Every patient-self-management tool has died on the same hill — clinicians don't read the patient-facing thing. So this isn't that. It's a credentialed work product written in the reader's own language, drillable when they want more." />

      <div className="comp-switch">
        <button className={'comp-sw' + (edition === 'clinical' ? ' on' : '')} onClick={() => setEdition('clinical')}><span className="cs-t">Clinical Edition</span><span className="cs-s">for licensed providers</span></button>
        <button className={'comp-sw' + (edition === 'practitioner' ? ' on' : '')} onClick={() => setEdition('practitioner')}><span className="cs-t">Practitioner Edition</span><span className="cs-s">for coaches &amp; CHWs</span></button>
      </div>

      {edition === 'clinical' ? <ClinicalEdition persona={persona} /> : <PractitionerEdition persona={persona} />}

      <div className="surface-foot">
        <button className="btn ghost" onClick={() => go('conversation')}>← Back to the start</button>
      </div>

      <FlowFooter current="care" go={go} />
    </div>
  );
}

function ClinicalEdition({ persona }) {
  const c = persona.companion.clinical;
  const leads = persona.drivers.slice(0, 3);
  return (
    <div className="ctc clinical">
      <div className="ctc-head">
        <div>
          <div className="ctc-kicker">Care Team Companion · Clinical Edition</div>
          <div className="ctc-patient">{persona.name}, {persona.age} · {persona.pronouns}</div>
          <div className="ctc-conditions">{persona.conditions.join(' · ')}</div>
        </div>
        <div className="ctc-for"><span>prepared for</span><b>{c.for}</b></div>
      </div>

      <div className="ctc-section">
        <div className="ctc-lab">Synthesis</div>
        <p className="ctc-synth">{hl(c.synthesis)}</p>
      </div>

      <div className="ctc-section">
        <div className="ctc-lab">Driver activation</div>
        <div className="ctc-drivers">
          {leads.map((d) => (
            <div className="ctc-drv" key={d.code}>
              <DriverChip code={d.code} label />
              <span className="ctc-drv-state" style={{ color: /lead|primary/i.test(d.state) ? window.DRIVERS[d.code].color : 'var(--bf-muted)' }}>{d.state}</span>
              <TierChip tier={d.tier} />
            </div>
          ))}
        </div>
      </div>

      <div className="ctc-cols">
        <div className="ctc-section">
          <div className="ctc-lab">Leverage points</div>
          <ul className="ctc-levers">
            {persona.plan.start.concat(persona.plan.build.slice(0, 1)).map((l, i) => (
              <li key={i}><b>{l.title}.</b> {l.why.map((c) => 'DRV-' + c).join(' · ')}</li>
            ))}
          </ul>
        </div>
        <div className="ctc-section">
          <div className="ctc-lab">Coordinate / flag</div>
          <ul className="ctc-flags">
            {persona.conflicts.slice(0, 2).map((cf, i) => <li key={i}>{cf.topic}: {cf.significance}</li>)}
          </ul>
        </div>
      </div>

      <div className="ctc-foot">
        <span>Reviewed by L. Maren, NBC-HWC · synthesis from {persona.matched.length} library entries</span>
        <span className="ctc-pill">{c.queued}</span>
      </div>
    </div>
  );
}

function PractitionerEdition({ persona }) {
  const p = persona.companion.practitioner;
  return (
    <div className="ctc practitioner">
      <div className="ctc-head">
        <div>
          <div className="ctc-kicker">Care Team Companion · Practitioner Edition</div>
          <div className="ctc-patient">{persona.name}, {persona.age} · {persona.pronouns}</div>
          <div className="ctc-conditions">{persona.conditions.join(' · ')}</div>
        </div>
        <div className="ctc-for"><span>prepared for</span><b>{p.for}</b></div>
      </div>

      <div className="ctc-section">
        <div className="ctc-lab">How to work with this person</div>
        <p className="ctc-synth">{p.synthesis}</p>
      </div>

      <div className="ctc-section">
        <div className="ctc-lab">The plan, drillable</div>
        <div className="prac-plan">
          {[['start', 'Start here'], ['build', 'Build toward'], ['radar', 'On the radar']].map(([k, l]) => (
            <div className="prac-tier" key={k}>
              <span className="prac-tier-lab">{l}</span>
              {persona.plan[k].map((item, i) => (
                <div className="prac-item" key={i}>
                  <div className="prac-item-h">{item.title}<span className="prac-lever">{window.LEVERS[item.lever] ? window.LEVERS[item.lever].name : ''}</span></div>
                  <div className="prac-why">{item.why.map((c) => <DriverChip key={c} code={c} />)}</div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>

      <div className="ctc-foot">
        <span>Drillable to the full library entry, the conflicts, and the tracking signals.</span>
        <span className="ctc-pill ghost">reviewed before delivery</span>
      </div>
    </div>
  );
}

// bold DRV-XXX mentions in a synthesis paragraph
function hl(text) {
  const parts = text.split(/(DRV-[A-Z]{2,3})/g);
  return parts.map((p, i) => /^DRV-[A-Z]{2,3}$/.test(p)
    ? <b key={i} className="drv-mention">{p}</b>
    : <React.Fragment key={i}>{p}</React.Fragment>);
}

window.CompanionSurface = CompanionSurface;