/* ===========================================================
   راویار — اشتراک، کیف پول، درگاه پرداخت، آفرینش با AI
   =========================================================== */
function PlanCard({ plan, current, onChoose }) {
  const isCur = current === plan.id;
  return (
    <div className={'panel ' + (plan.popular ? 'gold-frame' : '')} style={{ padding: 26, position: 'relative',
      border: plan.popular ? '1px solid transparent' : '1px solid var(--panel-line)',
      transform: plan.popular ? 'scale(1.03)' : 'none' }}>
      {plan.popular && <span className="badge-ai" style={{ position: 'absolute', top: -12, insetInlineStart: 24 }}><Icon name="sparkle" size={11} /> {OMID.TX(plan, 'tag')}</span>}
      <div className="row between">
        <div><b style={{ fontSize: 20 }}>{OMID.TX(plan)}</b><div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{!plan.popular && OMID.TX(plan, 'tag')}</div></div>
        <span style={{ width: 40, height: 40, borderRadius: 12, display: 'grid', placeItems: 'center', background: `${plan.tint}22`, color: plan.tint }}><Icon name={plan.id === 'vip' ? 'sparkle' : plan.id === 'plus' ? 'bell' : 'play'} size={20} /></span>
      </div>
      <div className="row" style={{ alignItems: 'baseline', gap: 8, margin: '18px 0' }}>
        {plan.coins > 0 ? <><CoinGlyph size={26} /><b className="fa-num" style={{ fontSize: 34 }}>{OMID.num(plan.coins)}</b><span className="muted">{L('سکه', 'coins')} / {OMID.TX(plan, 'period')}</span></>
          : <b style={{ fontSize: 30 }}>{L('رایگان', 'Free')}</b>}
      </div>
      <div className="col gap-2" style={{ marginBottom: 22 }}>
        {(OMID.getLang() === 'en' ? plan.featuresEn : plan.features).map((f, i) => (
          <div key={i} className="row gap-2" style={{ fontSize: 14, color: 'var(--cream-2)' }}>
            <span style={{ color: plan.tint }}><Icon name="check" size={15} /></span>{f}
          </div>
        ))}
      </div>
      <button onClick={() => onChoose(plan)} className={'btn ' + (isCur ? 'btn-ghost' : plan.popular ? 'btn-gold' : 'btn-ghost')}
        style={{ width: '100%', justifyContent: 'center' }} disabled={isCur}>
        {isCur ? L('پلن فعلی شما', 'Your current plan') : plan.coins > 0 ? L('فعال‌سازی اشتراک', 'Activate plan') : L('شروع رایگان', 'Start free')}
      </button>
    </div>
  );
}

function PricingScreen({ coins, setCoins, toast }) {
  const [plan, setPlan] = React.useState('free');
  const [bundle, setBundle] = React.useState(OMID.COIN_BUNDLES[1]);
  const [gateway, setGateway] = React.useState('zarinpal');
  const [paid, setPaid] = React.useState(false);

  const choosePlan = (p) => {
    if (p.coins === 0) { setPlan('free'); return; }
    if (coins < p.coins) { toast(L('سکهٔ کافی ندارید — ابتدا کیف پول را شارژ کنید', 'Not enough coins — top up your wallet first')); return; }
    setCoins(coins - p.coins); setPlan(p.id); toast(L(`اشتراک «${p.fa}» فعال شد — ${OMID.numFa(p.coins)} سکه کسر شد`, `“${p.en}” plan activated — ${p.coins} coins deducted`));
  };
  const pay = () => {
    const total = bundle.coins + bundle.bonus;
    setCoins(coins + total); setPaid(true);
    toast(L(`پرداخت موفق از ${OMID.GATEWAYS.find(g => g.id === gateway).fa} — ${OMID.numFa(total)} سکه افزوده شد`, `Payment successful via ${OMID.GATEWAYS.find(g => g.id === gateway).en} — ${total} coins added`));
    setTimeout(() => setPaid(false), 2200);
  };

  return (
    <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '14px 22px 30px' }}>
      <div className="row between wrap" style={{ gap: 16, marginBottom: 26 }}>
        <div>
          <div className="eyebrow">{L('مدل درآمدی سکه‌محور', 'Coin-based model')}</div>
          <h1 style={{ fontSize: 40, fontFamily: 'var(--display)', fontWeight: 400, marginTop: 6 }}>{L('اشتراک و کیف پول', 'Plans & wallet')}</h1>
          <p className="muted" style={{ fontSize: 16, marginTop: 8, maxWidth: 560 }}>{L('با تماشای داستان‌ها سکه جمع کنید، یا کیف پول را شارژ کنید. اشتراکِ بدون تبلیغ، ماهانه ۱۰۰ سکه از کیف شما کسر می‌شود.', 'Earn coins by watching stories, or top up your wallet. The ad-free plan deducts 100 coins per month from your wallet.')}</p>
        </div>
        <div className="panel gold-frame col gap-2" style={{ padding: 20, minWidth: 210 }}>
          <span className="muted" style={{ fontSize: 13 }}>{L('موجودی کیف پول', 'Wallet balance')}</span>
          <div className="row gap-2" style={{ alignItems: 'center' }}><CoinGlyph size={30} /><b className="fa-num" style={{ fontSize: 36 }}>{OMID.num(coins)}</b><span className="muted">{L('سکه', 'coins')}</span></div>
        </div>
      </div>

      {/* Plans */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 40, alignItems: 'center' }}>
        {OMID.PLANS.map(p => <PlanCard key={p.id} plan={p} current={plan} onChoose={choosePlan} />)}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24 }}>
        {/* Buy coins + gateways */}
        <section className="panel" style={{ padding: 26 }}>
          <div className="row gap-2" style={{ marginBottom: 6, alignItems: 'center' }}><CoinGlyph size={20} /><h3 style={{ fontSize: 20, whiteSpace: 'nowrap' }}>{L('شارژ کیف پول', 'Top up wallet')}</h3></div>
          <p className="muted" style={{ fontSize: 13.5, marginBottom: 18 }}>{L('بستهٔ سکه را انتخاب و از درگاه دلخواه پرداخت کنید.', 'Pick a coin bundle and pay with your preferred gateway.')}</p>
          <div className="col gap-2" style={{ marginBottom: 20 }}>
            {OMID.COIN_BUNDLES.map((b, i) => {
              const on = bundle.coins === b.coins;
              return (
                <button key={i} onClick={() => setBundle(b)} className={on ? 'gold-frame' : ''}
                  style={{ padding: '14px 18px', borderRadius: 14, textAlign: 'start',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    background: on ? 'linear-gradient(135deg, rgba(212,169,76,.16), rgba(69,214,200,.08))' : 'rgba(231,222,201,.04)',
                    border: `1px solid ${on ? 'var(--panel-line)' : 'var(--hairline)'}` }}>
                  <div className="row gap-2"><CoinGlyph size={22} />
                    <div className="col"><b className="fa-num" style={{ fontSize: 17 }}>{OMID.num(b.coins)} {L('سکه', 'coins')}</b>
                      {b.bonus > 0 && <span className="turq fa-num" style={{ fontSize: 12 }}>+{OMID.num(b.bonus)} {L('هدیه', 'bonus')}</span>}</div>
                    {b.popular && <span className="badge-ai" style={{ fontSize: 10 }}>{L('پرفروش', 'Best value')}</span>}
                  </div>
                  <span className="fa-num" style={{ fontSize: 15, fontWeight: 700 }}>{OMID.TX(b, 'toman')} <span className="muted" style={{ fontSize: 11 }}>{L('تومان', 'Toman')}</span></span>
                </button>
              );
            })}
          </div>
          <div className="muted" style={{ fontSize: 13, marginBottom: 10 }}>{L('درگاه پرداخت', 'Payment gateway')}</div>
          <div className="row gap-2" style={{ marginBottom: 20 }}>
            {OMID.GATEWAYS.map(g => {
              const on = gateway === g.id;
              return (
                <button key={g.id} onClick={() => setGateway(g.id)} style={{ flex: 1, padding: '14px', borderRadius: 14, textAlign: 'start',
                  background: on ? 'rgba(231,222,201,.08)' : 'rgba(231,222,201,.03)', border: `1.5px solid ${on ? g.tint : 'var(--hairline)'}` }}>
                  <div className="row between" style={{ marginBottom: 8 }}>
                    <span style={{ width: 34, height: 34, borderRadius: 9, display: 'grid', placeItems: 'center', background: g.tint, color: g.id === 'zarinpal' ? '#1a1400' : '#fff', fontWeight: 800 }}>{g.mark}</span>
                    <span className="chip" style={{ padding: '3px 9px', fontSize: 11 }}>{OMID.TX(g, 'badge')}</span>
                  </div>
                  <b style={{ fontSize: 15 }}>{OMID.TX(g)}</b>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{OMID.TX(g, 'sub')}</div>
                </button>
              );
            })}
          </div>
          <button onClick={pay} className="btn btn-gold" style={{ width: '100%', justifyContent: 'center', padding: 14 }}>
            {paid ? <><Icon name="check" size={16} /> {L('پرداخت موفق', 'Payment successful')}</> : <>{L('پرداخت ' + OMID.numFa(bundle.toman) + ' تومان از ' + OMID.GATEWAYS.find(g => g.id === gateway).fa, 'Pay ' + bundle.tomanEn + ' Toman via ' + OMID.GATEWAYS.find(g => g.id === gateway).en)}</>}
          </button>
        </section>

        {/* Earn / spend + history */}
        <section className="col gap-3">
          <div className="panel" style={{ padding: 22 }}>
            <b style={{ fontSize: 16 }}>{L('چطور سکه جمع کنم؟', 'How do I earn coins?')}</b>
            <div className="col gap-2" style={{ marginTop: 14 }}>
              {OMID.COIN_EARN.map((e, i) => (
                <div key={i} className="row between" style={{ padding: '8px 0', borderBottom: i < 3 ? '1px solid var(--hairline)' : 'none' }}>
                  <span className="row gap-2" style={{ fontSize: 13.5 }}><span style={{ color: 'var(--turq-400)' }}><Icon name={e.icon} size={15} /></span>{OMID.TX(e)}</span>
                  <b className="fa-num turq" style={{ fontSize: 14 }}>{OMID.TX(e, 'val')}</b>
                </div>
              ))}
            </div>
          </div>
          <div className="panel" style={{ padding: 22 }}>
            <div className="row between" style={{ marginBottom: 4 }}><b style={{ fontSize: 16 }}>{L('وضعیت پرداخت‌ها و کیف پول', 'Payments & wallet status')}</b><span className="chip" style={{ fontSize: 11 }}>{L('رهگیری تراکنش', 'Track transactions')}</span></div>
            <div className="col gap-2" style={{ marginTop: 12 }}>
              {OMID.WALLET.history.map((h, i) => {
                const ps = OMID.PAY_STATUS[h.pay] || OMID.PAY_STATUS.done;
                return (
                  <div key={i} className="row between" style={{ fontSize: 13, padding: '8px 0', borderBottom: i < OMID.WALLET.history.length - 1 ? '1px solid var(--hairline)' : 'none' }}>
                    <span className="col" style={{ minWidth: 0 }}>
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{OMID.TX(h)}</span>
                      <span className="row gap-2" style={{ marginTop: 2 }}>
                        <span className="muted" style={{ fontSize: 11 }}>{OMID.TX(h, 'when')}</span>
                        {h.ref && <span className="muted fa-num" style={{ fontSize: 10.5, direction: 'ltr' }}>{h.ref}</span>}
                      </span>
                    </span>
                    <span className="col" style={{ alignItems: 'flex-end', flexShrink: 0, gap: 3 }}>
                      <b className="fa-num" style={{ color: h.kind === 'in' ? 'var(--turq-400)' : 'var(--ochre-400)' }}>{OMID.TX(h, 'val')}</b>
                      <span className="row gap-1" style={{ fontSize: 10.5, color: ps.tint }}><Icon name={ps.icon} size={11} />{OMID.TX(ps)}</span>
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        </section>
      </div>

      {/* User AI creation */}
      <section className="panel gold-frame" style={{ padding: 30, marginTop: 28, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .5 }}><PosterArt grad={['#0e1c3a', '#1c4392', '#45d6c8']} seed={7} /></div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 30, alignItems: 'center' }}>
          <div>
            <span className="badge-ai"><Icon name="sparkle" size={12} /> {L('خدمات هوش مصنوعی برای کاربران', 'AI services for users')}</span>
            <h2 style={{ fontSize: 30, fontFamily: 'var(--display)', fontWeight: 400, marginTop: 14 }}>{L('داستانِ خودت را با AI بیافرین', 'Create your own story with AI')}</h2>
            <p style={{ fontSize: 15.5, lineHeight: 2, color: 'var(--cream-2)', marginTop: 10, maxWidth: 440 }}>
              {L('موضوع، شخصیت و دوره را انتخاب کن؛ هوش مصنوعی متن و تصویرِ اختصاصی می‌سازد. هر آفرینش از کیف پول شما سکه مصرف می‌کند.', 'Pick a theme, character and era; AI generates dedicated text and art. Each creation spends coins from your wallet.')}
            </p>
            <div className="row gap-2 wrap" style={{ marginTop: 18 }}>
              <span className="chip"><CoinGlyph size={14} /> {L('تولید متن — ۳۰ سکه', 'Text generation — 30 coins')}</span>
              <span className="chip"><CoinGlyph size={14} /> {L('تصویر اختصاصی — ۵۰ سکه', 'Dedicated image — 50 coins')}</span>
            </div>
          </div>
          <div className="col gap-2">
            <div className="row gap-1 wrap">
              {OMID.IMAGE_MODELS.map(m => <span key={m.id} className="chip" style={{ fontSize: 12 }}><span style={{ width: 8, height: 8, borderRadius: 99, background: m.tint }} /> {m.name}</span>)}
            </div>
            <button className="btn btn-turq" style={{ justifyContent: 'center', padding: 14, marginTop: 6 }}><Icon name="sparkle" size={16} /> {L('شروع آفرینش', 'Start creating')}</button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.PricingScreen = PricingScreen;