// premium.jsx — Eme Premium subscription page (exported to window)
// Slides up over the app with a blurred backdrop and staggered fade-in content.
// Subscribing flips the persisted premium flag so locked features unlock live.

function PerkRow({ label, accent, th, i }) {
  return (
    <div className="prem-perk">
      <span style={{
        width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: `linear-gradient(140deg, ${accent[0]}33, ${accent[1]}1f)`,
        border: '1px solid ' + accent[0] + '55', color: accent[0],
      }}><IconCheck size={15} sw={2} /></span>
      <span style={{ fontSize: 14.5, color: th.text, fontWeight: 300, lineHeight: 1.35 }}>{label}</span>
    </div>
  );
}

function PremiumPage({ th, accent, level, onClose, onSubscribe, onRestore, isPremium }) {
  const { t, dir } = useI18n();
  const lv = level || LEVELS[1];
  const [plan, setPlan] = React.useState('year');   // annual is the best-value default
  const price = plan === 'year' ? PREMIUM_PRICE_YEAR : PREMIUM_PRICE;

  return (
    <div className="prem-overlay" dir={dir}>
      <div className="prem-backdrop" onClick={onClose} />
      <div className="prem-sheet" style={{ background: th.sheet, borderColor: th.border2 }}>
        {/* grab handle + close */}
        <div style={{ position: 'relative', flexShrink: 0, padding: '12px 16px 0' }}>
          <div style={{ width: 38, height: 4, borderRadius: 99, background: th.ghost, margin: '0 auto' }} />
          <button onClick={onClose} aria-label="Close" style={{
            position: 'absolute', top: 12, insetInlineEnd: 14, width: 34, height: 34, borderRadius: '50%',
            background: th.surface2, border: '1px solid ' + th.border, color: th.text, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><IconClose size={16} /></button>
        </div>

        <div className="scroll-area" style={{ flex: 1, padding: '6px 24px 28px' }}>
          {/* hero */}
          <div className="prem-fade" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', paddingTop: 14 }}>
            <div className="prem-crest">
              <LevelRing size={96} colors={[lv.left, lv.right]} breathe={false}>
                <span style={{ color: lv.glow, display: 'flex', filter: `drop-shadow(0 0 8px ${lv.glow}cc)` }}><IconCrown size={30} /></span>
              </LevelRing>
            </div>
            <div style={{ fontSize: 11, letterSpacing: 4, color: accent[0], fontWeight: 600, marginTop: 22 }}>{t('premium_eyebrow')}</div>
            <div style={{ fontSize: 30, fontWeight: 200, color: th.text, marginTop: 10, lineHeight: 1.12, letterSpacing: .2 }}>{t('premium_title')}</div>
            <div style={{ fontSize: 14.5, color: th.dim, fontWeight: 300, marginTop: 10, maxWidth: 300, lineHeight: 1.5 }}>{t('premium_sub')}</div>
          </div>

          {/* plans — both bubbles use the violet gradient; annual leads as best value */}
          <div className="prem-fade" style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 22 }}>
            {/* Annual — the recommended, most prominent option */}
            <button onClick={() => setPlan('year')} style={{
              position: 'relative', overflow: 'hidden', textAlign: 'start', cursor: 'pointer', fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', gap: 13, padding: '16px 16px', borderRadius: 18,
              border: '1px solid ' + (plan === 'year' ? accent[0] + 'e6' : accent[0] + '66'),
              background: `linear-gradient(135deg, ${accent[0]}33, ${accent[1]}1a)`,
              boxShadow: plan === 'year' ? `0 0 0 1.5px ${accent[0]}88, 0 14px 36px ${accent[0]}3a` : `0 6px 18px ${accent[0]}1f`,
              transition: 'box-shadow .25s ease, border-color .25s ease',
            }}>
              <span aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '46%', background: 'linear-gradient(180deg, rgba(255,255,255,.10), transparent)', pointerEvents: 'none' }} />
              <span style={{ width: 40, height: 40, borderRadius: 12, flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: `linear-gradient(140deg, ${accent[0]}, ${accent[1]})`, color: '#fff', boxShadow: `0 5px 16px ${accent[0]}77` }}><IconSparkle size={19} /></span>
              <span style={{ flex: 1, minWidth: 0, position: 'relative' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <span style={{ fontSize: 16, fontWeight: 600, color: th.text }}>{t('plan_annual')}</span>
                  <span style={{ fontSize: 9, letterSpacing: 1, fontWeight: 700, color: '#fff', padding: '3px 8px', borderRadius: 99, background: `linear-gradient(135deg,${accent[0]},${accent[1]})`, boxShadow: `0 2px 8px ${accent[0]}66` }}>{t('best_value')}</span>
                </span>
                <span style={{ display: 'block', fontSize: 12.5, color: accent[0], marginTop: 4, fontWeight: 500 }}>{t('months_free', { n: 4 })}</span>
              </span>
              <span style={{ textAlign: 'end', flexShrink: 0, position: 'relative' }}>
                <span style={{ display: 'block', fontSize: 23, fontWeight: 400, color: th.text, lineHeight: 1 }}>{PREMIUM_PRICE_YEAR}</span>
                <span style={{ display: 'block', fontSize: 12, color: th.dim, marginTop: 2 }}>{t('per_year')}</span>
              </span>
            </button>
            {/* Monthly — secondary */}
            <button onClick={() => setPlan('month')} style={{
              position: 'relative', overflow: 'hidden', textAlign: 'start', cursor: 'pointer', fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', gap: 13, padding: '15px 16px', borderRadius: 18,
              border: '1px solid ' + (plan === 'month' ? accent[0] + 'cc' : accent[0] + '40'),
              background: `linear-gradient(135deg, ${accent[0]}1e, ${accent[1]}0f)`,
              boxShadow: plan === 'month' ? `0 0 0 1.5px ${accent[0]}66, 0 10px 26px ${accent[0]}22` : 'none',
              transition: 'box-shadow .25s ease, border-color .25s ease',
            }}>
              <span aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '46%', background: 'linear-gradient(180deg, rgba(255,255,255,.06), transparent)', pointerEvents: 'none' }} />
              <span style={{ width: 38, height: 38, borderRadius: 12, flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: `linear-gradient(140deg, ${accent[0]}55, ${accent[1]}33)`, color: accent[0], filter: `drop-shadow(0 0 6px ${accent[0]}44)` }}><IconSparkle size={17} /></span>
              <span style={{ flex: 1, minWidth: 0, position: 'relative', fontSize: 16, fontWeight: 500, color: th.text }}>{t('plan_monthly')}</span>
              <span style={{ textAlign: 'end', flexShrink: 0, position: 'relative' }}>
                <span style={{ display: 'block', fontSize: 21, fontWeight: 300, color: th.text, lineHeight: 1 }}>{PREMIUM_PRICE}</span>
                <span style={{ display: 'block', fontSize: 12, color: th.faint, marginTop: 2 }}>{t('per_month')}</span>
              </span>
            </button>
          </div>

          {/* includes */}
          <div className="prem-fade" style={{ fontSize: 11, letterSpacing: 2.4, color: th.faint, fontWeight: 500, textTransform: 'uppercase', margin: '26px 2px 14px' }}>{t('premium_includes')}</div>
          <div className="prem-fade" style={{
            borderRadius: 22, padding: '6px 16px', background: th.surface, border: '1px solid ' + th.border,
            display: 'flex', flexDirection: 'column',
          }}>
            {PREMIUM_PERKS.map((k, i) => (
              <div key={k} style={{ borderBottom: i < PREMIUM_PERKS.length - 1 ? '1px solid ' + th.border : 'none', padding: '12px 0' }}>
                <PerkRow label={t(k)} accent={accent} th={th} i={i} />
              </div>
            ))}
          </div>

          <div className="prem-fade" style={{ textAlign: 'center', fontSize: 12, color: th.faint, fontWeight: 300, margin: '20px 0 4px', lineHeight: 1.5 }}>
            {plan === 'year' ? t('premium_terms_year', { price }) : t('premium_terms', { price })}
          </div>
        </div>

        {/* sticky CTA */}
        <div style={{ flexShrink: 0, padding: '12px 24px 30px', background: `linear-gradient(180deg, transparent, ${th.name === 'dark' ? '#0c0b14' : '#fff'} 38%)` }}>
          {isPremium ? (
            <div style={{
              width: '100%', padding: '16px', borderRadius: 18, textAlign: 'center',
              border: '1px solid ' + accent[0] + '66', background: `linear-gradient(135deg, ${accent[0]}22, ${accent[1]}11)`,
              color: th.text, fontSize: 15, fontWeight: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            }}>
              <span style={{ color: accent[0], display: 'flex' }}><IconCheck size={20} /></span>{t('premium_active')}
            </div>
          ) : (
            <button className="prem-cta" onClick={() => onSubscribe(plan)} style={{
              width: '100%', padding: '17px', borderRadius: 18, border: 'none', cursor: 'pointer',
              background: `linear-gradient(135deg, ${accent[0]}, ${accent[1]})`, color: '#fff',
              fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
              boxShadow: `0 10px 30px ${accent[0]}55, 0 0 0 1px ${accent[0]}33`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            }}>
              <IconSparkle size={19} />{plan === 'year' ? t('premium_continue_year', { price }) : t('premium_continue', { price })}
            </button>
          )}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 22, marginTop: 14 }}>
            <button onClick={onClose} style={{ background: 'none', border: 'none', color: th.faint, fontSize: 13, fontFamily: 'inherit', cursor: 'pointer' }}>{t('premium_maybe')}</button>
            <button onClick={() => { if (onRestore) onRestore(); else onClose(); }} style={{ background: 'none', border: 'none', color: th.faint, fontSize: 13, fontFamily: 'inherit', cursor: 'pointer' }}>{t('premium_restore')}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PremiumPage = PremiumPage;