/* ============================================================
   Төрмен — Loyalty program ("Дастархан-клуб")
   Баллы + уровни + согым-подписка + реферал (мок-данные участника).
   ============================================================ */
const { useState:useStateLY } = React;

function LoyaltyScreen({ go }){
  const { lang } = useLang();
  const L = (ru,kz)=> lang==='kz'?kz:ru;

  /* ---- mock member ---- */
  const member = { name: L('Аружан','Аружан'), balance: 3250 };
  const spent  = 78500; // накоплено за год (для расчёта уровня)
  const promo  = 'TORMEN-ARU250';

  const TIERS = [
    { key:'guest',  name:L('Гость','Қонақ'),  cb:3, min:0,      icon:'user',  benefits:[
      L('Кэшбэк 3% баллами','3% кэшбэк балл түрінде'),
      L('Сезонные наборы и согым','Маусымдық жинақтар мен соғым'),
      L('Уведомления в Telegram','Telegram-хабарламалар'),
    ]},
    { key:'friend', name:L('Друг','Дос'),      cb:5, min:30000,  icon:'users', benefits:[
      L('Кэшбэк 5% баллами','5% кэшбэк балл түрінде'),
      L('Ранний доступ к согыму','Соғымға ерте қолжетімділік'),
      L('Приоритетная поддержка','Басым қолдау'),
    ]},
    { key:'family', name:L('Семья','Отбасы'),  cb:8, min:120000, icon:'crown', benefits:[
      L('Кэшбэк 8% баллами','8% кэшбэк балл түрінде'),
      L('Персональный мясник','Жеке қасапшы'),
      L('Подарок к большим праздникам','Үлкен мерекеге сыйлық'),
    ]},
  ];
  const cur     = TIERS.reduce((acc,tr,i)=> spent>=tr.min ? i : acc, 0);
  const next    = TIERS[cur+1];
  const prevMin = TIERS[cur].min;
  const pct     = next ? Math.max(6, Math.min(100, Math.round((spent-prevMin)/(next.min-prevMin)*100))) : 100;
  const toNext  = next ? next.min - spent : 0;

  const EARN = [
    { icon:'percent',        t:L('Кэшбэк с заказа','Тапсырыстан кэшбэк'), d:L('До 8% баллами с каждой покупки','Әр сатып алудан 8%-ке дейін балл'),   tag:L('до 8%','8%') },
    { icon:'message-square', t:L('За отзыв','Пікір үшін'),               d:L('+200 баллов за отзыв с фото блюда','Тағам фотосымен пікірге +200 балл'), tag:'+200' },
    { icon:'user-plus',      t:L('За друга','Дос үшін'),                 d:L('+'+fmtPrice(2000)+' за приглашённого друга','Шақырған дос үшін +'+fmtPrice(2000)), tag:'+'+fmtPrice(2000) },
    { icon:'gift',           t:L('В день рождения','Туған күніңе'),      d:L('Двойной кэшбэк всю праздничную неделю','Мерекелік апта бойы қос кэшбэк'), tag:'×2' },
  ];

  const [copied,setCopied] = useStateLY(false);
  const [subbed,setSubbed] = useStateLY(false);
  const copy = ()=>{ try{ if(navigator.clipboard) navigator.clipboard.writeText(promo); }catch(e){} setCopied(true); setTimeout(()=>setCopied(false),1600); };

  return (
    <div className="max-w-7xl mx-auto px-5 pt-24 md:pt-28 pb-36">
      {/* header */}
      <Reveal>
        <div className="eyebrow mb-3">{L('Лояльность','Адалдық')}</div>
        <h1 className="display text-4xl md:text-5xl mb-3"><span className="grad-text">{L('Дастархан-клуб','Дастархан-клуб')}</span></h1>
        <p className="max-w-xl mb-8" style={{ color:'var(--ink-2)' }}>{L('Возвращаем часть каждой покупки баллами и открываем привилегии — чем чаще собираете дастархан, тем больше выгода.','Әр сатып алудың бір бөлігін баллмен қайтарамыз әрі артықшылықтар ашамыз — дастарханды неғұрлым жиі жинасаңыз, пайдаңыз соғұрлым көп.')}</p>
      </Reveal>

      {/* balance + tier progress */}
      <div className="grid lg:grid-cols-[1.3fr_1fr] gap-6 items-stretch mb-6">
        {/* balance */}
        <Reveal>
          <div className="glass glass-strong p-7 md:p-8 relative overflow-hidden h-full">
            <div aria-hidden className="absolute pointer-events-none" style={{ top:'-55%', right:'-14%', width:'58%', height:'170%', background:'radial-gradient(closest-side, color-mix(in srgb,var(--ember) 34%,transparent), color-mix(in srgb,var(--gold) 12%,transparent) 55%, transparent)' }} />
            <div className="relative">
              <div className="flex items-center justify-between gap-3 mb-5">
                <div className="eyebrow">{L('Ваш баланс','Балансыңыз')}</div>
                <span className="badge badge-gold"><Icon name={TIERS[cur].icon} size={11} stroke={2} />{TIERS[cur].name}</span>
              </div>
              <div className="flex items-end gap-3 mb-2">
                <span className="display grad-text tnum" style={{ fontSize:'clamp(48px,11vw,72px)', lineHeight:0.9 }}>{member.balance.toLocaleString('ru-RU')}</span>
                <span className="text-lg mb-1.5" style={{ color:'var(--ink-2)' }}>{L('баллов','балл')}</span>
              </div>
              <div className="flex items-center gap-2 text-sm mb-6" style={{ color:'var(--ink-3)' }}>
                <Icon name="coins" size={14} style={{ color:'var(--gold)' }} />{L('1 балл = 1 ₸ · списывайте до 50% суммы заказа','1 балл = 1 ₸ · тапсырыс сомасының 50%-на дейін')}
              </div>
              <div className="flex flex-wrap items-center gap-3">
                <button className="btn btn-primary" onClick={()=>go('catalog')}><span className="shine"></span><Icon name="shopping-bag" size={17} />{L('Потратить баллы','Балл жұмсау')}</button>
                <div className="glass px-4 py-2.5 flex items-center gap-2.5">
                  <Icon name="trending-up" size={16} style={{ color:'var(--emerald)' }} />
                  <div>
                    <div className="text-xs" style={{ color:'var(--ink-3)' }}>{L('Накоплено за год','Жыл ішінде')}</div>
                    <div className="tnum font-semibold text-sm">{fmtPrice(spent)}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        {/* tier progress */}
        <Reveal delay={80}>
          <div className="glass p-6 md:p-7 h-full">
            <div className="flex items-center justify-between gap-3 mb-6">
              <div className="font-semibold text-lg">{L('Ваш уровень','Деңгейіңіз')}</div>
              <span className="badge badge-ember"><Icon name="percent" size={11} stroke={2} />{TIERS[cur].cb}% {L('кэшбэк','кэшбэк')}</span>
            </div>
            <div className="relative mb-4" style={{ height:8 }}>
              <div className="absolute inset-0 rounded-full" style={{ background:'var(--surface-2)', border:'1px solid var(--border)' }} />
              <div className="absolute inset-y-0 left-0 rounded-full" style={{ width:pct+'%', background:'linear-gradient(90deg,var(--gold),var(--ember))', boxShadow:'0 0 16px var(--glow-ember)' }} />
            </div>
            <div className="flex justify-between mb-5">
              {TIERS.map((tr,i)=>(
                <div key={tr.key} className="flex flex-col items-center gap-1.5" style={{ flex:1, opacity: i<=cur?1:0.55 }}>
                  <span className="grid place-items-center rounded-full" style={{ width:32, height:32, background: i<=cur?'var(--ember)':'var(--surface-3)', color: i<=cur?'var(--on-accent)':'var(--ink-3)' }}>
                    <Icon name={i<cur?'check':tr.icon} size={15} stroke={2} />
                  </span>
                  <span className="text-[11px] font-semibold" style={{ color: i===cur?'var(--ink)':'var(--ink-3)' }}>{tr.name}</span>
                  <span className="text-[10px] tnum" style={{ color:'var(--ink-3)' }}>{tr.cb}%</span>
                </div>
              ))}
            </div>
            <hr className="hairline mb-4" />
            {next ? (
              <p className="text-sm leading-relaxed" style={{ color:'var(--ink-2)' }}>
                {lang==='kz'
                  ? <><b style={{ color:'var(--ink)' }}>{next.name}</b> деңгейіне <span className="tnum" style={{ color:'var(--gold)' }}>{fmtPrice(toNext)}</span> қалды — кэшбэк <b style={{ color:'var(--emerald)' }}>{next.cb}%</b>-ке дейін өседі.</>
                  : <>До уровня <b style={{ color:'var(--ink)' }}>{next.name}</b> осталось <span className="tnum" style={{ color:'var(--gold)' }}>{fmtPrice(toNext)}</span> — кэшбэк вырастет до <b style={{ color:'var(--emerald)' }}>{next.cb}%</b>.</>}
              </p>
            ) : (
              <p className="text-sm" style={{ color:'var(--ink-2)' }}>{L('Максимальный уровень — спасибо, что вы с нами!','Ең жоғары деңгей — бізбен бірге болғаныңызға рахмет!')}</p>
            )}
          </div>
        </Reveal>
      </div>

      {/* how to earn */}
      <Reveal><div className="eyebrow mb-4 mt-2">{L('Как копить','Қалай жинау керек')}</div></Reveal>
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
        {EARN.map((e,i)=>(
          <Reveal key={i} delay={(i%4)*70}>
            <div className="glass lift p-5 h-full">
              <div className="flex items-center justify-between gap-2 mb-4">
                <span className="icon-tile" style={{ width:46, height:46 }}><Icon name={e.icon} size={21} style={{ color:'var(--gold)' }} /></span>
                <span className="badge badge-ember tnum">{e.tag}</span>
              </div>
              <div className="font-semibold mb-1">{e.t}</div>
              <p className="text-sm" style={{ color:'var(--ink-2)' }}>{e.d}</p>
            </div>
          </Reveal>
        ))}
      </div>

      {/* subscription + referral */}
      <div className="grid lg:grid-cols-2 gap-6 items-stretch mb-10">
        {/* согым-подписка */}
        <Reveal>
          <div className="glass glass-halo card-lift p-7 md:p-8 h-full flex flex-col">
            <div className="flex items-center gap-2.5 mb-4">
              <span className="icon-tile" style={{ width:44, height:44 }}><Icon name="calendar-days" size={20} style={{ color:'var(--gold)' }} /></span>
              <span className="badge badge-gold"><Icon name="sparkles" size={11} stroke={2} />{L('Сезонно','Маусымдық')}</span>
            </div>
            <h3 className="serif-title text-2xl mb-2">{L('Согым-подписка','Соғым жазылымы')}</h3>
            <p className="text-sm mb-5 flex-1" style={{ color:'var(--ink-2)' }}>{L('Регулярные наборы к сезону согыма и большим праздникам — по фиксированной цене со скидкой и приоритетной разделкой.','Соғым маусымы мен үлкен мерекелерге тұрақты жинақтар — тұрақты жеңілдік бағамен әрі басым бөлшектеумен.')}</p>
            <div className="space-y-2.5 mb-6 text-sm">
              {[
                L('Скидка 12% на каждый набор','Әр жинаққа 12% жеңілдік'),
                L('Приоритетная разделка','Басым бөлшектеу'),
                L('Можно отменить в любой момент','Кез келген уақытта тоқтатуға болады'),
              ].map((b,i)=>(
                <div key={i} className="flex items-center gap-2.5"><Icon name="check-circle" size={16} style={{ color:'var(--emerald)', flexShrink:0 }} /><span style={{ color:'var(--ink-2)' }}>{b}</span></div>
              ))}
            </div>
            <button className="btn btn-primary w-full" onClick={()=>setSubbed(true)} style={{ background: subbed?'var(--emerald)':undefined }}>
              <span className="shine"></span><Icon name={subbed?'check':'repeat'} size={17} stroke={2} />{subbed?L('Подписка оформлена','Жазылым рәсімделді'):L('Оформить подписку','Жазылымды рәсімдеу')}
            </button>
          </div>
        </Reveal>

        {/* referral */}
        <Reveal delay={80}>
          <div className="glass p-7 md:p-8 h-full flex flex-col">
            <div className="flex items-center gap-2.5 mb-4">
              <span className="icon-tile" style={{ width:44, height:44 }}><Icon name="gift" size={20} style={{ color:'var(--gold)' }} /></span>
              <span className="badge badge-emerald"><Icon name="user-plus" size={11} stroke={2} />{L('Реферал','Реферал')}</span>
            </div>
            <h3 className="serif-title text-2xl mb-2">{L('Приведи друга','Досыңды шақыр')}</h3>
            <p className="text-sm mb-5 leading-relaxed" style={{ color:'var(--ink-2)' }}>
              {lang==='kz'
                ? <>Досыңыз алғашқы тапсырысқа <span className="tnum" style={{ color:'var(--gold)' }}>{fmtPrice(2000)}</span> алады, ал сіз оның сатып алуынан кейін <span className="tnum" style={{ color:'var(--gold)' }}>{fmtPrice(2000)}</span> балл аласыз.</>
                : <>Друг получит <span className="tnum" style={{ color:'var(--gold)' }}>{fmtPrice(2000)}</span> на первый заказ, а вы — <span className="tnum" style={{ color:'var(--gold)' }}>{fmtPrice(2000)}</span> баллами после его покупки.</>}
            </p>
            <div className="flex items-center gap-2 rounded-2xl p-1.5 pl-4 mb-4" style={{ background:'var(--surface-1)', border:'1px dashed color-mix(in srgb,var(--gold) 45%,transparent)' }}>
              <Icon name="ticket" size={16} style={{ color:'var(--gold)', flexShrink:0 }} />
              <span className="flex-1 font-semibold tnum truncate" style={{ letterSpacing:'.06em' }}>{promo}</span>
              <button onClick={copy} className="btn btn-ghost shrink-0" style={{ padding:'8px 14px' }}><Icon name={copied?'check':'copy'} size={15} />{copied?L('Скопировано','Көшірілді'):L('Копировать','Көшіру')}</button>
            </div>
            <button className="btn btn-gold w-full mt-auto"><span className="shine"></span><Icon name="share-2" size={17} />{L('Поделиться','Бөлісу')}</button>
          </div>
        </Reveal>
      </div>

      {/* benefits per tier */}
      <Reveal><div className="eyebrow mb-4">{L('Привилегии по уровням','Деңгей бойынша артықшылықтар')}</div></Reveal>
      <div className="grid sm:grid-cols-3 gap-4 mb-12">
        {TIERS.map((tr,i)=>{
          const isCur = i===cur;
          return (
            <Reveal key={tr.key} delay={i*70}>
              <div className="glass p-6 h-full" style={ isCur ? { borderColor:'color-mix(in srgb,var(--gold) 46%,transparent)', boxShadow:'0 0 0 1px color-mix(in srgb,var(--gold) 22%,transparent), 0 22px 50px -28px var(--glow-ember)' } : undefined }>
                <div className="flex items-center justify-between gap-2 mb-4">
                  <div className="flex items-center gap-2.5">
                    <span className="grid place-items-center rounded-full" style={{ width:34, height:34, background: isCur?'var(--ember)':'var(--surface-3)', color: isCur?'var(--on-accent)':'var(--gold)' }}><Icon name={tr.icon} size={17} stroke={2} /></span>
                    <span className="font-semibold">{tr.name}</span>
                  </div>
                  {isCur && <span className="badge badge-ember">{L('Вы здесь','Осындасыз')}</span>}
                </div>
                <div className="mb-4"><span className="display text-2xl grad-text tnum">{tr.cb}%</span> <span className="text-sm" style={{ color:'var(--ink-3)' }}>{L('кэшбэк','кэшбэк')}</span></div>
                <div className="space-y-2.5">
                  {tr.benefits.map((b,j)=>(
                    <div key={j} className="flex items-start gap-2.5 text-sm"><Icon name="check" size={16} stroke={2.4} style={{ color:'var(--emerald)', marginTop:1, flexShrink:0 }} /><span style={{ color:'var(--ink-2)' }}>{b}</span></div>
                  ))}
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>

      {/* bottom CTA */}
      <Reveal>
        <div className="text-center">
          <button className="btn btn-primary" onClick={()=>go('catalog')}><span className="shine"></span>{L('В каталог','Каталогқа')}<Icon name="arrow-right" size={17} /></button>
        </div>
      </Reveal>
    </div>
  );
}

Object.assign(window, { LoyaltyScreen });
