// TATUS — карта: екрани вкладки «Клієнти» (список / деталі / картка).

function SessionRow({ date, time, amount, paid = true }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '4px 0' }}>
      <span style={{ width: 3.5, height: 38, borderRadius: 2, background: C.green, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15.5, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{date}</div>
        <div style={{ fontSize: 13, color: C.sub, fontWeight: 500, marginTop: 2 }}>{time}</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontSize: 15.5, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{amount}</div>
        <div style={{ fontSize: 13, color: C.green, fontWeight: 700, marginTop: 2 }}>{paid ? 'Сплачено' : 'Винен'}</div>
      </div>
    </div>
  );
}

const SESSIONS = [
  ['25.06.2026', '11:00 – 13:00 (2 год)', '6 000 ₴'],
  ['17.06.2026', '17:00 – 17:40 (0 год 40 хв)', '2 700 ₴'],
  ['17.06.2026', '12:00 – 14:00 (2 год)', '10 000 ₴'],
];

function ClientsList() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 92 }}>
        <div style={{ display: 'flex', alignItems: 'center', padding: '0 18px' }}>
          <div style={{ width: 42 }} />
          <div style={{ flex: 1, textAlign: 'center', fontSize: 22, fontWeight: 800, letterSpacing: -0.4 }}>Мої клієнти</div>
          <div style={{ width: 42, height: 42, borderRadius: 13, background: C.surfaceHi, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic n="plus" s={20} c={C.text} sw={2.2} /></div>
        </div>

        <div style={{ padding: '18px 18px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, background: C.surfaceHi, border: `1px solid ${C.border}`, borderRadius: 14, padding: '0 16px', height: 50 }}>
            <Ic n="search" s={19} c={C.sub} />
            <span style={{ fontSize: 15, color: C.sub }}>Пошук за ім'ям або телефоном</span>
          </div>
        </div>

        <div style={{ padding: '16px 18px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: C.glowSoft, border: `1px solid ${C.borderHi}`, borderRadius: 18, padding: 16 }}>
            <div style={{ width: 42, height: 42, borderRadius: 12, background: C.greenSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Ic n="check" s={22} c={C.green} sw={2.4} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ fontSize: 16, fontWeight: 800 }}>Сплячих немає</span></div>
              <div style={{ fontSize: 13.5, color: C.sub, fontWeight: 500, marginTop: 2 }}>Усі клієнти активні — так тримати</div>
            </div>
          </div>
        </div>

        <div style={{ padding: '20px 18px 0' }}>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: C.sub, marginBottom: 11 }}>Усі клієнти · 5</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              ['Олена', '17 червня', '73 400 ₴'],
              ['Христина', '14 червня', '41 200 ₴'],
              ['Софія', '9 червня', '28 900 ₴'],
              ['Дарина', '5 червня', '19 500 ₴'],
              ['Орися', '1 червня', '12 300 ₴'],
            ].map(([nm, last, sum]) => (
              <Card key={nm} r={18} pad={16}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <Av name={nm[0]} size={46} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -0.2 }}>{nm}</div>
                    <div style={{ fontSize: 13.5, color: C.sub, fontWeight: 500, marginTop: 2 }}>останній · {last}</div>
                  </div>
                  <span style={{ fontSize: 16, fontWeight: 800, color: C.violet, fontVariantNumeric: 'tabular-nums' }}>{sum}</span>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>
      <AIFab />
      <BottomNav active="cl" />
    </Phone>
  );
}

function ClientStat({ icon, label, value, sub, valueColor = C.text }) {
  return (
    <div style={{ flex: 1, minWidth: 0, background: C.surface, border: `1px solid ${C.border}`, borderRadius: 18, padding: '14px 12px' }}>
      <div style={{ width: 34, height: 34, borderRadius: 10, background: C.glowSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}><Ic n={icon} s={18} c={C.violet} /></div>
      <div style={{ fontSize: 12.5, color: C.sub, fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -0.3, marginTop: 3, color: valueColor, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{value}</div>
      {sub && <div style={{ fontSize: 11.5, color: C.faint, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function ClientDetail() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 120 }}>
        <TopBar title="Клієнт" right={<div style={{ width: 42, height: 42, borderRadius: 13, background: C.surfaceHi, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic n="edit" s={18} c={C.violet} /></div>} />

        <div style={{ padding: '20px 18px 0', display: 'flex', alignItems: 'center', gap: 16 }}>
          <Av name="Д" size={58} fs={24} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.4 }}>Олена</div>
            <div style={{ fontSize: 14.5, color: C.violet, fontWeight: 600, marginTop: 1 }}>@qwww</div>
            <div style={{ fontSize: 12.5, color: C.sub, fontWeight: 500, marginTop: 2 }}>Клієнт з 16 трав. 2026 р.</div>
          </div>
        </div>

        <div style={{ padding: '20px 18px 0', display: 'flex', gap: 11 }}>
          <ClientStat icon="cal-plus" label="Сеанси" value="12" sub="Увесь час" />
          <ClientStat icon="wallet" label="Оплачено" value="79 400 ₴" sub="Увесь час" />
          <ClientStat icon="receipt" label="Винні" value="0 ₴" />
        </div>

        <div style={{ padding: '24px 18px 0' }}>
          <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3, marginBottom: 11 }}>Нотатка</div>
          <div style={{ background: C.surfaceHi, border: `1px solid ${C.border}`, borderRadius: 14, padding: '16px', fontSize: 15.5, fontWeight: 500 }}>олдскул рукав</div>
        </div>

        <div style={{ padding: '24px 18px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3 }}>Сеанси</span>
            <span style={{ fontSize: 14, fontWeight: 700, color: C.violet, display: 'flex', alignItems: 'center', gap: 1 }}>Переглянути всі<Ic n="chevron" s={15} c={C.violet} /></span>
          </div>
          <div>{SESSIONS.map((s, i) => <div key={i} style={{ borderTop: i ? `1px solid ${C.border}` : 'none', padding: '8px 0' }}><SessionRow date={s[0]} time={s[1]} amount={s[2]} /></div>)}</div>
        </div>
      </div>
      <AIFab bottom={88} />
    </Phone>
  );
}

function EditField({ label, value, prefix, link }) {
  return (
    <div style={{ marginTop: 18 }}>
      <div style={{ fontSize: 13.5, fontWeight: 500, color: C.sub, marginBottom: 9 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: C.surfaceHi, border: `1px solid ${C.border}`, borderRadius: 14, padding: '0 16px', height: 54 }}>
        {(label === 'Instagram' || label === 'Telegram') && <Ic n={label === 'Instagram' ? 'ig' : 'tg'} s={19} c={C.sub} />}
        <span style={{ flex: 1, fontSize: 16, fontWeight: 700 }}>{prefix && <span style={{ color: C.sub, fontWeight: 500 }}>{prefix} </span>}{value}</span>
        {link && <Ic n="send" s={17} c={C.violet} style={{ transform: 'rotate(-45deg)' }} />}
      </div>
    </div>
  );
}

function ClientForm() {
  return (
    <Phone>
      <div style={{ paddingTop: 6, paddingBottom: 120 }}>
        <TopBar title="Картка клієнта" right={<div style={{ width: 42, height: 42, borderRadius: 13, background: 'rgba(255,77,79,0.12)', border: `1px solid rgba(255,77,79,0.3)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic n="trash" s={18} c={C.red} /></div>} />
        <div style={{ padding: '14px 18px 0' }}>
          <EditField label="Ім'я" value="Олена" />
          <EditField label="Телефон" value="1211221" prefix="+380" />
          <EditField label="Instagram" value="otoooooo" link />
          <EditField label="Telegram" value="qwww" link />
          <div style={{ marginTop: 18 }}>
            <div style={{ fontSize: 13.5, fontWeight: 500, color: C.sub, marginBottom: 9 }}>Нотатка</div>
            <div style={{ background: C.surfaceHi, border: `1px solid ${C.border}`, borderRadius: 14, padding: 16, height: 120, position: 'relative' }}>
              <span style={{ fontSize: 15.5, fontWeight: 500 }}>олдскул рукав</span>
              <span style={{ position: 'absolute', bottom: 12, right: 14, fontSize: 12, color: C.faint }}>13/2000</span>
            </div>
          </div>
          <div style={{ marginTop: 20 }}><PrimaryBtn icon="check" label="Зберегти" style={{ height: 58, fontSize: 17 }} /></div>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '26px 0 6px' }}>
            <span style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3 }}>Сеанси</span>
            <span style={{ fontSize: 14, fontWeight: 700, color: C.violet, display: 'flex', alignItems: 'center', gap: 1 }}>Переглянути всі<Ic n="chevron" s={15} c={C.violet} /></span>
          </div>
          <div>{SESSIONS.map((s, i) => <div key={i} style={{ borderTop: i ? `1px solid ${C.border}` : 'none', padding: '8px 0' }}><SessionRow date={s[0]} time={s[1]} amount={s[2]} /></div>)}</div>
        </div>
      </div>
      <AIFab bottom={88} />
    </Phone>
  );
}

Object.assign(window, { ClientsList, ClientDetail, ClientForm });