/* VideoConsult.jsx — active video-call simulation + post-consultation summary.
   Full-screen call (no tab bar). Doctor-notes card slides up after 5s.
   Ending the call routes to the summary, which flips prescription state on. */

const { CARE_TEAM } = window.MunaHighConfig;

// ── Active call ──────────────────────────────────────────────────────────
function VideoConsult({ onEnd }) {
  const [secs, setSecs] = React.useState(14);
  const [notes, setNotes] = React.useState(false);
  React.useEffect(() => {
    const iv = setInterval(() => setSecs(s => s + 1), 1000);
    const n = setTimeout(() => setNotes(true), 5000);
    return () => { clearInterval(iv); clearTimeout(n); };
  }, []);
  const mmss = `${String(Math.floor(secs / 60)).padStart(2, '0')}:${String(secs % 60).padStart(2, '0')}`;
  const doc = CARE_TEAM.physician;

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--clay-900)', overflow: 'hidden' }}>
      {/* Simulated video feed — clay-tinted, doctor avatar */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(160deg, var(--clay-500), var(--clay-900))', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
        <Avatar initials={doc.initials} size={104} bg="rgba(255,255,255,0.16)" fg="#fff"/>
        <div style={{ textAlign: 'center' }}>
          <div style={{ font: 'var(--type-h2)', color: '#fff' }}>{doc.name}</div>
          <div style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,0.78)', marginTop: 2 }}>{doc.detail}</div>
        </div>
      </div>

      {/* Self-view PIP */}
      <div style={{ position: 'absolute', top: 58, right: 16, width: 84, height: 116, borderRadius: 'var(--radius-m)', background: 'rgba(0,0,0,0.28)', border: '1px solid rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Avatar initials="F" size={40} bg="rgba(255,255,255,0.16)" fg="#fff"/>
      </div>

      {/* Duration pill */}
      <div style={{ position: 'absolute', top: 64, left: 16, display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(0,0,0,0.32)', padding: '6px 12px', borderRadius: 'var(--radius-pill)' }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--clay-300)' }}/>
        <span style={{ font: '600 13px/1 var(--font-sans)', color: '#fff', fontVariantNumeric: 'tabular-nums' }}>{mmss}</span>
      </div>

      {/* Doctor-notes card — slides up partway through */}
      <div style={{
        position: 'absolute', left: 16, right: 16, bottom: 170,
        transform: notes ? 'translateY(0)' : 'translateY(20px)', opacity: notes ? 1 : 0,
        transition: 'transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out)',
        pointerEvents: notes ? 'auto' : 'none',
      }}>
        <div style={{ background: 'rgba(250, 248, 245, 0.92)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)', borderRadius: 'var(--radius-m)', padding: 16, boxShadow: 'var(--shadow-l)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Icon name="file-text" size={16} color="var(--clay-700)"/>
            <div className="overline" style={{ color: 'var(--clay-700)' }}>Notes from your doctor</div>
          </div>
          <p style={{ font: 'var(--type-body)', color: 'var(--fg-1)', textWrap: 'pretty' }}>
            Prescribed: Metformin 500mg, twice daily. Sent to your pharmacy. We’ll check in at 2 weeks.
          </p>
        </div>
      </div>

      {/* Controls overlay — 24px backdrop blur per system spec */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, paddingBottom: 38, paddingTop: 22,
        background: 'rgba(250, 248, 245, 0.85)', backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
        borderRadius: 'var(--radius-l) var(--radius-l) 0 0',
      }}>
        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{doc.name}</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{doc.detail}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 26 }}>
          <CallBtn icon="mic" bg="#fff" fg="var(--fg-1)" border/>
          <CallBtn icon="phone-off" bg="var(--clay-500)" fg="#fff" size={68} onClick={onEnd}/>
          <CallBtn icon="video" bg="#fff" fg="var(--fg-1)" border/>
        </div>
      </div>
    </div>
  );
}

function CallBtn({ icon, bg, fg, size = 58, border, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: size, height: size, borderRadius: '50%', background: bg, color: fg, cursor: 'pointer',
      border: border ? '1px solid var(--border-subtle)' : '0', display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: 'var(--shadow-s)',
    }}>
      <Icon name={icon} size={size > 60 ? 28 : 24}/>
    </button>
  );
}

// ── Post-consultation summary ────────────────────────────────────────────
function ConsultSummary({ onTrackRx, onBackToCare }) {
  const doc = CARE_TEAM.physician;
  return (
    <Screen footer={
      <div style={{ padding: '12px var(--gutter-screen) 38px', background: 'linear-gradient(180deg, rgba(250,248,245,0) 0%, var(--bg) 26%)' }}>
        <Button full variant="primary" onClick={onBackToCare}>Back to care plan</Button>
      </div>
    }>
      <HNav title="Consultation"/>
      <div style={{ padding: '4px var(--gutter-screen) 0' }}>
        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 6 }}>Consultation complete.</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', marginBottom: 22, textWrap: 'pretty' }}>Here’s what happened and what’s next.</p>

        {/* Summary card */}
        <Card padding={18} style={{ marginBottom: 14, display: 'flex', alignItems: 'center', gap: 14 }}>
          <Avatar initials={doc.initials} size={44} bg={doc.bg}/>
          <div style={{ flex: 1 }}>
            <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{doc.name}</div>
            <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2 }}>Today · 2:30 PM · 30 minutes</div>
          </div>
        </Card>

        {/* What was discussed */}
        <Card padding={20} style={{ marginBottom: 14 }}>
          <SectionHeading>What was discussed</SectionHeading>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Type 2 diabetes diagnosis confirmed.',
              'Discussed daily management.',
              'Reviewed the connection to gum disease.',
              'Talked through your daughter’s wedding timeline.',
            ].map((t, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <CheckCircle size={24} tone="sage"/>
                <div style={{ flex: 1, font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>{t}</div>
              </div>
            ))}
          </div>
        </Card>

        {/* Prescription card — new active state */}
        <Card padding={20} style={{ marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ width: 42, height: 42, borderRadius: 'var(--radius-s)', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="pill" size={20}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Metformin 500mg prescribed.</div>
              <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2 }}>Sent to your pharmacy.</div>
              <div style={{ marginTop: 8 }}><StatPill bg="var(--amber-50)" fg="var(--amber-700)">Awaiting pickup</StatPill></div>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <Button full variant="secondary" rightIcon="arrow-right" onClick={onTrackRx}>Track prescription</Button>
          </div>
        </Card>

        {/* Next steps */}
        <Card padding={20} style={{ marginBottom: 4 }}>
          <SectionHeading>Your next steps</SectionHeading>
          <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>
            Tomorrow: dentist consultation with Dr. Folake. Within 7 days: book your in-person clinic visit.
          </p>
        </Card>

        <div style={{ height: 120 }}/>
      </div>
    </Screen>
  );
}

window.MunaVideoConsult = { VideoConsult, ConsultSummary };
