/* ===== Test flow + cabinet subpages ===== */
const D5 = window.DATA;

function Test({ id, go, onResult, enroll=[] }){
  const c = D5.courses.find(x=>x.id===id)||D5.courses[0];
  const qs = D5.tests[id] || [];
  const enrollment=enroll.find(item=>item.id===id)||{progress:0,completedLessons:null};
  const lessonCount=(c.modules||[]).reduce((total,module)=>total+(module.lessons||[]).length,0);
  const completedCount=Array.isArray(enrollment.completedLessons)
    ? new Set(enrollment.completedLessons.filter(index=>Number.isInteger(index)&&index>=0&&index<lessonCount)).size
    : (enrollment.progress>=100?lessonCount:0);
  const [stage,setStage]=useState('intro'); // intro | quiz | result
  const [idx,setIdx]=useState(0);
  const [answers,setAnswers]=useState({});
  const [picked,setPicked]=useState(null);
  const [result,setResult]=useState(null);
  const [busy,setBusy]=useState(false);
  const [error,setError]=useState('');
  const score = Number(result?.score||0);
  const passed = !!result?.passed;

  if(!qs.length) return <div className="test-wrap"><div className="test-card card center"><h1>Тест пока не опубликован</h1><p className="muted" style={{marginTop:10}}>Администратор ещё не добавил вопросы для этого курса.</p><button className="btn btn-primary" style={{marginTop:20}} onClick={()=>go('player',id)}>Вернуться к урокам</button></div></div>;
  if(lessonCount>0&&completedCount<lessonCount) return <div className="test-wrap"><div className="test-card card center"><div className="ic-badge ic-badge--lg" style={{margin:'0 auto'}}><Icon name="book" size={30}/></div><h1 style={{fontSize:30,marginTop:20}}>Сначала завершите уроки</h1><p className="muted" style={{marginTop:10}}>До аттестации осталось пройти {lessonCount-completedCount} из {lessonCount} уроков курса.</p><button className="btn btn-primary" style={{marginTop:20}} onClick={()=>go('player',id)}>Продолжить обучение <Icon name="arrowRight" size={16}/></button></div></div>;

  async function submit(next){
    setBusy(true);setError('');
    try{
      const ordered=qs.map((_,i)=>Number.isInteger(next[i])?next[i]:-1);
      const response=await fetch('api/tests.php',{
        method:'POST',
        credentials:'same-origin',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({course_id:id,answers:ordered}),
      });
      const data=await response.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
      if(!response.ok||data.ok===false)throw new Error(data.error||`HTTP ${response.status}`);
      setResult(data);
      onResult&&onResult(id,data.score);
      setStage('result');
    }catch(e){setError(e.message||'Не удалось проверить тест');}
    finally{setBusy(false);}
  }

  function choose(){
    if(picked==null) return;
    const next={...answers,[idx]:picked};
    setAnswers(next);
    if(idx<qs.length-1){ setIdx(idx+1); setPicked(next[idx+1]??null); }
    else submit(next);
  }

  if(stage==='intro') return (
    <div className="test-wrap">
      <div className="test-card card center">
        <div className="ic-badge ic-badge--lg" style={{margin:'0 auto'}}><Icon name="award" size={30}/></div>
        <h1 style={{fontSize:30,marginTop:20}}>Аттестация по курсу</h1>
        <p className="muted" style={{fontSize:16,marginTop:8}}>«{c.title}»</p>
        <div className="test-meta">
          <div><b>{qs.length}</b><span>вопросов</span></div>
          <div><b>70%</b><span>порог сдачи</span></div>
          <div><b>∞</b><span>попыток</span></div>
        </div>
        <p className="muted" style={{maxWidth:440,margin:'0 auto 24px'}}>Выберите один правильный вариант в каждом вопросе. Результат сохранится в вашем личном кабинете.</p>
        <div className="row gap12" style={{justifyContent:'center'}}>
          <button className="btn btn-ghost btn-lg" onClick={()=>go('player',id)}>К урокам</button>
          <button className="btn btn-green btn-lg" onClick={()=>setStage('quiz')}>Начать тест <Icon name="arrowRight"/></button>
        </div>
      </div>
    </div>
  );

  if(stage==='quiz'){
    const q=qs[idx];
    return (
      <div className="test-wrap">
        <div className="test-card card">
          <div className="spread" style={{marginBottom:18}}>
            <span className="muted" style={{fontWeight:700,fontSize:13}}>Вопрос {idx+1} из {qs.length}</span>
            <button className="back" onClick={()=>go('player',id)}><Icon name="close" size={15}/> Выйти</button>
          </div>
          <div className="bar" style={{marginBottom:26}}><i style={{width:((idx)/qs.length*100)+'%'}}></i></div>
          <h2 style={{fontSize:24,marginBottom:24}}>{q.q}</h2>
          {q.image&&<img src={q.image} alt="Изображение к вопросу" style={{display:'block',width:'100%',maxHeight:420,objectFit:'contain',borderRadius:16,margin:'-8px 0 24px',background:'#f2f7f5',border:'1px solid rgba(10,60,80,.12)'}}/>}
          <div className="stack" style={{gap:12}}>
            {q.a.map((a,i)=>(
              <button key={i} className={`opt ${picked===i?'opt--on':''}`} onClick={()=>setPicked(i)}>
                <span className="opt__dot">{String.fromCharCode(65+i)}</span>
                <span style={{flex:1,textAlign:'left'}}>{q.answerImages?.[i]&&<img src={q.answerImages[i]} alt={`Вариант ${String.fromCharCode(65+i)}`} style={{display:'block',width:'100%',maxWidth:360,maxHeight:240,objectFit:'contain',borderRadius:12,marginBottom:a?10:0,background:'#fff'}}/>}{a}</span>
                {picked===i && <Icon name="check" size={18} style={{color:'var(--green-600)'}}/>}
              </button>
            ))}
          </div>
          <div className="spread" style={{marginTop:28}}>
            <button className="btn btn-ghost" disabled={idx===0} style={{opacity:idx===0 ? .4 : 1}} onClick={()=>{setIdx(idx-1);setPicked(answers[idx-1]??null);}}><Icon name="chevLeft" size={16}/> Назад</button>
            <button className="btn btn-primary" disabled={picked==null||busy} style={{opacity:picked==null?.5:1}} onClick={choose}>{busy?'Проверяем…':idx===qs.length-1?'Завершить':'Далее'} <Icon name="arrowRight" size={16}/></button>
          </div>
          {error&&<div className="note note--danger" style={{marginTop:16}}>{error}</div>}
        </div>
      </div>
    );
  }

  // result
  return (
    <div className="test-wrap">
      <div className="test-card card center">
        <div className={`result-ring ${passed?'pass':'fail'}`}><span>{score}%</span></div>
        <h1 style={{fontSize:30,marginTop:22}}>{passed?'Поздравляем, сдано!':'Почти получилось'}</h1>
        <p className="muted" style={{fontSize:16,marginTop:8,maxWidth:420,marginInline:'auto'}}>
          {passed
            ? `Вы успешно прошли аттестацию по курсу «${c.title}». Сертификат доступен в личном кабинете.`
            : `Нужно набрать минимум 70%. Повторите материалы и попробуйте ещё раз.`}
        </p>
        <div className="result-detail">
          {qs.map((q,i)=>{
            const ok=!!result?.results?.[i];
            return <div key={i} className="row gap8" style={{fontSize:14}}><Icon name={ok?'checkCircle':'close'} size={16} style={{color:ok?'var(--green-600)':'#C0463B',flexShrink:0}}/> <span style={{flex:1,textAlign:'left'}}>{q.q}</span></div>;
          })}
        </div>
        <div className="row gap12" style={{justifyContent:'center',marginTop:8}}>
          {passed
            ? <><button className="btn btn-ghost btn-lg" onClick={()=>go('cab-certs')}>Сертификат</button><button className="btn btn-green btn-lg" onClick={()=>go('cabinet')}>В кабинет <Icon name="arrowRight"/></button></>
            : <><button className="btn btn-ghost btn-lg" onClick={()=>go('player',id)}>К урокам</button><button className="btn btn-primary btn-lg" onClick={()=>{setStage('quiz');setIdx(0);setPicked(null);setAnswers({});setResult(null);setError('');}}>Пройти заново</button></>}
        </div>
      </div>
    </div>
  );
}

/* ---- simple cabinet subpages ---- */
function CabMaterials({ enroll, go }){
  const [viewing,setViewing]=useState(null);
  const open = enroll.filter(e=>e.access==='open').map(e=>D5.courses.find(c=>c.id===e.id)).filter(Boolean);
  const openWithMaterials = open.map(course=>({
    ...course,
    materials: Array.isArray(course.materials) ? course.materials.filter(item=>item && item.title && item.src) : [],
  }));
  const viewingExtension=String(viewing?.material?.src||'').split(/[?#]/)[0].split('.').pop().toLowerCase();
  const viewingPreviewPath=viewingExtension==='docx' || viewingExtension==='pptx'
    ? String(viewing.material.src).replace(/\.(?:docx|pptx)([?#].*)?$/i,'-preview.pdf')
    : String(viewing?.material?.src||'');
  const viewingSrc=viewing
    ? courseMediaUrl(viewing.course.id,viewingPreviewPath)
    : '';
  return (
    <div className="cab-page">
      <h1 style={{fontSize:30}}>Учебные материалы</h1>
      <p className="muted" style={{marginBottom:24}}>Конспекты, презентации и сценарии симулятора по вашим курсам.</p>
      {openWithMaterials.every(course=>course.materials.length===0) ? (
        <div className="empty">Пока нет загруженных материалов. Администратор сможет добавить их для ваших курсов в админке.</div>
      ) : (
        <div className="stack" style={{gap:22}}>
          {openWithMaterials.map(course=>(
            <div key={course.id} className="card" style={{padding:22}}>
              <div className="spread wrapf" style={{marginBottom:14,gap:10}}>
                <div>
                  <h3 style={{fontSize:20}}>{course.title}</h3>
                  <p className="muted" style={{fontSize:14,marginTop:4}}>Материалы курса, доступные после подтверждения оплаты.</p>
                </div>
                <span className="badge navy">{course.materials.length} материал(ов)</span>
              </div>
              {course.materials.length===0 ? (
                <div className="empty" style={{padding:16}}>Для этого курса материалы пока не добавлены.</div>
              ) : (
                <div className="stack" style={{gap:12}}>
                  {course.materials.map((material,index)=>{
                    const protectedSrc=material.type==='link' ? material.src : courseMediaUrl(course.id,material.src);
                    const lessonOnly=/\.(?:pdf|mp4)(?:[#?].*)?$/i.test(String(material.src||''));
                    const cabinetPreview=/\.(?:m4a|docx|pptx)(?:[#?].*)?$/i.test(String(material.src||''));
                    return <div key={material.id || `${course.id}-${index}`} className="mat card">
                      <div className="ic-badge"><Icon name={material.type==='link' ? 'globe' : 'doc'} size={18}/></div>
                      <div style={{flex:1}}>
                        <b style={{fontSize:15}}>{material.title}</b>
                        <div className="muted" style={{fontSize:13}}>{material.meta || (material.type==='link' ? 'Внешняя ссылка' : 'Файл курса')}</div>
                      </div>
                      {lessonOnly
                        ? <button className="btn btn-ghost btn-sm" onClick={()=>go('player',course.id)}><Icon name="play" size={15}/> В уроке</button>
                        : cabinetPreview
                          ? <button className="btn btn-ghost btn-sm" onClick={()=>setViewing({course,material})}><Icon name={/\.m4a(?:[#?].*)?$/i.test(material.src)?'play':'eye'} size={15}/> Просмотреть</button>
                        : <a className="btn btn-ghost btn-sm" href={protectedSrc} target="_blank" rel="noreferrer"><Icon name="arrowUpRight" size={15}/> Открыть</a>}
                    </div>;
                  })}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
      {viewing && (
        <div className="modal" onClick={()=>setViewing(null)}>
          <div className="modal__box card" onClick={e=>e.stopPropagation()} style={{width:'min(1040px,calc(100vw - 32px))',maxWidth:1040,maxHeight:'calc(100vh - 32px)',overflow:'auto'}}>
            <div className="spread wrapf" style={{gap:12,marginBottom:16}}>
              <div>
                <span className="eyebrow">{viewing.course.title}</span>
                <h2 style={{fontSize:21,marginTop:6}}>{viewing.material.title}</h2>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={()=>setViewing(null)}><Icon name="close" size={14}/> Закрыть</button>
            </div>
            {viewingExtension==='m4a'
              ? <div className="card" style={{padding:24,background:'#eef5f2'}} onContextMenu={e=>e.preventDefault()}>
                  <audio src={viewingSrc} controls controlsList="nodownload" style={{width:'100%'}}/>
                </div>
              : <PdfLessonViewer src={viewingSrc} title={viewing.material.title}/>}
          </div>
        </div>
      )}
    </div>
  );
}

function CabCerts({ enroll }){
  const done = enroll.filter(e=>e.testScore!=null && e.testScore>=70).map(e=>({...e,c:D5.courses.find(c=>c.id===e.id)}));
  const [downloading,setDownloading]=useState('');
  const [downloadError,setDownloadError]=useState('');

  async function downloadCertificate(courseId){
    setDownloading(courseId);
    setDownloadError('');
    try{
      const response=await fetch(`api/certificate.php?course_id=${encodeURIComponent(courseId)}`,{credentials:'same-origin'});
      if(!response.ok){
        const data=await response.json().catch(()=>null);
        throw new Error(data?.error||`Не удалось скачать сертификат (HTTP ${response.status})`);
      }
      const blob=await response.blob();
      const disposition=response.headers.get('Content-Disposition')||'';
      const encodedName=disposition.match(/filename\*=UTF-8''([^;]+)/i)?.[1];
      const fallbackName=`certificate-${courseId}.svg`;
      const filename=encodedName ? decodeURIComponent(encodedName) : fallbackName;
      const url=URL.createObjectURL(blob);
      const link=document.createElement('a');
      link.href=url;
      link.download=filename;
      document.body.appendChild(link);
      link.click();
      link.remove();
      setTimeout(()=>URL.revokeObjectURL(url),1000);
    }catch(error){
      setDownloadError(error.message||'Не удалось скачать сертификат. Попробуйте ещё раз.');
    }finally{
      setDownloading('');
    }
  }

  return (
    <div className="cab-page">
      <h1 style={{fontSize:30}}>Сертификаты</h1>
      <p className="muted" style={{marginBottom:24}}>Документы, полученные после успешной аттестации.</p>
      {done.length===0 ? <div className="empty">Пока нет сертификатов. Завершите курс и сдайте тест.</div> : (
        <div className="grid g2">
          {done.map(d=>(
            <div key={d.id} className="cert card">
              <div className="cert__top"><Logo variant="mark" height={32}/><span className="badge green">Аттестация пройдена</span></div>
              <h3 style={{fontSize:20,marginTop:14}}>{d.c.title}</h3>
              <p className="muted" style={{fontSize:14}}>Сертификат Лаборатории БПЛА КРСУ</p>
              <div className="spread" style={{marginTop:18}}>
                <div><div className="muted" style={{fontSize:12}}>Результат</div><b style={{fontSize:18,color:'var(--green-700)'}}>{d.testScore}%</b></div>
                <button className="btn btn-ghost btn-sm" disabled={downloading===d.id} onClick={()=>downloadCertificate(d.id)}><Icon name="doc" size={15}/> {downloading===d.id?'Готовим…':'Скачать'}</button>
              </div>
            </div>
          ))}
        </div>
      )}
      {downloadError&&<div className="note note--danger" style={{marginTop:16}}>{downloadError}</div>}
    </div>
  );
}

const PROFILE_COUNTRIES = [
  {value:'KG',label:'Кыргызстан',phone:'+996',phoneLength:9,phoneHint:'9 цифр',documentHint:'2 буквы и 7 цифр, например AN1234567'},
  {value:'RU',label:'Россия',phone:'+7',phoneLength:10,phoneHint:'10 цифр',documentHint:'10 цифр'},
  {value:'KZ',label:'Казахстан',phone:'+7',phoneLength:10,phoneHint:'10 цифр',documentHint:'9 цифр'},
  {value:'UZ',label:'Узбекистан',phone:'+998',phoneLength:9,phoneHint:'9 цифр',documentHint:'2 буквы и 7 цифр'},
  {value:'TJ',label:'Таджикистан',phone:'+992',phoneLength:9,phoneHint:'9 цифр',documentHint:'1 буква и 8 цифр'},
  {value:'OTHER',label:'Другая страна',phone:'+',phoneLength:null,phoneHint:'от 7 до 15 цифр вместе с кодом страны',documentHint:'от 4 до 30 букв или цифр'},
];

const PROFILE_DOCUMENT_PATTERNS = {
  KG:/^\p{L}{2}\d{7}$/u,
  RU:/^\d{10}$/,
  KZ:/^\d{9}$/,
  UZ:/^\p{L}{2}\d{7}$/u,
  TJ:/^\p{L}\d{8}$/u,
  OTHER:/^[\p{L}\p{N} -]{4,30}$/u,
};

const PROFILE_MAX_BIRTH_DATE = '2009-12-31';

function profileDateYearsAgo(years){
  const date=new Date();
  date.setFullYear(date.getFullYear()-years);
  const month=String(date.getMonth()+1).padStart(2,'0');
  const day=String(date.getDate()).padStart(2,'0');
  return `${date.getFullYear()}-${month}-${day}`;
}

async function cabinetAuthRequest(payload){
  const response=await fetch('api/auth.php',{
    method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload),
  });
  const data=await response.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
  if(!response.ok||data.ok===false)throw new Error(data.error||`HTTP ${response.status}`);
  return data;
}

function CabSettings({ user, onUserChange }){
  const userId = `KRSU-${String(user.id||1).padStart(6,'0')}`;
  const [profile,setProfile]=useState({
    certificate_name:user.certificate_name||user.name||'',
    birth_date:user.birth_date||'',
    citizenship:user.citizenship||'KG',
    document_number:user.document_number||'',
    phone_country:user.phone_country||'KG',
    phone_number:user.phone_number||'',
  });
  const [profileBusy,setProfileBusy]=useState(false);
  const [profileMessage,setProfileMessage]=useState(null);
  const [password,setPassword]=useState({current:'',next:'',repeat:''});
  const [passwordBusy,setPasswordBusy]=useState(false);
  const [passwordMessage,setPasswordMessage]=useState(null);
  const maxBirthDate=PROFILE_MAX_BIRTH_DATE;
  const citizenship=PROFILE_COUNTRIES.find(item=>item.value===profile.citizenship)||PROFILE_COUNTRIES[0];
  const phoneCountry=PROFILE_COUNTRIES.find(item=>item.value===profile.phone_country)||PROFILE_COUNTRIES[0];

  function updateProfile(key,value){
    setProfile(current=>({...current,[key]:value}));
    setProfileMessage(null);
  }

  function validateProfile(){
    if(profile.certificate_name.trim().length<5)return 'Введите полное ФИО для сертификата.';
    if(!profile.birth_date)return 'Укажите дату рождения.';
    const today=profileDateYearsAgo(0);
    if(profile.birth_date>today)return 'Дата рождения не может превышать текущую дату.';
    if(profile.birth_date>maxBirthDate)return 'Дата рождения должна быть раньше 2010 года.';
    const documentNumber=profile.document_number.trim().toUpperCase();
    if(!PROFILE_DOCUMENT_PATTERNS[profile.citizenship]?.test(documentNumber))return `Номер документа: ${citizenship.documentHint}.`;
    if(!/^\d+$/.test(profile.phone_number))return 'Телефон должен содержать только цифры.';
    if(phoneCountry.phoneLength!==null&&profile.phone_number.length!==phoneCountry.phoneLength)return `Для страны «${phoneCountry.label}» телефон должен содержать ${phoneCountry.phoneHint}.`;
    if(phoneCountry.phoneLength===null&&(profile.phone_number.length<7||profile.phone_number.length>15))return 'Международный номер должен содержать от 7 до 15 цифр.';
    return '';
  }

  async function saveProfile(event){
    event.preventDefault();
    const validationError=validateProfile();
    if(validationError){setProfileMessage({type:'error',text:validationError});return;}
    setProfileBusy(true);setProfileMessage(null);
    try{
      const result=await cabinetAuthRequest({action:'save_profile_details',...profile,certificate_name:profile.certificate_name.trim(),document_number:profile.document_number.trim().toUpperCase()});
      if(result.user)onUserChange&&onUserChange(result.user);
      setProfile(current=>result.user?{
        certificate_name:result.user.certificate_name||current.certificate_name,
        birth_date:result.user.birth_date||current.birth_date,
        citizenship:result.user.citizenship||current.citizenship,
        document_number:result.user.document_number||current.document_number.trim().toUpperCase(),
        phone_country:result.user.phone_country||current.phone_country,
        phone_number:result.user.phone_number||current.phone_number,
      }:{...current,document_number:current.document_number.trim().toUpperCase()});
      setProfileMessage({type:'success',text:result.message||'Данные профиля сохранены.'});
    }catch(error){setProfileMessage({type:'error',text:error.message||'Не удалось сохранить данные.'});}
    finally{setProfileBusy(false);}
  }

  async function changePassword(event){
    event.preventDefault();
    if(password.next.length<10){setPasswordMessage({type:'error',text:'Новый пароль должен быть не короче 10 символов.'});return;}
    if(password.next!==password.repeat){setPasswordMessage({type:'error',text:'Новый пароль и повтор не совпадают.'});return;}
    if(password.current===password.next){setPasswordMessage({type:'error',text:'Новый пароль должен отличаться от текущего.'});return;}
    setPasswordBusy(true);setPasswordMessage(null);
    try{
      await cabinetAuthRequest({action:'change_password',current_password:password.current,new_password:password.next});
      setPassword({current:'',next:'',repeat:''});
      setPasswordMessage({type:'success',text:'Пароль успешно изменён.'});
    }catch(error){setPasswordMessage({type:'error',text:error.message||'Не удалось изменить пароль.'});}
    finally{setPasswordBusy(false);}
  }

  return (
    <div className="cab-page">
      <h1 style={{fontSize:30}}>Настройки профиля</h1>
      <p className="muted" style={{marginBottom:24}}>Личные данные и параметры аккаунта. Эти данные используются для оформления сертификата и идентификации пользователя.</p>
      <div className="card" style={{padding:28,maxWidth:680}}>
        <div className="row gap16" style={{marginBottom:24}}>
          <Avatar name={user.name} size={64} color="var(--green-600)"/>
          <div><b style={{fontSize:18}}>{user.name}</b><div className="muted">{user.email}</div></div>
        </div>
        <form className="stack" style={{gap:14}} onSubmit={saveProfile} noValidate>
          <div className="note" style={{marginBottom:2}}>
            <Icon name="shield" size={18} style={{color:'var(--green-600)',flexShrink:0}}/>
            <span><b>Обязательный блок для сертификата:</b> заполните поля ниже полностью. Без них сертификат/диплом не выдаётся.</span>
          </div>
          <div className="field"><label>ID пользователя</label><input className="input" value={userId} readOnly/></div>
          <div className="field"><label>ФИО для сертификата (полностью)</label><input className="input" value={profile.certificate_name} onChange={e=>updateProfile('certificate_name',e.target.value)} placeholder="Иванов Иван Иванович" maxLength={190} autoComplete="name" required/></div>
          <div className="field"><label>Дата рождения</label><input className="input" type="date" value={profile.birth_date} onChange={e=>updateProfile('birth_date',e.target.value)} max={maxBirthDate} required/><small className="muted">Можно указать дату не позднее 31.12.2009.</small></div>
          <div className="field"><label>Гражданство</label><select className="input" value={profile.citizenship} onChange={e=>{updateProfile('citizenship',e.target.value);updateProfile('document_number','');}}>{PROFILE_COUNTRIES.map(item=><option key={item.value} value={item.value}>{item.label}</option>)}</select></div>
          <div className="field"><label>Номер документа (паспорт/ID)</label><input className="input" value={profile.document_number} onChange={e=>updateProfile('document_number',e.target.value)} placeholder={citizenship.documentHint} maxLength={30} autoCapitalize="characters" required/><small className="muted">Формат для страны «{citizenship.label}»: {citizenship.documentHint}.</small></div>
          <div className="field"><label>Email</label><input className="input" type="email" value={user.email} readOnly/><small className="muted">Email используется как логин аккаунта.</small></div>
          <div className="field"><label>Страна номера телефона</label><select className="input" value={profile.phone_country} onChange={e=>{updateProfile('phone_country',e.target.value);updateProfile('phone_number','');}}>{PROFILE_COUNTRIES.map(item=><option key={item.value} value={item.value}>{item.label} ({item.phone})</option>)}</select></div>
          <div className="field"><label>Телефон</label><div className="row gap8"><span className="input" style={{width:88,flexShrink:0,display:'flex',alignItems:'center'}}>{phoneCountry.phone}</span><input className="input" type="tel" inputMode="numeric" value={profile.phone_number} onChange={e=>updateProfile('phone_number',e.target.value)} placeholder={phoneCountry.phoneHint} maxLength={15} autoComplete="tel-national" required/></div><small className="muted">Введите только цифры: {phoneCountry.phoneHint}.</small></div>
          {profileMessage&&<div className={`note ${profileMessage.type==='error'?'note--danger':''}`}>{profileMessage.text}</div>}
          <button className="btn btn-primary" type="submit" disabled={profileBusy} style={{alignSelf:'flex-start'}}>{profileBusy?'Сохраняю…':'Сохранить изменения'}</button>
        </form>
      </div>
      <div className="card" style={{padding:28,maxWidth:680,marginTop:20}}>
        <h2 style={{fontSize:22,marginBottom:6}}>Смена пароля</h2>
        <p className="muted" style={{marginBottom:20}}>Новый пароль должен содержать не менее 10 символов.</p>
        <form className="stack" style={{gap:14}} onSubmit={changePassword} noValidate>
          <div className="field"><label>Текущий пароль</label><input className="input" type="password" value={password.current} onChange={e=>{setPassword(v=>({...v,current:e.target.value}));setPasswordMessage(null);}} autoComplete="current-password" required/></div>
          <div className="field"><label>Новый пароль</label><input className="input" type="password" value={password.next} onChange={e=>{setPassword(v=>({...v,next:e.target.value}));setPasswordMessage(null);}} minLength={10} autoComplete="new-password" required/></div>
          <div className="field"><label>Повторите новый пароль</label><input className="input" type="password" value={password.repeat} onChange={e=>{setPassword(v=>({...v,repeat:e.target.value}));setPasswordMessage(null);}} minLength={10} autoComplete="new-password" required/></div>
          {passwordMessage&&<div className={`note ${passwordMessage.type==='error'?'note--danger':''}`}>{passwordMessage.text}</div>}
          <button className="btn btn-green" type="submit" disabled={passwordBusy} style={{alignSelf:'flex-start'}}>{passwordBusy?'Меняю…':'Изменить пароль'}</button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { Test, CabMaterials, CabCerts, CabSettings });