/* global React, RIcons */
// Paywall sheet — Night Watch upsell with two tiers.
// Opens from: NightWatchSuggestCard, DirectConsultCard.

const { useState: useStateP } = React;

const FULL_FEATURES = [
  'Unlimited Night Watch sessions',
  'Unlimited Talk to a doctor',
  'Morning round summaries, every night',
  'Care history & pattern tracking',
];
const TONIGHT_FEATURES = [
  'One Night Watch session tonight',
  'Pediatric provider on standby',
  "Morning summary when you wake",
];

function PaywallSheet({ open, onClose, onSelectTonight, onSelectFull }) {
  const [selected, setSelected] = useStateP('full');

  return (
    <>
      <div className={`scrim ${open ? 'open' : ''}`} onClick={onClose} />
      <div className={`sheet ${open ? 'open' : ''}`} style={{ maxHeight: '92%', paddingBottom: 32 }}>
        <div className="sheet-handle" />

        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(157,227,205,0.12)', border: '1px solid rgba(157,227,205,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)', flexShrink: 0 }}>
              <RIcons.Watch size={20} />
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 18, color: '#fff', lineHeight: '22px' }}>Care+</div>
              <div style={{ fontSize: 12, color: 'var(--foreground-muted)', marginTop: 1 }}>Night Watch + Talk to a doctor</div>
            </div>
          </div>
          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--foreground-muted)', padding: 4, marginTop: 2 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>

        <p style={{ fontSize: 13.5, color: 'var(--foreground-muted)', lineHeight: '19px', margin: '8px 0 20px' }}>
          Keep Nora protected overnight and get a doctor when you need one — pay as you go or cover every night.
        </p>

        {/* Full Coverage tier */}
        <div
          onClick={() => setSelected('full')}
          style={{
            borderRadius: 18, padding: '16px 18px',
            background: selected === 'full' ? 'linear-gradient(155deg, rgba(157,227,205,0.12) 0%, rgba(17,19,63,0.8) 70%)' : 'var(--surface)',
            border: `1.5px solid ${selected === 'full' ? 'rgba(157,227,205,0.45)' : 'rgba(212,212,249,0.08)'}`,
            cursor: 'pointer', transition: '180ms ease-out',
            marginBottom: 10, position: 'relative',
            boxShadow: selected === 'full' ? '0 8px 24px rgba(157,227,205,0.12)' : 'none',
          }}>
          {/* Recommended badge */}
          <div style={{ position: 'absolute', top: -11, left: 16, background: 'var(--primary)', color: 'var(--on-primary)', fontSize: 10, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', padding: '3px 10px', borderRadius: 999 }}>
            Recommended
          </div>

          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#fff' }}>Full Coverage</div>
              <div style={{ fontSize: 12, color: 'var(--foreground-muted)', marginTop: 2 }}>Cancel anytime</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 22, color: '#fff', lineHeight: '26px' }}>$12.99</div>
              <div style={{ fontSize: 11, color: 'var(--foreground-muted)' }}>per month</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            {FULL_FEATURES.map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--foreground)' }}>
                <span style={{ width: 16, height: 16, borderRadius: 999, background: 'rgba(157,227,205,0.16)', color: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </span>
                {f}
              </div>
            ))}
          </div>
          <p style={{ fontSize: 12, color: 'var(--foreground-muted)', lineHeight: '17px', margin: '12px 0 0', fontStyle: 'italic' }}>
            One rough week can cost more than the whole month.
          </p>
        </div>

        {/* Tonight tier */}
        <div
          onClick={() => setSelected('tonight')}
          style={{
            borderRadius: 18, padding: '16px 18px',
            background: selected === 'tonight' ? 'linear-gradient(155deg, rgba(232,212,165,0.10) 0%, rgba(17,19,63,0.8) 70%)' : 'var(--surface)',
            border: `1.5px solid ${selected === 'tonight' ? 'rgba(232,212,165,0.40)' : 'rgba(212,212,249,0.08)'}`,
            cursor: 'pointer', transition: '180ms ease-out', marginBottom: 20,
          }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#fff' }}>Tonight only</div>
              <div style={{ fontSize: 12, color: 'var(--foreground-muted)', marginTop: 2 }}>Try tonight, upgrade anytime</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 22, color: selected === 'tonight' ? 'var(--seal)' : '#fff', lineHeight: '26px' }}>$4.99</div>
              <div style={{ fontSize: 11, color: 'var(--foreground-muted)' }}>one night</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            {TONIGHT_FEATURES.map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--foreground)' }}>
                <span style={{ width: 16, height: 16, borderRadius: 999, background: 'rgba(232,212,165,0.12)', color: 'var(--seal)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </span>
                {f}
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <button
          onClick={() => selected === 'full' ? onSelectFull() : onSelectTonight()}
          style={{
            width: '100%', height: 54, borderRadius: 12, border: 'none',
            cursor: 'pointer', fontFamily: 'inherit', fontWeight: 700, fontSize: 16,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            background: selected === 'full' ? 'var(--primary)' : 'linear-gradient(135deg, #e8d4a5 0%, #c9a875 100%)',
            color: selected === 'full' ? 'var(--on-primary)' : '#2a1f0a',
            boxShadow: selected === 'full'
              ? '0 18px 32px -10px rgba(157,227,205,0.45), inset 0 1px 0 rgba(255,255,255,0.3)'
              : '0 18px 32px -10px rgba(232,212,165,0.35), inset 0 1px 0 rgba(255,255,255,0.4)',
            transition: '180ms ease-out',
          }}>
          {selected === 'full' ? 'Start Full Coverage · $12.99/mo' : 'Cover tonight · $4.99'}
          <RIcons.ChevronRight size={18} />
        </button>

        <div style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--foreground-muted)', marginTop: 12, lineHeight: '16px' }}>
          {selected === 'full' ? 'Billed monthly. Cancel anytime from your account.' : 'One-time charge. No subscription started.'}
        </div>
      </div>
    </>
  );
}

const RPaywall = { PaywallSheet };