/* ── LIGHT MEMBERSHIP GATE ──
   Free preview → simple signup (name + email + offers opt-in).
   No password — this is a lead-capture gate, not the full auth layer.
   window.MemberGate  — wrap a mode; locks after the free allowance
   Storage: tfe_member_v1 (current member), tfe_leads_v1 (all signups on this device) */

const MEMBER_KEY = 'tfe_member_v1';
const LEADS_KEY  = 'tfe_leads_v1';
const FREE_PRACTICE_ANSWERS = 12; // free scored answers (practice + lessons)
/* Speaking is ALWAYS free — never gated. */

function loadMember() {
  try {
    const m = JSON.parse(localStorage.getItem(MEMBER_KEY));
    if (m && m.email) return m;
  } catch {}
  return null;
}
function saveMember(m) {
  localStorage.setItem(MEMBER_KEY, JSON.stringify(m));
  try {
    const leads = JSON.parse(localStorage.getItem(LEADS_KEY)) || [];
    if (!leads.some(l => l.email === m.email)) {
      leads.push(m);
      localStorage.setItem(LEADS_KEY, JSON.stringify(leads));
    }
  } catch {}
}

function SignupCard({ t, onDone, context }) {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [offers, setOffers] = React.useState(true);
  const [err, setErr] = React.useState(null);
  const [joined, setJoined] = React.useState(null);

  const submit = () => {
    if (!name.trim()) { setErr(t('Please enter your name.','يرجى إدخال اسمك.','Lütfen adınızı girin.')); return; }
    const em = email.trim().toLowerCase();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)) { setErr(t('Please enter a valid email.','يرجى إدخال بريد إلكتروني صحيح.','Lütfen geçerli bir e-posta girin.')); return; }
    const m = { name: name.trim(), email: em, offers, at: Date.now() };
    saveMember(m);
    setJoined(m);
  };

  if (joined) return (
    <div className="practice-wrap su-card">
      <div className="su-inner">
        <div className="su-emoji">🎁</div>
        <div className="su-title">{t('Welcome, ','أهلاً بك، ','Hoş geldin, ')}{joined.name}!</div>
        <div className="su-sub">{t(
          'Your welcome gift is ready: our complete guide to the English tenses — all 8 tenses explained with examples and a cheat sheet. We’ll also send it to your email.',
          'هدية ترحيبية جاهزة لك: دليلنا الكامل لأزمنة الإنجليزية — الأزمنة الثمانية مشروحة بأمثلة وورقة مرجعية. وسنرسله أيضاً إلى بريدك.',
          'Hoş geldin hediyen hazır: İngilizce zamanların tam rehberi — 8 zaman, örnekler ve kopya kâğıdıyla. E-postana da göndereceğiz.'
        )}</div>
        <a className="spk-start su-btn" style={{textDecoration:'none',display:'inline-block'}} href="Welcome Pack — English Tenses Guide.html" target="_blank">📘 {t('Open my welcome gift','افتح هديتي','Hediyemi aç')}</a>
        <button className="su-btn2" onClick={() => onDone(joined)}>{t('Continue practicing →','واصل التمرين ←','Alıştırmaya devam et →')}</button>
      </div>
    </div>
  );

  return (
    <div className="practice-wrap su-card">
      <div className="su-inner">
        <div className="su-emoji">{(context && context.emoji) || '🔓'}</div>
        <div className="su-title">{(context && context.title) || t('You\u2019ve finished your free preview!','لقد أنهيت الجولة المجانية!','Ücretsiz denemeyi tamamladın!')}</div>
        <div className="su-sub">{(context && context.sub) || t(
          'Join free to keep practicing — unlimited exercises, your progress saved, and a welcome gift: our complete English Tenses Guide. No password needed.',
          'انضم مجاناً لمواصلة التمرين — تمارين بلا حدود، حفظ تقدمك، وهدية ترحيبية: دليل الأزمنة الإنجليزية الكامل. لا حاجة لكلمة مرور.',
          'Ücretsiz katıl — sınırsız alıştırma, kayıtlı ilerleme ve hoş geldin hediyesi: İngilizce Zamanlar Rehberi. Şifre gerekmez.'
        )}</div>

        <div className="su-field">
          <label>{t('Your name','اسمك','Adınız')}</label>
          <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Ahmed / Ayşe / Sara" autoComplete="name" />
        </div>
        <div className="su-field">
          <label>{t('Email','البريد الإلكتروني','E-posta')}</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com" autoComplete="email" onKeyDown={e => { if (e.key === 'Enter') submit(); }} />
        </div>
        <label className="su-check">
          <input type="checkbox" checked={offers} onChange={e => setOffers(e.target.checked)} />
          <span>{t(
            'Send me free lessons, tips, and special offers by email',
            'أرسلوا لي دروساً مجانية ونصائح وعروضاً خاصة عبر البريد',
            'Bana e-postayla ücretsiz dersler, ipuçları ve özel teklifler gönderin'
          )}</span>
        </label>

        {err && <div className="su-err">⚠ {err}</div>}

        <button className="spk-start su-btn" onClick={submit}>✨ {t('Join free & keep practicing','انضم مجاناً وواصل التمرين','Ücretsiz katıl ve devam et')}</button>
        <div className="su-fine">{t('Free forever. No spam — unsubscribe anytime.','مجاني للأبد. لا رسائل مزعجة — يمكنك إلغاء الاشتراك متى شئت.','Sonsuza dek ücretsiz. Spam yok — istediğin zaman ayrılabilirsin.')}</div>
      </div>
    </div>
  );
}

/* Wraps a practice-type mode. Pass member/onMember from the app to keep
   sign-in state in sync across all sections. */
function MemberGate({ state, t, kind, member: memberProp, onMember, children }) {
  const [memberLocal, setMemberLocal] = React.useState(loadMember);
  const member = memberProp !== undefined ? memberProp : memberLocal;
  const setMember = onMember || setMemberLocal;

  const answers = (state.practiceScore && state.practiceScore.total) || 0;
  const over = answers >= FREE_PRACTICE_ANSWERS;

  // Lock is decided when the mode opens — never mid-exercise
  const [locked] = React.useState(over);

  if (!member && locked) return <SignupCard t={t} onDone={setMember} />;

  const leftTxt = `${Math.max(0, FREE_PRACTICE_ANSWERS - answers)} ${t('free answers left','إجابات مجانية متبقية','ücretsiz cevap kaldı')}`;

  return (
    <React.Fragment>
      {!member && (
        <div className="su-banner">
          <span>🎁 {t('Free preview','جولة مجانية','Ücretsiz deneme')} — {leftTxt}</span>
          <span className="su-banner-note">{t('Join free for unlimited practice','انضم مجاناً لتمرين بلا حدود','Sınırsız alıştırma için ücretsiz katıl')}</span>
        </div>
      )}
      {member && <div className="su-hello">👋 {t('Welcome back,','مرحباً بعودتك،','Tekrar hoş geldin,')} <strong>{member.name}</strong></div>}
      {children}
    </React.Fragment>
  );
}

Object.assign(window, { MemberGate, SignupCard, loadMember, saveMember });