// Stats — графики активности + достижения + распределение по категориям
// Changes from the design prototype:
//  - weeks array computed from history sent_at in api.js (was static demo)
//  - avg_response hidden when backend doesn't expose it
//  - achievements computed from real streak/best_streak/total/days
//  - category rows use `_default` meta for unknown keys

window.StatsScreen = function StatsScreen({ data }) {
  const D = data;
  const totalCat = Object.values(D.stats.by_category).reduce((a, b) => a + b, 0);
  const hasAvg = D.stats.avg_response != null;
  const maxWeek = Math.max(1, ...D.stats.weeks);

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Статистика пары</h1>
          <div className="page-head__sub">За всё время · с {D.pair.started_at}</div>
        </div>
      </div>

      <div className="kpis">
        <div className="kpi">
          <div className="kpi__label">Серия</div>
          <div className="kpi__big">{D.pair.current_streak}<small>дней</small></div>
          <div className="kpi__delta">🔥 рекорд {D.pair.best_streak}</div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Всего вопросов</div>
          <div className="kpi__big">{D.pair.total_questions}</div>
          <div className="kpi__delta">+{D.stats.last_week} за неделю</div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Оба ответили</div>
          <div className="kpi__big">{D.pair.answer_rate}<small>%</small></div>
          <div className="kpi__delta">{D.pair.both_answered} / {D.pair.total_questions}</div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Дней вместе</div>
          <div className="kpi__big">{D.pair.days_together}</div>
          <div className="kpi__delta">{hasAvg ? `${D.stats.avg_response} мин средн. ответ` : 'с первого вопроса'}</div>
        </div>
      </div>

      <div className="stat-row-2">
        <section className="surface" style={{padding: 20}}>
          <div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16}}>
            <h3 style={{margin: 0, font: '600 16px/1.2 var(--font-display)'}}>Активность за 12 недель</h3>
            <span style={{fontSize: 12, color: 'var(--text-4)'}}>раскрытые ответы</span>
          </div>
          <div className="bars">
            {D.stats.weeks.map((w, i) => (
              <div key={i} className="bars__col">
                <div className="bars__bar" style={{height: `${Math.max(8, (w / maxWeek) * 120)}px`}}>
                  {w > 0 && <span className="bars__val">{w}</span>}
                </div>
                <div className="bars__lbl">{i === 11 ? 'сейчас' : `-${11 - i}`}</div>
              </div>
            ))}
          </div>
        </section>

        <section className="surface" style={{padding: 20}}>
          <h3 style={{margin: '0 0 16px', font: '600 16px/1.2 var(--font-display)'}}>По категориям</h3>
          {totalCat === 0 ? (
            <div style={{color: 'var(--text-3)', fontSize: 13, textAlign: 'center', padding: '20px 0'}}>
              Пока нет раскрытых ответов
            </div>
          ) : (
            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
              {Object.entries(D.stats.by_category)
                .sort((a, b) => b[1] - a[1])
                .map(([k, v]) => {
                  const cat = D.cats[k] || D.cats._default;
                  const pct = Math.round(v * 100 / totalCat);
                  return (
                    <div key={k}>
                      <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 5}}>
                        <span style={{color: cat.color, fontWeight: 600}}>{cat.emoji} {cat.ru}</span>
                        <span style={{color: 'var(--text-3)'}}>{v} · {pct}%</span>
                      </div>
                      <div style={{height: 8, borderRadius: 8, background: 'oklch(1 0 0 / 0.05)', overflow: 'hidden'}}>
                        <div style={{height: '100%', width: `${pct}%`, background: cat.color, borderRadius: 8, transition: 'width .3s'}}></div>
                      </div>
                    </div>
                  );
                })}
            </div>
          )}
        </section>
      </div>

      <section className="surface" style={{padding: 20, marginTop: 16}}>
        <h3 style={{margin: '0 0 16px', font: '600 16px/1.2 var(--font-display)'}}>Достижения</h3>
        <div className="achievements">
          {D.achievements.map(a => (
            <div key={a.id} className={'ach' + (a.got ? ' ach--got' : '')}>
              <div className="ach__icon">{a.icon}</div>
              <div className="ach__name">{a.name}</div>
              <div className="ach__desc">{a.desc}</div>
              {!a.got && a.progress != null && a.progress > 0 && (
                <div className="ach__bar"><div style={{width: `${a.progress}%`}}></div></div>
              )}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};