// TATUS — карта: екрани вкладки «Аналітика» (статистика / витрати / pro).

function AnTitle() {
  return <div style={{ textAlign: 'center', fontSize: 26, fontWeight: 800, letterSpacing: -0.6, padding: '0 18px' }}>Аналітика</div>;
}

function PeriodBar() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ width: 30, height: 30, borderRadius: 9, background: C.surfaceHi, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic n="chevron" s={15} c={C.sub} style={{ transform: 'rotate(180deg)' }} /></span>
        <span style={{ fontSize: 16, fontWeight: 800 }}>Червень 2026 р.</span>
        <span style={{ width: 30, height: 30, borderRadius: 9, background: C.surfaceHi, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic n="chevron" s={15} c={C.sub} /></span>
      </div>
      <span style={{ fontSize: 13, fontWeight: 700, color: C.violet, background: C.surfaceHi, border: `1px solid ${C.border}`, padding: '7px 12px', borderRadius: 11 }}>Увесь час</span>
    </div>
  );
}

function StatBox({ label, value, valueColor = C.text, info }) {
  return (
    <Card r={18} pad={16}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 6 }}>
        <span style={{ fontSize: 13, fontWeight: 500, color: C.sub, lineHeight: 1.25 }}>{label}</span>
        {info && <Ic n="info" s={15} c={C.faint} sw={1.8} />}
      </div>
      <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: -0.5, marginTop: 12, color: valueColor, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{value}</div>
    </Card>
  );
}

function AnStats() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <AnTitle />
        <div style={{ padding: '16px 18px 0' }}><Segmented opts={['Статистика', 'Витрати']} value="Статистика" /></div>

        <div style={{ padding: '16px 18px 0' }}>
          <Card r={24} pad={20}>
            <PeriodBar />
            <div style={{ fontSize: 13.5, fontWeight: 600, color: C.sub, marginBottom: 6 }}>Зароблено</div>
            <div style={{ fontSize: 38, fontWeight: 800, letterSpacing: -1, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>59 900 <span style={{ fontSize: 22, color: C.sub }}>₴</span></div>
            <div style={{ marginTop: 16, height: 10, borderRadius: 6, background: C.surfaceSoft, overflow: 'hidden' }}>
              <div style={{ width: '86%', height: '100%', borderRadius: 6, background: `linear-gradient(90deg, ${C.primaryDeep}, ${C.primaryBright})`, boxShadow: `0 0 12px ${C.glow}` }} />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 13 }}>
              <span style={{ fontSize: 13.5, color: C.sub, fontWeight: 500 }}>86% від цілі <span style={{ color: C.violet, fontWeight: 700 }}>70 000 ₴</span></span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: C.greenSoft, padding: '5px 9px', borderRadius: 9 }}><Ic n="trend" s={13} c={C.green} sw={2.4} /><span style={{ fontSize: 12, fontWeight: 700, color: C.green }}>Ціль 86%</span></div>
                <Ic n="edit" s={16} c={C.sub} />
              </div>
            </div>
          </Card>
        </div>

        <div style={{ padding: '24px 18px 0' }}>
          <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4, marginBottom: 13 }}>Гроші</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 11 }}>
            <StatBox label="Середній чек" value="7,487.50 ₴" info />
            <StatBox label="Витрати" value="29,900 ₴" info />
            <StatBox label="Чистий прибуток" value="30,000 ₴" valueColor={C.green} info />
            <StatBox label="Матеріали на сеанс" value="3,737.50 ₴" info />
          </div>
        </div>

        {/* «Робота» + «Топ клієнти» + «За послугами» removed for landing — short screen so pinned bottom nav shows with labels */}
      </div>
      <AIFab />
      <BottomNav active="an" />
    </Phone>
  );
}

// ─── Витрати ────────────────────────────────────────────────────────────────────
const CATS = [
  ['Оренда', 13000, 43, C.primaryBright], ['Обладнання', 6500, 22, C.green],
  ['Матеріали', 4200, 14, C.orange], ['Витратники', 3200, 11, C.blue], ['Реклама', 3000, 10, C.pink],
];
const EXP = [
  ['Антисептик, рукавички', 'Витратники', '18 червня 2026 р.', 900, C.blue],
  ['Нова тату-машинка', 'Обладнання', '14 червня 2026 р.', 6500, C.green],
  ['Фарби та пігменти', 'Матеріали', '12 червня 2026 р.', 4200, C.orange],
];
function AnExpenses() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <AnTitle />
        <div style={{ padding: '16px 18px 0' }}><Segmented opts={['Статистика', 'Витрати']} value="Витрати" /></div>

        <div style={{ padding: '16px 18px 0' }}>
          <Card r={24} pad={20}>
            <PeriodBar />
            <div style={{ display: 'flex', alignItems: 'stretch' }}>
              {[['Дохід', '59 900 ₴', C.green], ['−', '', null], ['Витрати', '29 900 ₴', C.text], ['=', '', null], ['Чистий', '30 000 ₴', C.green]].map(([l, v, cl], i) => (
                l === '−' || l === '=' ? <div key={i} style={{ width: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.sub, fontSize: 16, fontWeight: 700 }}>{l}</div>
                : <div key={i} style={{ flex: 1, textAlign: 'center' }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: C.sub, marginBottom: 7 }}>{l}</div>
                    <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -0.4, color: cl, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{v}</div>
                  </div>
              ))}
            </div>
          </Card>
        </div>

        <div style={{ padding: '14px 18px 0' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, background: C.glowSoft, border: `1px solid ${C.borderHi}`, borderRadius: 18, padding: '15px 16px' }}>
            <Ic n="spark" s={18} c={C.violet} style={{ marginTop: 1, flexShrink: 0 }} />
            <span style={{ flex: 1, fontSize: 13.5, lineHeight: 1.45, color: 'rgba(255,255,255,0.82)', fontWeight: 500 }}>Витрати віднімаються від доходу в статистиці. Вносьте все (оренда, матеріали, витратники) — щоб бачити реальний прибуток.</span>
            <Ic n="x" s={17} c={C.sub} style={{ flexShrink: 0 }} />
          </div>
        </div>

        <div style={{ padding: '22px 18px 0' }}>
          <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4, marginBottom: 13 }}>За категоріями</div>
          <Card r={20} pad={18}>
            {CATS.map(([nm, sum, pct, cl], i) => (
              <div key={nm} style={{ marginBottom: i === CATS.length - 1 ? 0 : 15 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}><span style={{ width: 9, height: 9, borderRadius: 3, background: cl }} /><span style={{ fontSize: 14.5, fontWeight: 700 }}>{nm}</span></span>
                  <span style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}><span style={{ fontSize: 14.5, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{money(sum)} ₴</span><span style={{ fontSize: 12.5, fontWeight: 600, color: C.sub, width: 30, textAlign: 'right' }}>{pct}%</span></span>
                </div>
                <div style={{ height: 7, borderRadius: 4, background: C.surfaceSoft, overflow: 'hidden' }}><div style={{ width: `${pct}%`, height: '100%', borderRadius: 4, background: cl }} /></div>
              </div>
            ))}
          </Card>
        </div>

        <div style={{ padding: '24px 18px 0' }}>
          <SecHead title="Останні витрати" action="Усі" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {EXP.map(([nm, cat, date, amt, cl]) => (
              <Card key={nm} r={18} pad={14}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 46, height: 46, borderRadius: 13, background: `${cl}22`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Ic n="receipt" s={22} c={cl} sw={1.8} /></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: -0.2 }}>{nm}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                      <span style={{ fontSize: 12, fontWeight: 600, color: cl, background: `${cl}1f`, padding: '2px 8px', borderRadius: 7 }}>{cat}</span>
                      <span style={{ fontSize: 13, color: C.sub, fontWeight: 500 }}>{date}</span>
                    </div>
                  </div>
                  <span style={{ fontSize: 16, fontWeight: 800, fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>−{money(amt)} ₴</span>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 40, padding: '14px 18px 24px', background: 'linear-gradient(to top, rgba(10,10,12,0.99) 68%, rgba(10,10,12,0))', display: 'flex', alignItems: 'center', gap: 12 }}>
        <PrimaryBtn icon="plus" label="Нова витрата" style={{ flex: 1, height: 56 }} />
      </div>
      <AIFab bottom={92} />
      <BottomNav active="an" />
    </Phone>
  );
}

// ─── Pro ────────────────────────────────────────────────────────────────────────
function Spark({ up }) {
  return (
    <svg width="58" height="26" viewBox="0 0 58 26" fill="none">
      <polyline points="0,20 10,16 18,18 26,6 34,12 42,4 50,9 58,3" stroke={C.primaryBright} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function AnPro() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <AnTitle />
        <div style={{ padding: '16px 18px 0' }}><Segmented opts={['Статистика', 'Витрати']} value="Pro" /></div>

        <div style={{ padding: '18px 18px 0' }}>
          <Card r={22} pad={18} style={{ background: `linear-gradient(160deg, ${C.surfaceHi}, ${C.surface})` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <span style={{ fontSize: 12.5, fontWeight: 700, color: C.sub, letterSpacing: 0.5 }}>ДИНАМІКА · ПРОТИ МИНУЛОГО МІСЯЦЯ</span>
              <ProBadge small />
            </div>
            {[['Дохід', '59,900 ₴', '+1231%'], ['Прибуток', '55,700 ₴', '+1138%'], ['Середній чек', '7,487.50 ₴', '+66%']].map(([l, v, d], i) => (
              <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: i ? 16 : 0 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: C.sub }}>{l}</div>
                  <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: -0.4, fontVariantNumeric: 'tabular-nums', marginTop: 2 }}>{v}</div>
                </div>
                <Spark />
                <span style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 13, fontWeight: 800, color: C.green, minWidth: 62, justifyContent: 'flex-end' }}><Ic n="trend" s={13} c={C.green} sw={2.4} />{d}</span>
              </div>
            ))}
          </Card>
        </div>

        <div style={{ padding: '16px 18px 0' }}>
          <Card r={22} pad={20} style={{ background: `linear-gradient(160deg, ${C.surfaceSoft}, ${C.surface})`, border: `1px solid ${C.borderHi}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span style={{ fontSize: 12.5, fontWeight: 700, color: C.violet, letterSpacing: 0.5 }}>ПРОГНОЗ ДО КІНЦЯ МІСЯЦЯ</span>
              <Ic n="trend" s={18} c={C.violet} sw={2.2} />
            </div>
            <div style={{ fontSize: 40, fontWeight: 800, letterSpacing: -1.2, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>67,387.50 ₴</div>
            <div style={{ fontSize: 13.5, color: C.sub, fontWeight: 500, marginTop: 10 }}>за записаними сеансами + середній чек ·</div>
          </Card>
        </div>

        <div style={{ padding: '16px 18px 0' }}>
          <Card r={18} pad={16}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: `linear-gradient(150deg, ${C.primaryBright}, ${C.primaryDeep})`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Ic n="spark" s={20} c="#fff" /></div>
              <span style={{ flex: 1, fontSize: 16, fontWeight: 800 }}>Тижневий AI-дайджест</span>
              <span style={{ fontSize: 12, fontWeight: 700, color: C.violet, background: C.glowSoft, padding: '5px 11px', borderRadius: 9 }}>Скоро</span>
            </div>
          </Card>
        </div>
      </div>
      <AIFab />
      <BottomNav active="an" />
    </Phone>
  );
}

Object.assign(window, { AnStats, AnExpenses, AnPro });