// app.jsx — мини-апп «мера.»
// IOSDevice + home/test/result flow for Beck, PSS-10, Clarity

const { useState, useEffect, useRef, useCallback } = React;
const { IOSDevice } = window;
const { BECK, PSS, PSS_OPTS, PSS_REVERSE, interpBeck, interpPss, interpClarity } = window.MERA_DATA;

const EMBED = /[?&]embed=1/.test(location.search) || (window.self !== window.top);

// ─── HOME ─────────────────────────────────────────────────
function Home({ onPick, results }){
  const tests = [
    { id:'beck',    code:'A', title:<>шкала <em>бека</em></>, info:'21 пункт · ~7 мин', n:21, done:!!results.beck },
    { id:'pss',     code:'B', title:<>стресс · <em>pss</em>-10</>, info:'10 вопросов · ~3 мин', n:10, done:!!results.pss },
    { id:'clarity', code:'C', title:<>ясность · <em>vas</em></>, info:'1 шкала · ~1 мин', n:1, done:!!results.clarity },
  ];
  const doneCount = Object.values(results).filter(Boolean).length;
  const last = results.last;
  return (
    <div className="app">
      <div className="home">
        <div className="greet">сегодня · <b>{new Date().toLocaleDateString('ru-RU',{day:'numeric',month:'long'})}</b></div>
        <h2>тихая <em>проверка</em><br/>самочувствия<b>.</b></h2>
        <p className="sub">Три шкалы — депрессия, стресс, ясность мышления. Без советов, без баллов в красном. Просто точка отсчёта.</p>

        <div className="stats">
          <div className="st"><b>{doneCount}/3</b><span>сегодня</span></div>
          <div className="st"><b>14d</b><span>стрик</span></div>
          <div className="st"><b>v0.1</b><span>версия</span></div>
        </div>

        <div className="lab"><span>шкалы</span><b>3 · готовые</b></div>
        <div className="tests-list">
          {tests.map(t => (
            <button key={t.id} className={'test-row ' + (t.done?'done':'')} onClick={() => onPick(t.id)}>
              <div className="lt">{t.code}<small>{t.done?'✓ done':'start'}</small></div>
              <div className="rt">
                <h3>{t.title}</h3>
                <div className="info"><span>{t.info}</span><b>{t.n} ↗</b></div>
              </div>
            </button>
          ))}
        </div>

        {last && (
          <>
            <div className="lab"><span>последний</span><b>{last.label}</b></div>
            <div className="last">
              <div className="h"><span>{last.kicker}</span><b>{last.when}</b></div>
              <h4>{last.title}</h4>
              <div className="bars">
                {last.bars.map((b,i) => (
                  <i key={i} className={b.cls||''} style={{height: (b.h*100)+'%'}} />
                ))}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ─── TEST COVER (intro for a single test) ─────────────────
function Cover({ test, onStart, onBack }){
  const meta = {
    beck:    { code:'A', title:<>шкала <em>бека</em></>, n:'21', kind:'bdi', desc:'В каждой группе — четыре утверждения (0–3). Выберите то, что точнее всего описывает Вас на этой неделе и сегодня.', m:'~7 мин', score:'0–63', q:'21 группа', opt:'4 пункта' },
    pss:     { code:'B', title:<>воспринимаемый <em>стресс</em></>, n:'10', kind:'pss-10', desc:'Десять вопросов о прошедшем месяце. Пятибалльная шкала: никогда — почти никогда — иногда — довольно часто — часто.', m:'~3 мин', score:'0–40', q:'10 вопр.', opt:'5 опций' },
    clarity: { code:'C', title:<>ясность <em>мышления</em></>, n:'1',  kind:'vas',    desc:'Визуальная аналоговая шкала. Передвиньте бегунок: от полного тумана (0) до исключительной ясности (10).', m:'~1 мин', score:'0–10', q:'1 шкала', opt:'0–10' },
  }[test];
  return (
    <div className="app">
      <div className="app-bar">
        <button className="back" onClick={onBack}><span className="ar">←</span> назад</button>
        <span className="mid">{meta.code} · {meta.kind}</span>
        <span>{meta.m}</span>
      </div>
      <div className="cover">
        <div className="ckick">{meta.code} · шкала · {meta.kind}</div>
        <h2>{meta.title}</h2>
        <p className="desc">{meta.desc}</p>
        <div className="grid2">
          <div className="gc"><div className="h">время</div><div className="v">{meta.m.replace('~','')}</div></div>
          <div className="gc"><div className="h">диапазон</div><div className="v"><em>{meta.score}</em></div></div>
          <div className="gc"><div className="h">вопросов</div><div className="v">{meta.q}</div></div>
          <div className="gc"><div className="h">опций</div><div className="v">{meta.opt}</div></div>
        </div>
        <div className="instr">
          <b>// прежде чем начать:</b><br/>
          Это <b>self-report</b>. Это не диагноз и не замена консультации специалиста — это точка отсчёта, которую полезно сравнить через неделю.
        </div>
        <div className="test-foot go" style={{padding:0,border:'none',marginTop:'auto'}}>
          <button className="btn primary" onClick={onStart}>начать →</button>
        </div>
      </div>
    </div>
  );
}

// ─── BECK & PSS multiple-choice test ──────────────────────
function ChoiceTest({ test, items, opts, onDone, onBack }){
  const [idx, setIdx] = useState(0);
  const [answers, setAnswers] = useState({}); // {id: opt index}

  const cur = items[idx];
  const sel = answers[cur.id];
  const isLast = idx === items.length - 1;

  function pick(o){
    setAnswers(a => ({...a, [cur.id]: o}));
  }
  function next(){
    if (isLast){
      // compute score
      let score = 0;
      if (test === 'beck'){
        for (const it of items){
          const v = answers[it.id] ?? 0;
          score += v;
        }
      } else {
        // PSS — reverse positive items
        for (const it of items){
          const raw = answers[it.id] ?? 0;
          score += PSS_REVERSE.has(it.id) ? (4 - raw) : raw;
        }
      }
      onDone(score, answers);
    } else {
      setIdx(idx + 1);
    }
  }
  function prev(){
    if (idx > 0) setIdx(idx - 1);
  }

  const code = test === 'beck' ? 'A · бек' : 'B · pss-10';
  const total = items.length;

  return (
    <div className="app">
      <div className="app-bar">
        <button className="back" onClick={onBack}><span className="ar">←</span> назад</button>
        <span className="mid">{code}</span>
        <span>{idx+1}/{total}</span>
      </div>
      <div className="test-scr">
        <div className="test-prog">
          <div className="pl">
            <span>прогресс</span>
            <span className="pl-num"><b>{idx+1}</b> / {total}</span>
          </div>
          <div className="pbar"><i style={{width: ((idx+1)/total*100)+'%'}}/></div>
        </div>
        <div className="test-q">
          <div className="qn">
            {test === 'beck' ? `группа ${String(cur.id).padStart(2,'0')} · ${cur.title}` : `вопрос ${String(cur.id).padStart(2,'0')}`}
          </div>
          <h3>{test === 'beck' ? <>выберите <em>одно</em> утверждение, которое лучше всего описывает <b style={{fontWeight:400, borderBottom:'2px solid var(--moss)'}}>эту неделю</b> и сегодня</> : cur.text}</h3>
          {test === 'beck' && <p className="qdesc"><b>группа {cur.id}</b> — «{cur.short}»</p>}
          <div className="opts">
            {(test === 'beck' ? cur.opts : opts).map((o, i) => {
              const txt = test === 'beck'
                ? o.replace(/^\d+ · /,'')
                : o.replace(/^\d+ · /,'');
              return (
                <button key={i} className={'opt ' + (sel === i ? 'on' : '')} onClick={() => pick(i)}>
                  <span className="num">{i}</span>
                  <span>{txt}</span>
                </button>
              );
            })}
          </div>
        </div>
        <div className="test-foot">
          {idx > 0 && <button className="btn prev" onClick={prev}>← пред</button>}
          <button className="btn primary" onClick={next} disabled={sel === undefined}>
            {isLast ? 'готово →' : 'дальше →'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── CLARITY VAS ──────────────────────────────────────────
function ClarityTest({ onDone, onBack }){
  const [val, setVal] = useState(5.0);
  const trackRef = useRef(null);

  const onPointer = useCallback((e) => {
    const track = trackRef.current;
    if (!track) return;
    const rect = track.getBoundingClientRect();
    const x = (e.clientX ?? e.touches?.[0]?.clientX) - rect.left;
    const pct = Math.max(0, Math.min(1, x / rect.width));
    setVal(Math.round(pct * 100) / 10); // 0.0 – 10.0
  }, []);

  function onDown(e){
    onPointer(e);
    const move = (ev) => onPointer(ev);
    const up = () => {
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', up);
    };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);
  }

  return (
    <div className="app">
      <div className="app-bar">
        <button className="back" onClick={onBack}><span className="ar">←</span> назад</button>
        <span className="mid">C · ясность · vas</span>
        <span>1 / 1</span>
      </div>
      <div className="test-scr">
        <div className="slider-wrap">
          <p className="lead">насколько <em>ясно</em> вы<br/>мыслите <b style={{fontWeight:400, fontStyle:'italic', borderBottom:'2px solid var(--moss)'}}>прямо сейчас</b>?</p>

          <div className="val">{val.toFixed(1)}<small>из 10</small></div>

          <div className="slider" ref={trackRef} onPointerDown={onDown}>
            <div className="fill" style={{width: (val*10)+'%'}}/>
            <div className="knob" style={{left: (val*10)+'%'}}/>
          </div>
          <div className="ticks">
            {[0,1,2,3,4,5,6,7,8,9,10].map(n => <span key={n}>{n}</span>)}
          </div>
          <div className="ends">
            <span><b>0</b> · туман, спутанность</span>
            <span>чёткость · <b>10</b></span>
          </div>
        </div>
        <div className="test-foot">
          <button className="btn primary" onClick={() => onDone(val)}>сохранить →</button>
        </div>
      </div>
    </div>
  );
}

// ─── RESULT ───────────────────────────────────────────────
function Result({ test, score, answers, onBack }){
  if (test === 'beck'){
    const i = interpBeck(score);
    // Compute subscale breakdown (cognitive vs somatic): simplified
    const cognitive = [1,2,3,5,7,8,9,12,13,14].reduce((s,id) => s + (answers[id] ?? 0), 0);
    const somatic = [10,11,15,16,17,18,19,20,21].reduce((s,id) => s + (answers[id] ?? 0), 0);
    return (
      <div className="app">
        <div className="app-bar">
          <button className="back" onClick={onBack}><span className="ar">←</span> в начало</button>
          <span className="mid">A · бек · результат</span>
          <span>21/21</span>
        </div>
        <div className="result">
          <div className="rkick">результат · шкала бека</div>
          <h2>тон — <em>{i.lab}</em></h2>
          <div className="big-num">
            <span className="n">{score}</span>
            <span className="of">/ 63</span>
            <span className="lab"><b>{i.lab}</b>уровень<br/>симптомов</span>
          </div>
          <p className="interp">{i.desc}</p>
          <div className="r-chart">
            <div className="c"><div className="h">когнитивная</div><div className="v"><em>{cognitive}</em>/30</div></div>
            <div className="c"><div className="h">соматическая</div><div className="v"><em>{somatic}</em>/27</div></div>
          </div>
          <div className="meta"><span>self-report</span><span><b>{new Date().toLocaleDateString('ru-RU')}</b></span></div>
        </div>
        <div className="test-foot">
          <button className="btn primary" onClick={onBack}>← на главную</button>
        </div>
      </div>
    );
  }
  if (test === 'pss'){
    const i = interpPss(score);
    return (
      <div className="app">
        <div className="app-bar">
          <button className="back" onClick={onBack}><span className="ar">←</span> в начало</button>
          <span className="mid">B · pss-10 · результат</span>
          <span>10/10</span>
        </div>
        <div className="result">
          <div className="rkick">результат · воспринимаемый стресс</div>
          <h2>уровень — <em>{i.lab}</em></h2>
          <div className="big-num">
            <span className="n">{score}</span>
            <span className="of">/ 40</span>
            <span className="lab"><b>{i.lab}</b>стресс<br/>за месяц</span>
          </div>
          <p className="interp">{i.desc}</p>
          <div className="meta"><span>self-report</span><span><b>{new Date().toLocaleDateString('ru-RU')}</b></span></div>
        </div>
        <div className="test-foot">
          <button className="btn primary" onClick={onBack}>← на главную</button>
        </div>
      </div>
    );
  }
  // clarity
  const i = interpClarity(score);
  return (
    <div className="app">
      <div className="app-bar">
        <button className="back" onClick={onBack}><span className="ar">←</span> в начало</button>
        <span className="mid">C · ясность · результат</span>
        <span>1/1</span>
      </div>
      <div className="result">
        <div className="rkick">результат · ясность мышления</div>
        <h2>сейчас — <em>{i.lab}</em></h2>
        <div className="big-num">
          <span className="n">{score.toFixed(1)}</span>
          <span className="of">/ 10</span>
          <span className="lab"><b>{i.lab}</b>чёткость<br/>мыслей</span>
        </div>
        <p className="interp">{i.desc}</p>
        <div className="meta"><span>visual-analog</span><span><b>сейчас</b></span></div>
      </div>
      <div className="test-foot">
        <button className="btn primary" onClick={onBack}>← на главную</button>
      </div>
    </div>
  );
}

// ─── ROOT ─────────────────────────────────────────────────
function App({ initialTest }){
  // screen: 'home' | 'cover' | 'test' | 'result'
  const [screen, setScreen] = useState(initialTest && initialTest !== 'home' ? 'cover' : 'home');
  const [curTest, setCurTest] = useState(initialTest && initialTest !== 'home' ? initialTest : null);
  const [results, setResults] = useState({});
  const [lastScore, setLastScore] = useState(null);
  const [lastAnswers, setLastAnswers] = useState(null);

  // react to external tab change
  useEffect(() => {
    if (!initialTest) return;
    if (initialTest === 'home') {
      setScreen('home');
      setCurTest(null);
    } else {
      setCurTest(initialTest);
      setScreen('cover');
    }
  }, [initialTest]);

  const goHome = useCallback(() => { setScreen('home'); setCurTest(null); }, []);
  const startTest = useCallback(() => setScreen('test'), []);
  const pickTest = useCallback((id) => { setCurTest(id); setScreen('cover'); }, []);

  function finishTest(score, answers){
    setLastScore(score);
    setLastAnswers(answers);
    // save into results
    const now = new Date().toLocaleDateString('ru-RU',{day:'numeric',month:'short'});
    const codeMap = { beck:'бек', pss:'pss', clarity:'ясность' };
    let bars, label, title;
    if (curTest === 'beck'){
      const items = BECK.map(b => ({h: ((answers[b.id] ?? 0)/3) || 0.05}));
      bars = items.slice(0, 12).map((x,i) => ({...x, cls: i===6?'acc':''}));
      label = interpBeck(score).lab; title = `бек · ${score}/63`;
    } else if (curTest === 'pss'){
      const items = PSS.map(p => {
        const raw = answers[p.id] ?? 0;
        const v = PSS_REVERSE.has(p.id) ? (4 - raw) : raw;
        return {h: v/4 || 0.05, cls: PSS_REVERSE.has(p.id) ? 'm' : (v>=3?'acc':'')};
      });
      bars = items;
      label = interpPss(score).lab; title = `pss-10 · ${score}/40`;
    } else {
      bars = Array.from({length:10}, (_,i) => ({h: i < Math.round(score) ? 0.9 : 0.15, cls: i < Math.round(score) ? 'acc' : ''}));
      label = interpClarity(score).lab; title = `ясность · ${score.toFixed(1)}/10`;
    }
    setResults(r => ({
      ...r,
      [curTest]: { score, when: now },
      last: { kicker:`${codeMap[curTest]} · ${now}`, when: now, title, label, bars }
    }));
    setScreen('result');
  }

  let content;
  if (screen === 'home') content = <Home onPick={pickTest} results={results} />;
  else if (screen === 'cover') content = <Cover test={curTest} onStart={startTest} onBack={goHome} />;
  else if (screen === 'test'){
    if (curTest === 'beck')    content = <ChoiceTest test="beck" items={BECK} opts={null} onDone={finishTest} onBack={goHome} />;
    else if (curTest === 'pss') content = <ChoiceTest test="pss" items={PSS} opts={PSS_OPTS} onDone={finishTest} onBack={goHome} />;
    else                        content = <ClarityTest onDone={finishTest} onBack={goHome} />;
  }
  else content = <Result test={curTest} score={lastScore} answers={lastAnswers} onBack={goHome} />;

  return (
    <IOSDevice bare={EMBED} width={402} height={874} dark={false}>
      {content}
    </IOSDevice>
  );
}

// ─── MOUNT + tab wiring ───────────────────────────────────
const mount = document.getElementById('ios-mount');
const root = ReactDOM.createRoot(mount);

let curTab = 'home';
function render(){ root.render(<App initialTest={curTab} />); }
render();

// Tab clicks
document.querySelectorAll('#tabs .pg-tab').forEach(b => {
  b.addEventListener('click', () => {
    document.querySelectorAll('#tabs .pg-tab').forEach(x => x.classList.remove('active'));
    b.classList.add('active');
    curTab = b.dataset.test;
    updateNotes(curTab);
    render();
  });
});

// Notes panel
const NOTES = {
  home: [
    { tag:'A · home', title:<>главный <em>экран</em></>, p:<>Три шкалы карточками. Точка входа, статус-карта, последний замер для контекста.<br/>Без советов до результата — только название, время, число пунктов.</> },
    { tag:'паттерн', title:<>тихая <em>подача</em></>, p:<>Большой заголовок в Instrument Serif italic, мелкие мета-метки в JetBrains Mono. Все цифры — antomic display (Anton).</> },
  ],
  beck: [
    { tag:'A · бдi', title:<>21 <em>группа</em></>, p:<>В каждой группе — четыре утверждения (0–3). Выбирается одно, лучше всего описывающее <b>прошедшую неделю и сегодня</b>.</> },
    { tag:'подсчёт', title:<>сумма <em>баллов</em></>, p:<>Сумма по всем группам. Диапазон <b>0–63</b>: ≤9 — минимально, 10–15 — лёгкая, 16–19 — умеренная, 20–29 — выраженная, 30+ — тяжёлая.</> },
    { tag:'примечание', p:<>В девятой группе — суицидальные мысли. Если ответ ≥1, в продакшене показываем горячую линию. В прототипе это пропущено.</>, title:<>9-я <em>группа</em></> }
  ],
  pss: [
    { tag:'B · pss-10', title:<>10 <em>вопросов</em></>, p:<>Шкала воспринимаемого стресса. Спрашиваем о последнем месяце: пятибалльная сетка <b>никогда → часто</b> (0–4).</> },
    { tag:'reverse', title:<>обратные <em>пункты</em></>, p:<>Вопросы <b>4, 5, 7, 8</b> — о чувстве контроля. Считаются в обратном направлении: 4 − ответ.</> },
    { tag:'подсчёт', title:<>сумма <em>0–40</em></>, p:<>≤13 — низкий стресс, 14–26 — умеренный, 27+ — высокий.</> },
  ],
  clarity: [
    { tag:'C · vas', title:<>визуальная <em>шкала</em></>, p:<>Аналоговая шкала 0–10. От «полный туман» до «исключительная ясность». Делается ежедневно — чтобы поймать тренд.</> },
    { tag:'паттерн', title:<>один <em>жест</em></>, p:<>Драг или клик по треку — значение обновляется с шагом <b>0.1</b>. Гигантская цифра в Anton как обратная связь.</> },
  ],
};

const NOTES_SCORING = {
  beck: [
    {b:'≤9', t:'минимально'},
    {b:'10–15', t:'лёгкая'},
    {b:'16–19', t:'умеренная', acc:true},
    {b:'20+', t:'выраж/тяж'},
  ],
  pss: [
    {b:'0–13', t:'низкий'},
    {b:'14–20', t:'умерен'},
    {b:'21–26', t:'умерен+', acc:true},
    {b:'27+', t:'высокий'},
  ],
  clarity: [
    {b:'0–2', t:'туман'},
    {b:'3–4', t:'муть'},
    {b:'5–7', t:'средне', acc:true},
    {b:'8–10', t:'ясно'},
  ],
};

function updateNotes(tab){
  const body = document.getElementById('notesBody');
  const tag = document.getElementById('notesTag');
  tag.textContent = tab;
  const items = NOTES[tab] || [];
  body.innerHTML = '';
  const tmp = document.createElement('div');
  tmp.style.cssText = 'display:flex;flex-direction:column;gap:14px';

  // Render via React mini for JSX content
  const cont = document.createElement('div');
  cont.style.cssText = 'display:flex;flex-direction:column;gap:14px';
  body.appendChild(cont);
  const r = ReactDOM.createRoot(cont);

  function NotesView({tab}){
    const items = NOTES[tab] || [];
    const sc = NOTES_SCORING[tab];
    return (
      <>
        {items.map((it,i) => (
          <div key={i} className="note">
            <div className="nh"><b>{it.tag}</b><span>#{String(i+1).padStart(2,'0')}</span></div>
            <h4>{it.title}</h4>
            <p>{it.p}</p>
          </div>
        ))}
        {sc && (
          <>
            <div className="note" style={{background:'var(--paper)',boxShadow:'none',borderStyle:'dashed'}}>
              <div className="nh"><b>пороги</b><span>scoring</span></div>
              <div className="scoring" style={{marginTop:6,boxShadow:'none',border:'none'}}>
                {sc.map((c,i) => (
                  <div key={i} className={'sc-cell ' + (c.acc?'acc':'')}>
                    <b>{c.b}</b>{c.t}
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
        {tab === 'home' && (
          <div className="note">
            <div className="nh"><b>стек</b><span>type</span></div>
            <h4>три <em>шрифта</em></h4>
            <p><b>Instrument Serif</b> italic — заголовки, тёплый «бумажный» голос. <b>Anton</b> — большие цифры. <b>JetBrains Mono</b> — мета-метки, теги, пороги.</p>
          </div>
        )}
      </>
    );
  }
  r.render(<NotesView tab={tab}/>);
}
setTimeout(() => updateNotes('home'), 0);