// TATUS — карта: екрани вкладки «Головна» + аркуші (новий сеанс, ціль).

// ─── Week strip (Червень, ср 24 обрано) ───────────────────────────────────────
const HWEEK = [
  { dow: 'пн', d: 22 }, { dow: 'вт', d: 23 }, { dow: 'ср', d: 24, sel: true, dot: true },
  { dow: 'чт', d: 25, dot: true }, { dow: 'пт', d: 26 }, { dow: 'сб', d: 27 }, { dow: 'нд', d: 28 },
];
function WeekStrip({ accent = 'violet' }) {
  const grad = accent === 'orange' ? `linear-gradient(160deg, #FBA94C, ${C.orangeDeep})` : `linear-gradient(160deg, ${C.primaryBright}, ${C.primaryDeep})`;
  const sh = accent === 'orange' ? 'rgba(251,146,60,0.4)' : C.glow;
  const selCol = accent === 'orange' ? C.orange : C.violet;
  const dotCol = accent === 'orange' ? C.orange : C.primaryBright;
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      {HWEEK.map((w) => (
        <div key={w.d} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, width: 40 }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: w.sel ? selCol : C.sub }}>{w.dow}</span>
          <div style={{
            width: 42, height: w.sel ? 50 : 42, borderRadius: w.sel ? 16 : 13,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
            background: w.sel ? grad : 'transparent', boxShadow: w.sel ? `0 8px 20px ${sh}` : 'none',
            color: '#fff', fontSize: 18, fontWeight: w.sel ? 800 : 600,
          }}>
            {w.d}
            {w.sel && <span style={{ width: 5, height: 5, borderRadius: 3, background: '#fff' }} />}
          </div>
          {!w.sel && <span style={{ width: 5, height: 5, borderRadius: 3, background: w.dot ? dotCol : 'transparent' }} />}
        </div>
      ))}
    </div>
  );
}

// ─── Month grid (Червень 2026, 24 обрано, 25 outline) ──────────────────────────
const DOW = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'нд'];
const M_DOTS = { 3: true, 9: true, 10: true, 13: true, 16: true, 17: true, 25: true };
function MonthGrid() {
  const cur = Array.from({ length: 30 }, (_, i) => i + 1);
  const next = [1, 2, 3, 4, 5];
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: 6 }}>
        {DOW.map((d, i) => <div key={i} style={{ textAlign: 'center', fontSize: 12, fontWeight: 600, color: i === 2 ? C.violet : C.sub }}>{d}</div>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', rowGap: 4 }}>
        {cur.map((d) => {
          const sel = d === 24, ring = d === 25, dot = M_DOTS[d];
          return (
            <div key={d} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, height: 48, justifyContent: 'center' }}>
              <div style={{
                width: 38, height: 38, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: sel ? `linear-gradient(160deg, ${C.primaryBright}, ${C.primaryDeep})` : 'transparent',
                border: ring ? `1.5px solid ${C.primary}` : 'none',
                boxShadow: sel ? `0 8px 18px ${C.glow}` : 'none',
                color: '#fff', fontSize: 16, fontWeight: sel ? 800 : 600,
              }}>{d}</div>
              <span style={{ width: 5, height: 5, borderRadius: 3, background: !sel && dot ? C.primaryBright : 'transparent' }} />
            </div>
          );
        })}
        {next.map((d) => <div key={'n' + d} style={{ height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span style={{ fontSize: 16, fontWeight: 600, color: C.faint }}>{d}</span></div>)}
      </div>
    </div>
  );
}

function CalCard({ view = 'week', accent = 'violet' }) {
  const monthActive = view === 'month';
  const pillGrad = `linear-gradient(160deg, ${C.primaryBright}, ${C.primaryDeep})`;
  return (
    <Card r={24} pad={18}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -0.3, whiteSpace: 'nowrap' }}>Червень 2026 р.</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
          <div style={{
            padding: '8px 13px', borderRadius: 11, fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap',
            background: monthActive ? pillGrad : C.surfaceHi, border: `1px solid ${monthActive ? 'transparent' : C.border}`,
            color: monthActive ? '#fff' : (accent === 'orange' ? C.orange : C.violet),
            boxShadow: monthActive ? `0 6px 14px ${C.glow}` : 'none',
          }}>Місяць</div>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: C.surfaceHi, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Ic n="cal-plus" s={18} c={accent === 'orange' ? C.orange : C.violet} />
          </div>
        </div>
      </div>
      {view === 'month' ? <MonthGrid /> : <WeekStrip accent={accent} />}
    </Card>
  );
}

// ─── Shared lower content (Мій календар) ───────────────────────────────────────
function MenuRow({ icon, label, iconColor = C.violet, iconBg }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: C.surface, border: `1px solid ${C.border}`, borderRadius: 18, padding: '14px 16px' }}>
      <div style={{ width: 42, height: 42, borderRadius: 12, background: iconBg || C.surfaceHi, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Ic n={icon} s={20} c={iconColor} />
      </div>
      <span style={{ flex: 1, fontSize: 16, fontWeight: 700, letterSpacing: -0.2 }}>{label}</span>
      <Ic n="chevron" s={19} c={C.sub} />
    </div>
  );
}

function HomeBody() {
  return (
    <React.Fragment>
      {/* nearest-record card removed for landing — dedupes with day session, keeps screen short for bottom nav */}

      {/* Day */}
      <div style={{ padding: '22px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <div style={{ fontSize: 18, fontWeight: 800, color: C.violet, letterSpacing: -0.3 }}>24 червня</div>
          <div style={{ fontSize: 13, color: C.sub, fontWeight: 600 }}>1 запис</div>
        </div>
        <Card r={22} pad={14} style={{ marginBottom: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ width: 9, height: 9, borderRadius: 5, background: C.green, flexShrink: 0 }} />
            <div style={{ fontSize: 15.5, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>11:00</div>
            <div style={{ flex: 1, minWidth: 0, marginLeft: 3 }}>
              <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: -0.2 }}>Олена</div>
              <div style={{ fontSize: 13, color: C.sub, fontWeight: 500, marginTop: 1 }}>2 год</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 800, color: C.primaryBright, background: 'rgba(124,92,255,0.14)', padding: '6px 10px', borderRadius: 9, fontVariantNumeric: 'tabular-nums' }}>6 000 ₴</div>
            <Ic n="chevron" s={18} c={C.sub} />
          </div>
        </Card>
        <PrimaryBtn icon="plus" label="Новий сеанс" />
      </div>

      {/* Earnings + goal */}
      <div style={{ padding: '22px 18px 0' }}>
        <Card r={22} pad={20}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: C.sub }}>Зароблено цього місяця</div>
            <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={17} c={C.sub} />
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontSize: 36, fontWeight: 800, letterSpacing: -1, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>59 900 ₴</span>
            <span style={{ fontSize: 17, fontWeight: 700, color: C.sub }}>з 70 000 ₴</span>
          </div>
          <div style={{ marginTop: 18, 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 }}>Залишилось до цілі</span>
            <span style={{ fontSize: 14, color: C.violet, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>10 100 ₴</span>
          </div>
        </Card>
      </div>

      {/* admin / quick-actions sections removed for landing — keep screen short so bottom nav is visible */}
    </React.Fragment>
  );
}

// ─── Screens ───────────────────────────────────────────────────────────────────
function HomeWeek() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <AppHeader />
        <div style={{ padding: '16px 18px 0' }}><Segmented opts={['Мій календар', 'Календар колег']} value="Мій календар" /></div>
        <div style={{ padding: '16px 18px 0' }}><CalCard view="week" /></div>
        <HomeBody />
      </div>
      <AIFab />
      <BottomNav active="home" />
    </Phone>
  );
}

function HomeMonth() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <AppHeader />
        <div style={{ padding: '16px 18px 0' }}><Segmented opts={['Мій календар', 'Календар колег']} value="Мій календар" /></div>
        <div style={{ padding: '16px 18px 0' }}><CalCard view="month" /></div>
        <HomeBody />
      </div>
      <AIFab />
      <BottomNav active="home" />
    </Phone>
  );
}

function HomeColleagues() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <AppHeader />
        <div style={{ padding: '16px 18px 0' }}><Segmented opts={['Мій календар', 'Календар колег']} value="Календар колег" accent="orange" /></div>
        <div style={{ padding: '16px 18px 0' }}><CalCard view="week" accent="orange" /></div>
        <div style={{ padding: '24px 18px 0' }}>
          <button style={{
            width: '100%', height: 56, borderRadius: 16, cursor: 'pointer', border: 'none',
            background: `linear-gradient(135deg, #FBA94C, ${C.orangeDeep})`, boxShadow: `0 12px 26px rgba(251,146,60,0.4)`,
            color: '#fff', fontSize: 16.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          }}><Ic n="user-plus" s={20} c="#fff" sw={2.3} />Додати колегу</button>
        </div>
      </div>
      <AIFab />
      <BottomNav active="home" />
    </Phone>
  );
}

// ─── Bottom sheet: Новий сеанс ──────────────────────────────────────────────────
function FieldLabel({ children, style }) {
  return <div style={{ fontSize: 13.5, fontWeight: 500, color: C.sub, marginBottom: 9, ...style }}>{children}</div>;
}
function Field({ icon, placeholder, value, chevron, dropdown }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 11, background: C.surfaceHi, border: `1px solid ${C.border}`, borderRadius: 14, padding: '0 16px', height: 54 }}>
      {icon && <Ic n={icon} s={19} c={C.sub} />}
      <span style={{ flex: 1, fontSize: 15.5, fontWeight: value ? 700 : 500, color: value ? C.text : C.sub }}>{value || placeholder}</span>
      {chevron && <Ic n="chevron" s={17} c={C.sub} />}
      {dropdown && <Ic n="down" s={18} c={C.sub} />}
    </div>
  );
}

function NewSessionSheet() {
  return (
    <Phone glow={false}>
      <div style={{ paddingTop: 4, paddingBottom: 130 }}>
        <div style={{ padding: '0 20px' }}>
          <div style={{ width: 40, height: 5, borderRadius: 3, background: C.borderHi, margin: '0 auto 16px' }} />
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
            <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.6 }}>Новий сеанс</div>
            <div style={{ width: 38, height: 38, borderRadius: 11, background: C.surfaceHi, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic n="x" s={19} c={C.text} /></div>
          </div>

          <FieldLabel>Клієнт</FieldLabel>
          <Field icon="users" placeholder="Оберіть клієнта" dropdown />

          <FieldLabel style={{ marginTop: 18 }}>Дата</FieldLabel>
          <Field icon="cal-plus" value="середа, 24 червня 2026 р." chevron />

          <FieldLabel style={{ marginTop: 18 }}>Послуга</FieldLabel>
          <Segmented opts={['Тату', 'Пірсинг']} value="Тату" />

          <div style={{ display: 'flex', gap: 12, marginTop: 18 }}>
            <div style={{ flex: 1 }}>
              <FieldLabel>Початок</FieldLabel>
              <Field icon="clock" value="16:00" chevron />
            </div>
            <div style={{ flex: 1 }}>
              <FieldLabel>Тривалість</FieldLabel>
              <Field icon="clock" value="2 год" chevron />
            </div>
          </div>
          <div style={{ fontSize: 12.5, color: C.sub, marginTop: 9, lineHeight: 1.4 }}>Вкажіть приблизний час роботи — він іде у статистику доходу та завантаження.</div>

          <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4, marginTop: 22, marginBottom: 12 }}>Оплата 💰 💰</div>
          <button style={{ width: '100%', height: 56, borderRadius: 15, cursor: 'pointer', background: C.glowSoft, border: `1px solid ${C.primary}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 18px' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}><Ic n="calc" s={20} c={C.violet} /><span style={{ fontSize: 16, fontWeight: 700, color: C.violet }}>Розрахувати вартість</span></span>
            <span style={{ fontSize: 13, fontWeight: 600, color: C.sub }}>Рекомендовано</span>
          </button>

          <FieldLabel style={{ marginTop: 18 }}>Вартість</FieldLabel>
          <Field placeholder="Наприклад, 1500" />
          <div style={{ fontSize: 12.5, color: C.sub, marginTop: 8 }}>Повна вартість сеансу</div>

          <FieldLabel style={{ marginTop: 18 }}>Отримано</FieldLabel>
          <Field placeholder="Наприклад, 1500" />
          <div style={{ fontSize: 12.5, color: C.sub, marginTop: 8 }}>Скільки вже отримано (передоплата + оплата)</div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginTop: 16 }}>
            <span style={{ width: 22, height: 22, borderRadius: '50%', border: `2px solid ${C.borderHi}` }} />
            <span style={{ fontSize: 15.5, fontWeight: 700 }}>Сплачено повністю</span>
          </div>

          <FieldLabel style={{ marginTop: 20 }}>Робоче місце</FieldLabel>
          <Field placeholder="Холдер 1 / Кушетка А (опційно)" />

          <FieldLabel style={{ marginTop: 18 }}>Стать</FieldLabel>
          <Segmented opts={['Чоловіча', 'Жіноча', 'Інше']} value="Чоловіча" size="sm" />

          <FieldLabel style={{ marginTop: 18 }}>Нотатка</FieldLabel>
          <div style={{ background: C.surfaceHi, border: `1px solid ${C.border}`, borderRadius: 14, padding: 16, height: 110, position: 'relative' }}>
            <span style={{ fontSize: 15, color: C.sub }}>Ідея, розмір, зона, домовленості</span>
            <span style={{ position: 'absolute', bottom: 12, right: 14, fontSize: 12, color: C.faint }}>0/2000</span>
          </div>

          <div style={{ marginTop: 20 }}><PrimaryBtn icon="check" label="Зберегти" style={{ height: 58, fontSize: 17 }} /></div>
        </div>
      </div>
      <AIFab bottom={88} />
      <BottomNav active="home" />
    </Phone>
  );
}

// ─── Bottom sheet: Ціль доходу ──────────────────────────────────────────────────
function GoalSheet() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <AppHeader />
        <div style={{ padding: '16px 18px 0', opacity: 0.5 }}><Segmented opts={['Мій календар', 'Календар колег']} value="Мій календар" /></div>
        <div style={{ padding: '16px 18px 0', opacity: 0.5 }}><CalCard view="month" /></div>
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 30 }} />
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, background: C.bg, borderRadius: '26px 26px 0 0', border: `1px solid ${C.borderHi}`, borderBottom: 'none', padding: '14px 20px 34px', zIndex: 35 }}>
        <div style={{ width: 40, height: 5, borderRadius: 3, background: C.borderHi, margin: '0 auto 18px' }} />
        <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4, marginBottom: 16 }}>Ціль доходу на місяць</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: C.surfaceHi, border: `1px solid ${C.primary}`, borderRadius: 14, padding: '0 18px', height: 56 }}>
          <span style={{ flex: 1, fontSize: 16, fontWeight: 500, color: C.sub }}>Наприклад, 70000</span>
          <span style={{ fontSize: 18, fontWeight: 700, color: C.sub }}>₴</span>
        </div>
        <div style={{ fontSize: 12.5, color: C.sub, marginTop: 9 }}>Показується на головній — прогрес до цілі</div>
        <div style={{ marginTop: 18 }}><PrimaryBtn label="Зберегти" style={{ height: 58, fontSize: 17 }} /></div>
      </div>
      <AIFab bottom={88} />
      <BottomNav active="home" />
    </Phone>
  );
}

Object.assign(window, { HomeWeek, HomeMonth, HomeColleagues, NewSessionSheet, GoalSheet });