/* ===== Payment + Cabinet ===== */
const D3 = window.DATA;

/* ---- fake QR ---- */
function QR({ size=180 }){
  const n=21; const cells=[];
  function finder(r,c){ return (r<7&&c<7)||(r<7&&c>=n-7)||(r>=n-7&&c<7); }
  let seed=7;
  const rnd=()=>{ seed=(seed*1103515245+12345)&0x7fffffff; return (seed>>8)&1; };
  for(let r=0;r<n;r++) for(let c=0;c<n;c++){
    let on=false;
    if(finder(r,c)){
      const rr=r%(n-7), cc=c%(n-7);
      const lr=r<7?r:r-(n-7), lc=(c<7?c:c-(n-7));
      on=(lr===0||lr===6||lc===0||lc===6||(lr>=2&&lr<=4&&lc>=2&&lc<=4));
    } else { on=rnd()===1; }
    if(on) cells.push(<rect key={r+'-'+c} x={c} y={r} width="1.02" height="1.02" rx="0.18"/>);
  }
  return <svg viewBox={`0 0 ${n} ${n}`} width={size} height={size} fill="var(--navy)" style={{display:'block'}}>{cells}</svg>;
}

function Payment({ id, go, onPaid, user }){
  const paymentId = String(id || '');
  const [courseId] = paymentId.split('/');
  // `racing` is kept for old links; new membership links use a dedicated
  // route id so they can never be confused with a catalog course.
  const isLeague = courseId === 'league-membership' || courseId === 'racing';
  const c = D3.courses.find(x=>x.id===courseId) || D3.courses.find(x=>x.id===id) || D3.courses[0];
  const league = D3.leagueMembership || {};
  const productId = isLeague ? 'racing' : c.id;
  const contacts = D3.contacts || {};
  // Education payments go directly to the KRSU bank account. Racing and
  // League payments are a separate flow and use their own QR code.
  const paymentMethod = isLeague ? 'qr' : 'bank';
  const [agree,setAgree]=useState(false);
  const [payerName,setPayerName]=useState(user?.name || '');
  const [payerEmail,setPayerEmail]=useState(user?.email || '');
  const [sending,setSending]=useState(false);
  const [payError,setPayError]=useState('');
  const selectedPrice = isLeague
    ? Number(league.yearlyPrice || 8760)
    : Number(c.price || 0);
  const paymentLabel = isLeague
    ? `${league.title || 'Членство в Лиге'} · Годовая подписка`
    : c.title;

  useEffect(()=>{
    setPayerName(user?.name || '');
    setPayerEmail(user?.email || '');
  },[user?.name, user?.email]);
  async function submitPayment(){
    if(!agree || sending) return;
    setSending(true);
    setPayError('');
    try{
      const res = await fetch('api/payments.php',{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({
          course_id:productId,
          name:payerName,
          email:payerEmail,
          amount:selectedPrice,
          payment_method:paymentMethod,
          comment:isLeague ? paymentLabel : 'Заявка отправлена с сайта',
        }),
      });
      const data = await res.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
      if(!res.ok || data.ok===false) throw new Error(data.error || `HTTP ${res.status}`);
      onPaid && onPaid(productId);
      go('cabinet');
    }catch(err){
      setPayError(err.message || 'Не удалось отправить заявку');
    }finally{
      setSending(false);
    }
  }

  return (
    <div>
      <div className="subhero payment-hero">
        <div className="wrap stack" style={{gap:14}}>
          <button className="back back--dark" onClick={()=>go(isLeague ? 'league' : 'course', isLeague ? null : c.id)}><Icon name="chevLeft" size={16}/> {isLeague ? 'К членству' : 'Назад к курсу'}</button>
          <span className="eyebrow">Оплата</span>
          <h1 style={{fontSize:40}}>{isLeague ? 'Оплата гонок по QR-коду' : 'Оплата обучения по реквизитам КРСУ'}</h1>
        </div>
      </div>
      <div className="wrap pay-grid" style={{paddingBottom:92}}>
        <div className="stack" style={{gap:20}}>
          {isLeague && (
            <div className="card" style={{padding:22}}>
              <div className="spread wrapf" style={{gap:14,alignItems:'flex-start'}}>
                <div className="stack" style={{gap:8}}>
                  <span className="badge navy">Лига дронов</span>
                  <b style={{fontSize:22}}>{league.title || 'Членство в Лиге'}</b>
                  <span className="muted" style={{fontSize:15}}>{league.subtitle || 'Платная регистрация для участия в Лиге Дронов и официальных заездах.'}</span>
                  <span className="badge amber" style={{width:'fit-content'}}>Годовая подписка</span>
                </div>
                <div className="stack" style={{gap:6,alignItems:'flex-end'}}>
                  <b style={{fontSize:26,color:'var(--navy)'}}>{D3.fmt(selectedPrice)} сом</b>
                  <span className="muted" style={{fontSize:13.5,fontWeight:700}}>в год</span>
                </div>
              </div>
            </div>
          )}
          {isLeague ? (
            <div className="card pay-card">
              <div className="qr-box">
                {contacts.qrImage
                  ? <img src={contacts.qrImage} alt="QR-код для оплаты гонок" style={{width:180,height:180,objectFit:'contain',display:'block'}}/>
                  : <QR/>}
              </div>
              <div className="stack" style={{gap:10,flex:1}}>
                <span className="badge amber" style={{width:'fit-content'}}>Отдельный счёт гонок · тестовый QR</span>
                <b style={{fontSize:20}}>Отсканируйте QR-код для оплаты</b>
                <p className="muted">{contacts.paymentText || 'Откройте приложение банка, наведите камеру на QR-код гонок и подтвердите перевод.'}</p>
                <div className="pay-amt"><span>К оплате</span><b>{D3.fmt(selectedPrice)} сом</b></div>
              </div>
            </div>
          ) : (
            <div className="card pay-bank-card" style={{padding:28}}>
              <b style={{fontSize:18,display:'block',marginBottom:16}}>Банковские реквизиты</b>
              <p className="muted pay-bank-copy">{contacts.bankPaymentText || 'Оплата обучения принимается только по банковским реквизитам КРСУ. В назначении платежа укажите выбранный курс.'}</p>
              <div className="req"><span>Получатель</span><b>{contacts.receiver || 'КРСУ · Лаборатория БПЛА'}</b></div>
              <div className="req"><span>Расчётный счёт</span><b>{contacts.account}</b></div>
              <div className="req"><span>БИК</span><b>{contacts.bik}</b></div>
              <div className="req"><span>ИНН</span><b>{contacts.inn}</b></div>
              {contacts.okpo && <div className="req"><span>ОКПО</span><b>{contacts.okpo}</b></div>}
              <div className="req"><span>Назначение</span><b>{`Оплата курса «${c.title}»`}</b></div>
            </div>
          )}
          <div className="note">
            <Icon name="shield" size={18} style={{color:'var(--green-600)',flexShrink:0}}/>
            <span>{isLeague
              ? 'После оплаты администратор подтвердит членство в Лиге — обычно в течение рабочего дня.'
              : 'После оплаты администратор вручную откроет доступ к курсу в вашем личном кабинете — обычно в течение рабочего дня.'}</span>
          </div>
        </div>

        <aside className="card pay-summary">
          <div className="ph" data-label="" style={{height:120,marginBottom:18,background:isLeague?'var(--navy)':c.color,display:'flex',alignItems:'center',justifyContent:'center'}}>
            <Icon name={isLeague?'award':c.icon} size={48} style={{color:'#fff'}}/>
          </div>
          <b style={{fontSize:18}}>{paymentLabel}</b>
          <div className="row gap8 wrapf" style={{margin:'10px 0 16px'}}>
            <span className="chip">{isLeague ? 'Лига дронов' : c.cat}</span><span className="chip">{isLeague ? '12 месяцев' : c.duration}</span>
          </div>
          <div className="req"><span>{isLeague ? 'Стоимость членства' : 'Стоимость курса'}</span><b>{D3.fmt(selectedPrice)} сом</b></div>
          <div className="req"><span>Доступ</span><b>{isLeague ? '1 год' : 'Навсегда'}</b></div>
          <div className="field" style={{marginTop:14}}>
            <label>Имя и фамилия</label>
            <input className="input" value={payerName} onChange={e=>setPayerName(e.target.value)} placeholder="Имя студента" required/>
          </div>
          <div className="field" style={{marginTop:12}}>
            <label>Email</label>
            <input className="input" type="email" value={payerEmail} onChange={e=>setPayerEmail(e.target.value)} placeholder="student@mail.kg" required/>
          </div>
          <label className="agree">
            <input type="checkbox" checked={agree} onChange={e=>setAgree(e.target.checked)}/>
            <span>Я принимаю <a href="#" onClick={e=>e.preventDefault()}>договор оферты</a> и {isLeague ? 'условия членства' : 'условия обучения'}</span>
          </label>
          {payError && <div className="note" style={{margin:'0 0 12px'}}>{payError}. Заявка не отправлена — попробуйте ещё раз.</div>}
          <button className="btn btn-green btn-block btn-lg" disabled={!agree || !payerName.trim() || !payerEmail.trim() || sending} style={{opacity:agree?1:.5}}
            onClick={submitPayment}>
            {sending?'Отправляю…':'Я оплатил(а)'} <Icon name="check"/>
          </button>
          <p className="muted center" style={{fontSize:12.5,marginTop:12}}>Нажимая кнопку, вы отправляете заявку на проверку оплаты</p>
        </aside>
      </div>
    </div>
  );
}

/* ---------------- LOGIN ---------------- */
const PERSON_NAME_PATTERN=/^[\p{L}\p{M}]+(?:['’.-][\p{L}\p{M}]+)*(?:\s+[\p{L}\p{M}]+(?:['’.-][\p{L}\p{M}]+)*){1,5}$/u;

function Login({ go, onLogin, initialMode='login', resetToken='' }){
  const resolveMode = value => ['reg','forgot','reset'].includes(value) ? value : 'login';
  const [mode,setMode]=useState(resolveMode(initialMode));
  const [sending,setSending]=useState(false);
  const [authError,setAuthError]=useState('');
  const [authMessage,setAuthMessage]=useState('');
  const [regValues,setRegValues]=useState({name:'',email:'',password:''});
  const [regTouched,setRegTouched]=useState({name:false,email:false,password:false});
  const normalizedRegName=regValues.name.trim().replace(/\s+/g,' ');
  const normalizedRegEmail=regValues.email.trim();
  const emailLocalPart=normalizedRegEmail.split('@')[0] || '';
  const regErrors={
    name:normalizedRegName.length<5
      ?'Введите имя и фамилию — минимум 5 символов.'
      :normalizedRegName.length>80
      ?'Имя и фамилия должны быть не длиннее 80 символов.'
      :PERSON_NAME_PATTERN.test(normalizedRegName)
        ?''
        :'Введите имя и фамилию: 2–6 слов, только буквы, дефис или апостроф.',
    email:normalizedRegEmail.length>190
      ?'Email должен быть не длиннее 190 символов.'
      :emailLocalPart.length>64
        ?'Часть email до знака @ должна быть не длиннее 64 символов.'
        :/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedRegEmail)
          ?''
          :'Введите корректный email, например name@mail.kg.',
    password:regValues.password.length<10?'Пароль должен содержать не менее 10 символов.':'',
  };
  const regValid=!regErrors.name&&!regErrors.email&&!regErrors.password;
  useEffect(()=>{
    setMode(resolveMode(initialMode));
    setAuthError('');
    setAuthMessage('');
    setRegTouched({name:false,email:false,password:false});
  },[initialMode, resetToken]);
  function switchMode(nextMode){
    setMode(nextMode);
    setAuthError('');
    setAuthMessage('');
    setRegTouched({name:false,email:false,password:false});
  }
  function updateRegistration(field,value){
    const limits={name:80,email:190};
    const nextValue=limits[field] ? value.slice(0,limits[field]) : value;
    setRegValues(current=>({...current,[field]:nextValue}));
    setAuthError('');
  }
  async function submit(e){
    e.preventDefault();
    const fields=e.currentTarget.elements;
    if(mode==='reg'&&!regValid){
      setRegTouched({name:true,email:true,password:true});
      setAuthError('Проверьте выделенные поля регистрации.');
      return;
    }
    setSending(true);
    setAuthError('');
    setAuthMessage('');
    try{
      const payload = mode==='forgot'
        ? {action:'request_password_reset', email:fields.email.value}
        : mode==='reset'
          ? {action:'reset_password', token:resetToken, password:fields.password.value}
          : {
              action:mode==='reg'?'register':'login',
              name:fields.name?.value || '',
              email:fields.email.value,
              password:fields.password.value,
            };
      if(mode==='reset' && fields.password.value !== fields.repeat_password.value){
        throw new Error('Пароли не совпадают');
      }
      const res = await fetch('api/auth.php',{
        method:'POST',
        credentials:'same-origin',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify(payload),
      });
      const data = await res.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
      if(!res.ok || data.ok===false) throw new Error(data.error || `HTTP ${res.status}`);
      if(mode==='login' || mode==='reg'){
        onLogin(data.user);
      }else if(mode==='forgot'){
        setAuthMessage(data.message || 'Если email найден, письмо уже отправлено.');
      }else if(mode==='reset'){
        setAuthMessage(data.message || 'Пароль обновлён.');
        setMode('login');
      }
    }catch(err){
      setAuthError(err.message || 'Не удалось войти');
    }finally{
      setSending(false);
    }
  }
  return (
    <div className="auth">
      <div className="auth__media">
        <img src="assets/bg_k.png" alt="Студенты лаборатории БПЛА" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} />
        <div className="auth__scrim"></div>
        <div className="auth__quote">
          <Logo variant="full" height={40} light/>
          <h2 style={{color:'#fff',fontSize:30,marginTop:24,maxWidth:420}}>Ваш путь в небо начинается с личного кабинета</h2>
          <p style={{color:'#C5D6DC',marginTop:12,maxWidth:380}}>Доступ к курсам, материалам, симулятору и аттестации — в одном месте.</p>
        </div>
      </div>
      <div className="auth__form">
        <div className="auth__box">
          <Logo variant="mark" height={48}/>
          <h1 style={{fontSize:28,marginTop:18}}>
            {mode==='login' ? 'Вход в личный кабинет' : mode==='reg' ? 'Регистрация' : mode==='forgot' ? 'Восстановление пароля' : 'Новый пароль'}
          </h1>
          <p className="muted" style={{marginBottom:24}}>
            {mode==='login'
              ? 'Введите данные для входа'
              : mode==='reg'
                ? 'Создайте аккаунт, чтобы начать обучение'
                : mode==='forgot'
                  ? 'Введите email, и мы отправим ссылку для смены пароля'
                  : 'Введите новый пароль для личного кабинета'}
          </p>
          <form className="stack" style={{gap:14}} onSubmit={submit} noValidate>
            {mode==='reg' && <div className="field">
              <label>Имя и фамилия</label>
              <input className={`input ${regTouched.name?(regErrors.name?'is-invalid':'is-valid'):''}`} name="name" value={regValues.name} onChange={e=>updateRegistration('name',e.target.value)} onBlur={()=>setRegTouched(v=>({...v,name:true}))} placeholder="Айбек Усенов" minLength={5} maxLength={80} autoComplete="name" aria-invalid={regTouched.name&&!!regErrors.name} aria-describedby="reg-name-hint" required/>
              <div className="auth-field-hint"><small id="reg-name-hint" className={`auth-validation ${regTouched.name?(regErrors.name?'is-error':'is-success'):''}`}>{regTouched.name?(regErrors.name||'Имя и фамилия заполнены правильно.'):'2–6 слов: буквы, дефис или апостроф.'}</small><b>{regValues.name.length}/80</b></div>
            </div>}
            {mode!=='reset' && <div className="field">
              <label>Email</label>
              <input key={mode==='reg'?'reg-email':'auth-email'} className={`input ${mode==='reg'&&regTouched.email?(regErrors.email?'is-invalid':'is-valid'):''}`} name="email" type="email" value={mode==='reg'?regValues.email:undefined} onChange={mode==='reg'?e=>updateRegistration('email',e.target.value):undefined} onBlur={mode==='reg'?()=>setRegTouched(v=>({...v,email:true})):undefined} placeholder="you@mail.kg" maxLength={190} autoComplete="email" aria-invalid={mode==='reg'&&regTouched.email&&!!regErrors.email} aria-describedby={mode==='reg'?'reg-email-hint':undefined} required/>
              {mode==='reg'&&<div className="auth-field-hint"><small id="reg-email-hint" className={`auth-validation ${regTouched.email?(regErrors.email?'is-error':'is-success'):''}`}>{regTouched.email?(regErrors.email||'Email заполнен правильно.'):'Введите email в формате name@mail.kg.'}</small><b>{regValues.email.length}/190</b></div>}
            </div>}
            {mode!=='forgot' && <div className="field"><label>{mode==='reset' ? 'Новый пароль' : 'Пароль'}</label><input key={mode==='reg'?'reg-password':mode==='reset'?'reset-password':'login-password'} className={`input ${mode==='reg'&&regTouched.password?(regErrors.password?'is-invalid':'is-valid'):''}`} name="password" type="password" value={mode==='reg'?regValues.password:undefined} onChange={mode==='reg'?e=>updateRegistration('password',e.target.value):undefined} onBlur={mode==='reg'?()=>setRegTouched(v=>({...v,password:true})):undefined} placeholder="••••••••••" minLength={10} autoComplete={mode==='login'?'current-password':'new-password'} aria-invalid={mode==='reg'&&regTouched.password&&!!regErrors.password} aria-describedby={mode==='reg'?'reg-password-hint':undefined} required/>{mode==='reg'&&<div id="reg-password-hint" className={`auth-password-hint ${regTouched.password&&regErrors.password?'is-error':regValues.password.length>=10?'is-success':''}`}><span><Icon name={regValues.password.length>=10?'checkCircle':'lock'} size={14}/> Не менее 10 символов</span><b>{regValues.password.length}/10</b></div>}</div>}
            {mode==='reset' && <div className="field"><label>Повторите пароль</label><input className="input" name="repeat_password" type="password" placeholder="••••••••" required/></div>}
            {authError && <div className="note note--danger" style={{margin:0}}>{authError}</div>}
            {authMessage && <div className="note" style={{margin:0}}>{authMessage}</div>}
            <button className="btn btn-primary btn-block btn-lg" type="submit" disabled={sending}>
              {sending
                ? 'Проверяю…'
                : mode==='login'
                  ? 'Войти'
                  : mode==='reg'
                    ? 'Зарегистрироваться'
                    : mode==='forgot'
                      ? 'Отправить ссылку'
                      : 'Сохранить пароль'} <Icon name="arrowRight"/>
            </button>
          </form>
          <div className="auth__alt">
            {mode==='login' && <>Нет аккаунта? <button onClick={()=>switchMode('reg')}>Зарегистрироваться</button></>}
            {mode==='reg' && <>Уже есть аккаунт? <button onClick={()=>switchMode('login')}>Войти</button></>}
            {mode==='forgot' && <>Вспомнили пароль? <button onClick={()=>switchMode('login')}>Войти</button></>}
            {mode==='reset' && <>Нужна обычная форма входа? <button onClick={()=>switchMode('login')}>Вернуться ко входу</button></>}
          </div>
          {mode==='login' && <div className="auth__alt" style={{marginTop:10}}><button onClick={()=>switchMode('forgot')}>Забыли пароль?</button></div>}
          <button className="auth__home" onClick={()=>go('home')}><Icon name="chevLeft" size={14}/> На главную</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Payment, Login, QR });