/* global React, RIcons, DOCTORS, TODAY_ROUND, JOURNAL_SUMMARY */
// The signed Round detail — the artifact. This is the "oh" moment.

const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;

// Sparkline SVG component — small inline vitals chart.
function Sparkline({ data, color = 'accent', height = 56, ymin, ymax }) {
  if (!data || data.length === 0) return null;
  const w = 320;
  const h = height;
  const padX = 4;
  const padY = 8;
  const minV = ymin !== undefined ? ymin : Math.min(...data);
  const maxV = ymax !== undefined ? ymax : Math.max(...data);
  const span = Math.max(1, maxV - minV);
  const step = (w - padX * 2) / (data.length - 1);
  const pts = data.map((v, i) => {
    const x = padX + step * i;
    const y = padY + (h - padY * 2) * (1 - (v - minV) / span);
    return [x, y];
  });
  const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${p[1]}`).join(' ');
  const area = line + ` L${pts[pts.length-1][0]},${h-padY} L${pts[0][0]},${h-padY} Z`;
  const lineClass = color === 'mint' ? 'pulse' : 'line';
  const areaClass = color === 'mint' ? 'pulse-area' : 'area';
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <line x1={padX} y1={h-padY} x2={w-padX} y2={h-padY} className="grid" />
      <path d={area}  className={areaClass} />
      <path d={line}  className={lineClass} />
    </svg>
  );
}

// The signed Round artifact — cream "certificate" card.
function SealCard({ round, doc, format = 'standard' }) {
  return (
    <div className="seal-card">
      <div className="head">
        <span>Round Report</span>
        <span className="by">Signed by Owlet</span>
      </div>
      <h3>{round.cadence} · {round.date}</h3>
      <div className="for">For {round.forBaby} · {round.span}</div>

      <p className="narrative">{round.narrative}</p>

      <div className="findings">
        <div className="h">Findings</div>
        <ul>
          {round.findings.map((f, i) => <li key={i}>{f}</li>)}
        </ul>
      </div>

      {/* Baseline — the longitudinal data moat made visible. */}
      {round.baseline && (
        <div className="baseline">
          <div className="b-l">Against Nora’s baseline</div>
          <div className="b-t">{round.baseline}</div>
        </div>
      )}

      {/* Day context — yesterday’s journal feeds into this round */}
      <div className="day-ctx">
        <div className="dc-l">Day context · from journal</div>
        <div className="dc-chips">
          <span className="dc-chip">🍼 {JOURNAL_SUMMARY.feeds} feeds</span>
          <span className="dc-chip">😴 {JOURNAL_SUMMARY.naps} naps</span>
          <span className="dc-chip">🥄 {JOURNAL_SUMMARY.solids}× solids</span>
          <span className="dc-chip">😢 {JOURNAL_SUMMARY.cries}× fussy</span>
          {JOURNAL_SUMMARY.tempFlag && (
            <span className="dc-chip" style={{ background: 'rgba(247,200,123,0.22)' }}>🌡️ Temp 100.4°F</span>
          )}
          <span className="dc-chip">💊 Tylenol 6:30 PM</span>
          <span className="dc-chip">🛁 Bath calm</span>
        </div>
      </div>

      <div className="sig">
        <div className="ava" style={{ backgroundImage: `url('${doc.ava}')` }} />
        <div className="who">
          <div className="name">{doc.name}</div>
          <div className="role">{doc.role}</div>
        </div>
        <div className="stamp">
          <div className="when">Reviewed</div>
          <div className="time">{round.signedAtFull}</div>
        </div>
      </div>

      {/* Verifiable document ID — quiet notary detail, no friction. */}
      {round.reportId && (
        <div className="report-id">Report #{round.reportId}</div>
      )}

      {/* Lineage — two actors only. AI writes, MD signs. The parent IS reading
          this, so "delivered" is implicit. */}
      {format !== 'standard' && (
        <div style={{ fontSize: 10.5, color: 'var(--foreground-muted)', marginBottom: 4, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          {format === 'brief' ? 'Brief format' : 'Detailed format'}
        </div>
      )}
      <div className="lineage">
        Drafted by AI · Signed by {doc.short || doc.name}
      </div>
    </div>
  );
}

function RoundActions({ expanded, onExpand }) {
  return (
    <div className="round-actions">
      <button type="button" className="ract" onClick={onExpand}>
        <RIcons.Stack size={13} />
        {expanded ? 'Collapse report' : 'View full report'}
      </button>
    </div>
  );
}

// The structured doctor output, rendered as readable markdown.
// Same content as the seal, just denser. Signals "this is structured data,
// not chat slop" to anyone technical in the room.
function FullReportBlock({ round }) {
  // Split the markdown string into sections by leading `## ` headers.
  const raw = round.markdown || '';
  const chunks = raw.split(/\n## /);
  const sections = chunks.map((c, i) => {
    const text = i === 0 ? c.replace(/^## /, '') : c;
    const lines = text.split('\n');
    return { title: lines[0], body: lines.slice(1).join('\n').trim() };
  });
  return (
    <div className="fullreport">
      <div className="fr-head">
        <RIcons.Stack size={11} />
        FULL REPORT · STRUCTURED
      </div>
      {sections.map((s, i) => (
        <div key={i} className="fr-section">
          <div className="fr-title"><span className="fr-hash">##</span> {s.title}</div>
          <div className="fr-body">{s.body}</div>
        </div>
      ))}
    </div>
  );
}

const CARE_AGENT_LABEL = 'Care Agent';

// Chat scoped to the signed round — opens with the report attached.
function DiscussView({ round, doc, onBack, agentPersonality = 'warm' }) {
  const PERSONALITY_LABELS = { calm: 'Calm', warm: 'Warm', direct: 'Direct', thorough: 'Thorough' };
  const agentLabel = `Care Agent · ${PERSONALITY_LABELS[agentPersonality] || 'Warm'}`;
  const [revealed, setRevealed] = useStateR(0);
  const [typing, setTyping] = useStateR(false);
  const threadRef = useRefR(null);

  useEffectR(() => {
    if (revealed >= round.chatExchange.length) return;
    const next = round.chatExchange[revealed];
    if (next.from === 'agent') {
      setTyping(true);
      const t = setTimeout(() => {
        setTyping(false);
        setRevealed((r) => r + 1);
      }, 1400);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setRevealed((r) => r + 1), 700);
    return () => clearTimeout(t);
  }, [revealed, round.chatExchange.length]);

  useEffectR(() => {
    const el = threadRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [revealed, typing]);

  return (
    <div className="discuss-page" data-screen-label="Chat about round">
      <div className="doc-top">
        <button type="button" className="doc-iconbtn" onClick={onBack}><RIcons.ChevronLeft /></button>
        <div className="doc-pill" style={{ color: 'var(--seal)', background: 'rgba(232,212,165,0.10)', borderColor: 'rgba(232,212,165,0.28)' }}>
          This round · {round.date}
        </div>
        <span className="doc-top-spacer" aria-hidden="true" />
      </div>

      <div className="discuss-thread" ref={threadRef}>
        <div className="dmsg parent dmsg-in">
          <div className="dmsg-bubble">
            <div className="dmsg-attachment">
              <RIcons.Seal size={20} />
              <div className="da-info">
                <div className="da-title">{round.cadence} · {round.date}</div>
                <div className="da-sub">Signed by {doc.short} · #{round.reportId}</div>
              </div>
            </div>
            <div className="da-text">I would like to talk about this round</div>
          </div>
        </div>

        {round.chatExchange.slice(0, revealed).map((m, i) => (
          <div key={i} className={`dmsg ${m.from} dmsg-in`}>
            {m.from === 'agent' && (
              <div className="dmsg-by dmsg-by--care">
                <RIcons.Sparkles size={10} /> {agentLabel}
              </div>
            )}
            <div className="dmsg-bubble">{m.text}</div>
          </div>
        ))}

        {typing && (
          <div className="dmsg agent dmsg-in">
            <div className="dmsg-by dmsg-by--care"><RIcons.Sparkles size={10} /> {agentLabel}</div>
            <div className="dmsg-bubble typing-bubble">
              <span className="tdot" /><span className="tdot" /><span className="tdot" />
            </div>
          </div>
        )}
      </div>

      <div className="discuss-input">
        <div className="di-field">Ask about this round…</div>
        <button type="button" className="di-send" aria-label="Send"><RIcons.ChevronRight /></button>
      </div>
    </div>
  );
}

// Vitals chart card — sits under the certificate. Shows the data the doctor reviewed.
function VitalsCard({ round }) {
  const v = round.vitals;
  return (
    <div className="vitals-card">
      <div className="vh">
        <div className="title">What the round reviewed</div>
        <div className="span">{round.span}</div>
      </div>
      <div className="v-grid">
        <div className="v-stat">
          <div className="l">Heart rate</div>
          <div className="val">{v.hr.avg}<span className="u">bpm avg</span></div>
          <div className="range">{v.hr.range}</div>
        </div>
        <div className="v-stat">
          <div className="l">SpO₂</div>
          <div className="val">{v.o2.avg}<span className="u">% avg</span></div>
          <div className="range">{v.o2.range}</div>
        </div>
        <div className="v-stat">
          <div className="l">Stirrings</div>
          <div className="val">{v.stirs.avg}<span className="u">total</span></div>
          <div className="range">{v.stirs.range}</div>
        </div>
        <div className="v-stat">
          <div className="l">Sleep</div>
          <div className="val">{v.sleep.avg}</div>
          <div className="range">{v.sleep.range}</div>
        </div>
      </div>

      <div style={{
        fontSize: 10.5, fontWeight: 700, letterSpacing: '0.10em',
        textTransform: 'uppercase', color: 'var(--foreground-muted)',
        marginBottom: 6,
      }}>Heart rate · overnight</div>
      <Sparkline data={v.hr.trend} color="mint" ymin={80} ymax={130} />

      <div style={{
        fontSize: 10.5, fontWeight: 700, letterSpacing: '0.10em',
        textTransform: 'uppercase', color: 'var(--foreground-muted)',
        marginTop: 10, marginBottom: 6,
      }}>SpO₂ · overnight</div>
      <Sparkline data={v.o2.trend} color="accent" ymin={92} ymax={100} />
    </div>
  );
}

// "Anything to add for tomorrow?" — surfaces journal-sourced hints automatically.
function BundleAsk({ onTap }) {
  return (
    <div className="bundle-ask" onClick={onTap}>
      <div className="lbl"><RIcons.Sparkles size={12} /> Add to tomorrow’s round</div>
      <h4>3 journal items flagged for tomorrow.</h4>
      <p>Temp, crying spell, and distracted solids — ready to include in tomorrow’s round.</p>
      <div className="chev"><RIcons.ChevronRight /></div>
    </div>
  );
}

// Top bar with back button + status pill
function RoundTop({ onBack }) {
  return (
    <div className="doc-top">
      <button className="doc-iconbtn" onClick={onBack}><RIcons.ChevronLeft /></button>
      <div className="doc-pill">Signed · {TODAY_ROUND.signedAt}</div>
      <span className="doc-top-spacer" aria-hidden="true" />
    </div>
  );
}

function RoundScreen({ onBack, onBundle, format = 'standard', agentPersonality = 'warm' }) {
  const r = TODAY_ROUND;
  const doc = DOCTORS[r.by];
  const [expanded, setExpanded] = useStateR(format === 'detailed');

  const [revealed, setRevealed] = useStateR(false);
  useEffectR(() => {
    const t = setTimeout(() => setRevealed(true), 1200);
    return () => clearTimeout(t);
  }, []);

  return (
    <div className="doc-page doc-page--chat-pad" data-screen-label="Round detail">
      <RoundTop onBack={onBack} />
      <SealCard round={r} doc={doc} format={format} />
      {revealed && (
        <div className="doc-reveal">
          {format !== 'brief' && <VitalsCard round={r} />}
          {format !== 'brief' && (
            <RoundActions
              expanded={expanded}
              onExpand={() => setExpanded((v) => !v)}
            />
          )}
          {expanded && <FullReportBlock round={r} />}
          {format !== 'brief' && <BundleAsk onTap={onBundle} />}
        </div>
      )}
    </div>
  );
}

function RoundChatScreen({ onBack, agentPersonality = 'warm' }) {
  const r = TODAY_ROUND;
  const doc = DOCTORS[r.by];
  return <DiscussView round={r} doc={doc} onBack={onBack} agentPersonality={agentPersonality} />;
}

const RRound = { RoundScreen, RoundChatScreen, DiscussView };