// olivia-screens.jsx
// Preview-only screens for the Olivia admin. These mirror the real app's
// ScreenTaskExpanded.tsx and ScreenPrayer.tsx so the preview pane shows
// exactly what the parent will see.

function fillName(s, name) { return (s || '').replace(/\{child\}/g, name); }

// ── Task expanded ─────────────────────────────────────────────
// Mirrors ScreenTaskExpanded.tsx
function ScreenTaskExpanded({ childName = 'Olivia', task, onClose, onOpenPrayer, onMarkDone }) {
  const t = task || {};
  const hasPrayer = Array.isArray(t.prayer) && t.prayer.length > 0;

  return (
    <div style={{
      width: '100%', height: '100%',
      background: OLIVIA.cream, color: OLIVIA.ink, fontFamily: OLIVIA.fontBody,
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ height: 54 }}/>

      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 20px 8px',
      }}>
        <button onClick={onClose} style={{
          appearance: 'none', border: 'none', background: 'transparent',
          cursor: 'pointer', padding: 4,
        }}>
          <Icon name="arrow-left" size={22} color={OLIVIA.inkSoft}/>
        </button>
        <div style={{
          fontFamily: OLIVIA.fontBody, fontSize: 12, fontWeight: 600,
          color: OLIVIA.inkMute, letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>Day {t.day}</div>
        <div style={{ width: 30 }}/>
      </div>

      {/* Scrollable body */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 24px 0' }}>
        <Pill>{t.kind}</Pill>
        <p style={{
          fontFamily: OLIVIA.fontDisplay, fontSize: 28, lineHeight: 1.25,
          fontWeight: 500, color: OLIVIA.ink,
          margin: '14px 0 0', letterSpacing: '-0.01em',
        }}>{fillName(t.task, childName)}</p>

        {/* Why this matters */}
        <div style={{
          marginTop: 24,
          background: OLIVIA.paper, borderRadius: 20,
          padding: '18px 20px',
          border: `1px solid ${OLIVIA.hair}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Icon name="sparkle" size={16} color={OLIVIA.sage}/>
            <span style={{
              fontFamily: OLIVIA.fontBody, fontSize: 11, fontWeight: 700,
              color: OLIVIA.sageDeep, letterSpacing: '0.08em', textTransform: 'uppercase',
            }}>Why this matters</span>
          </div>
          <p style={{
            fontFamily: OLIVIA.fontDisplay, fontStyle: 'italic',
            fontSize: 16, lineHeight: 1.55, color: OLIVIA.ink,
            margin: 0,
          }}>{fillName(t.tip, childName)}</p>
        </div>

        {/* Prayer CTA */}
        {hasPrayer && (
          <button onClick={onOpenPrayer} style={{
            appearance: 'none', cursor: 'pointer', width: '100%', textAlign: 'left',
            background: OLIVIA.terraWash, borderRadius: 20, marginTop: 16,
            border: `1px solid ${OLIVIA.terraTint}`,
            display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px',
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 14,
              background: OLIVIA.terra,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <Icon name="play" size={18} color={OLIVIA.paper}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: OLIVIA.fontBody, fontSize: 14, fontWeight: 700,
                color: OLIVIA.terraDeep,
              }}>Open the prayer</div>
              <div style={{
                fontFamily: OLIVIA.fontBody, fontSize: 13,
                color: OLIVIA.terraDeep, opacity: 0.8, marginTop: 1,
              }}>Read aloud together</div>
            </div>
            <Icon name="chevron-right" size={20} color={OLIVIA.terraDeep}/>
          </button>
        )}
      </div>

      {/* Footer */}
      <div style={{ padding: '12px 24px 36px', background: OLIVIA.cream }}>
        <PrimaryButton onClick={onMarkDone}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <Icon name="check" size={18} color={OLIVIA.paper} strokeWidth={2.4}/>
            We did it ✓
          </span>
        </PrimaryButton>
      </div>
    </div>
  );
}

// ── Prayer screen ─────────────────────────────────────────────
// Mirrors ScreenPrayer.tsx
function ScreenPrayer({ childName = 'Olivia', task, onClose, onDone }) {
  const t = task || {};
  const lines = Array.isArray(t.prayer) ? t.prayer : [];

  return (
    <div style={{
      width: '100%', height: '100%',
      background: OLIVIA.terraWash, color: OLIVIA.ink, fontFamily: OLIVIA.fontBody,
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ height: 54 }}/>

      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 20px 8px',
      }}>
        <button onClick={onClose} style={{
          appearance: 'none', border: 'none', cursor: 'pointer',
          width: 36, height: 36, borderRadius: 12,
          background: OLIVIA.paperDeep,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="close" size={18} color={OLIVIA.terraDeep}/>
        </button>
        <div style={{
          fontFamily: OLIVIA.fontBody, fontSize: 12, fontWeight: 700,
          color: OLIVIA.terraDeep, letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>Prayer · Day {t.day}</div>
        <div style={{ width: 36 }}/>
      </div>

      {/* Body */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '20px 28px 0', overflowY: 'auto',
      }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
            <Sparkle size={20} color={OLIVIA.terra}/>
            <div style={{
              fontFamily: OLIVIA.fontBody, fontSize: 11, fontWeight: 700,
              color: OLIVIA.terraDeep, letterSpacing: '0.12em', textTransform: 'uppercase',
            }}>Read together, slowly</div>
          </div>
        </div>

        {/* Prayer card — white card matching the real app */}
        {lines.length === 0 ? (
          <div style={{
            textAlign: 'center', padding: 24,
            fontFamily: OLIVIA.fontDisplay, fontStyle: 'italic',
            fontSize: 18, color: OLIVIA.inkSoft,
          }}>No prayer for this card.</div>
        ) : (
          <div style={{
            background: OLIVIA.paper, borderRadius: 24, padding: 28,
            border: `1px solid ${OLIVIA.terraTint}`,
            display: 'flex', flexDirection: 'column', gap: 18,
          }}>
            {lines.map((line, i) => {
              const isFirst = i === 0;
              const isLast = i === lines.length - 1;
              return (
                <p key={i} style={{
                  fontFamily: OLIVIA.fontDisplay,
                  fontStyle: (isFirst || isLast) ? 'normal' : 'italic',
                  fontWeight: (isFirst || isLast) ? 600 : 400,
                  fontSize: (isFirst || isLast) ? 22 : 20,
                  lineHeight: 1.35, letterSpacing: '-0.01em',
                  color: isLast ? OLIVIA.terraDeep : OLIVIA.ink,
                  margin: 0, textAlign: 'center',
                }}>{fillName(line, childName)}</p>
              );
            })}
          </div>
        )}

        <p style={{
          fontFamily: OLIVIA.fontDisplay, fontStyle: 'italic',
          fontSize: 14, lineHeight: 1.5, color: OLIVIA.inkSoft,
          textAlign: 'center', margin: '24px 0 0',
        }}>You don't have to read it perfectly. Just read it.</p>
      </div>

      {/* Footer */}
      <div style={{ padding: '12px 24px 36px' }}>
        <PrimaryButton onClick={onDone}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <Icon name="check" size={18} color={OLIVIA.paper} strokeWidth={2.4}/>
            We prayed it ✓
          </span>
        </PrimaryButton>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenTaskExpanded, ScreenPrayer });