// nyashelf-subscreens.jsx
// Full-screen sub-pages reached from Settings:
//   ProfileScreen, NotifSettingsScreen, MembersScreen, AboutScreen.

// Generic stacked sub-screen header — back arrow + title.
function SubHeader({ goBack, title, action }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0 14px',
    }}>
      <IconChip onClick={goBack}>{I.back(20)}</IconChip>
      <h1 style={{
        margin: 0, flex: 1,
        fontFamily: 'Comfortaa, sans-serif', fontWeight: 600,
        fontSize: 22, lineHeight: 1,
        background: 'linear-gradient(135deg, #fff 0%, var(--accent-a) 70%)',
        WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
      }}>{title}</h1>
      {action}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 1. Profile — view/edit user info pulled from Telegram
// ─────────────────────────────────────────────────────────────────────────────
function ProfileScreen({ goBack, tweaks }) {
  const tg = React.useMemo(() => getTgUser(), []);
  const toast = useToast();
  const figures = useFigures();
  const [name, setName] = React.useState(tg.name);
  const [username, setUsername] = React.useState(tg.username || '');
  const [bio, setBio] = React.useState('коллекционирую с 2020. больше всего люблю фигурки Alter.');

  const stats = React.useMemo(() => {
    const total = figures.length;
    const paid = figures.filter(f => f.status === 'paid' || f.status === 'shipped' || f.status === 'available' || f.status === 'delivered').length;
    const preorders = figures.filter(f => f.status === 'preorder' || f.status === 'soon').length;
    return { total, paid, preorders };
  }, [figures]);

  const save = () => toast.show('профиль сохранён', { kind: 'success' });

  return (
    <div style={{ padding: '0 16px 100px', position: 'relative' }}>
      <DecorLayer density={tweaks.decor * 0.3} seed="prof" palette={tweaks.palette} />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <SubHeader goBack={goBack} title="профиль" />

        {/* avatar + name */}
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          padding: '6px 0 18px', textAlign: 'center',
        }}>
          <TgAvatar user={tg} size={96} />
          <h2 style={{
            margin: '14px 0 4px', fontFamily: 'Comfortaa, sans-serif',
            fontWeight: 600, fontSize: 22, lineHeight: 1,
          }}>{tg.name}</h2>
          {tg.username && (
            <div style={{ fontSize: 13, color: 'var(--text-dim)' }}>@{tg.username}</div>
          )}
          <div style={{
            marginTop: 6, fontSize: 10.5, color: 'var(--text-dim)',
            fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em',
          }}>подгружено из telegram</div>
        </div>

        {/* stats */}
        <GlassCard padding={0} style={{ marginBottom: 16, display: 'flex' }}>
          {[
            { label: 'всего',      v: stats.total },
            { label: 'оплачено',   v: stats.paid },
            { label: 'предзаказы', v: stats.preorders },
          ].map((s, i, all) => (
            <React.Fragment key={s.label}>
              <div style={{ flex: 1, padding: '14px 6px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'Comfortaa, sans-serif', fontWeight: 600, fontSize: 20,
                              background: 'linear-gradient(135deg, #fff, var(--accent-a))',
                              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
                  {s.v}
                </div>
                <div style={{ fontSize: 10.5, color: 'var(--text-dim)', marginTop: 4,
                              textTransform: 'lowercase', letterSpacing: '.04em' }}>{s.label}</div>
              </div>
              {i < all.length - 1 && (
                <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--card-border)', margin: '12px 0' }}/>
              )}
            </React.Fragment>
          ))}
        </GlassCard>

        {/* editable fields */}
        <SectionLabel>о себе</SectionLabel>
        <GlassCard padding={14}>
          <FormField label="имя">
            <FormInput value={name} onChange={setName} placeholder="как тебя зовут" />
          </FormField>
          <FormField label="юзернейм" hint="используется для приглашений и совместного списка">
            <FormInput value={username} onChange={setUsername} placeholder="username" />
          </FormField>
          <FormField label="о себе">
            <FormInput value={bio} onChange={setBio} multiline placeholder="пару слов…" />
          </FormField>
          <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
            <GradientButton full onClick={save}>сохранить</GradientButton>
          </div>
        </GlassCard>

        <SectionLabel>привязано</SectionLabel>
        <GlassCard padding={0}>
          <SubLinkRow
            iconBg="linear-gradient(135deg, #6cc4ef, #5e8fff)"
            icon={
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 3 L 13 11"/><path d="M3 12 L 21 3 L 14 21 L 12 13 L 3 12 Z"/>
              </svg>
            }
            title="telegram"
            sub={`id ${tg.username || 'guest'}`}
            status="связано"
          />
          <SubLinkRow
            iconBg="linear-gradient(135deg, #ff9ecd, #c89bf0)"
            icon={I.bell(18)}
            title="бот NyaShelf"
            sub="канал уведомлений"
            status="подключено"
            last
          />
        </GlassCard>
      </div>
    </div>
  );
}

function SubLinkRow({ icon, iconBg, title, sub, status, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 16px',
      borderBottom: last ? 'none' : '1px solid rgba(200,155,240,.10)',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 12, flexShrink: 0,
        background: iconBg, color: '#3a1e4d',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'Quicksand, sans-serif', fontWeight: 600, fontSize: 13.5 }}>{title}</div>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{sub}</div>
      </div>
      <span style={{
        fontSize: 10.5, fontWeight: 600,
        color: '#6fdb9c', textTransform: 'lowercase', letterSpacing: '.04em',
      }}>{status}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 2. Notification settings — per-type toggles + reminder rails
// ─────────────────────────────────────────────────────────────────────────────
function NotifSettingsScreen({ goBack, tweaks }) {
  const toast = useToast();
  const [types, setTypes] = React.useState({
    pay: true, price: true, release: true, ship: true, wishlist: false,
  });
  const [channels, setChannels] = React.useState({ push: true, sound: false, badge: true });
  const [quiet, setQuiet] = React.useState({ enabled: true, from: '23:00', to: '08:00' });

  const typesList = [
    { id: 'pay',      label: 'оплата',     sub: 'напомнить когда подходит срок', color: 'linear-gradient(135deg, #ffb3c9, #c89bf0)' },
    { id: 'price',    label: 'цена',       sub: 'если цена изменится больше 10%', color: 'linear-gradient(135deg, #9ecdff, #c89bf0)' },
    { id: 'release',  label: 'релиз',      sub: 'за неделю / в день релиза',     color: 'linear-gradient(135deg, #f5e6a8, #ffb3c9)' },
    { id: 'ship',     label: 'отправка',   sub: 'когда заказ ушёл со склада',    color: 'linear-gradient(135deg, #b3f0c9, #9ecdff)' },
    { id: 'wishlist', label: 'вишлист',    sub: 'если позиция вернулась в наличие', color: 'linear-gradient(135deg, #ff9ecd, #f5a3c7)' },
  ];

  return (
    <div style={{ padding: '0 16px 100px', position: 'relative' }}>
      <DecorLayer density={tweaks.decor * 0.25} seed="notifset" palette={tweaks.palette} />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <SubHeader goBack={goBack} title="уведомления" />

        <SectionLabel>о чём писать</SectionLabel>
        <GlassCard padding={0}>
          {typesList.map((t, i) => (
            <div key={t.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderBottom: i < typesList.length - 1 ? '1px solid rgba(200,155,240,.10)' : 'none',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 12, flexShrink: 0,
                background: t.color, color: '#3a1e4d',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {(NOTIF_ICONS[t.id] || I.bell)(18)}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{t.label}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 1 }}>{t.sub}</div>
              </div>
              <NyaSwitch value={types[t.id]} onChange={v => setTypes(s => ({ ...s, [t.id]: v }))}/>
            </div>
          ))}
        </GlassCard>

        <SectionLabel>каналы</SectionLabel>
        <GlassCard padding={0}>
          <SwitchRow label="push в telegram"    sub="через @nyashelf_bot" value={channels.push}  onChange={v => setChannels(s => ({ ...s, push: v }))} />
          <SwitchRow label="звук уведомления"   sub="мяу при платеже"     value={channels.sound} onChange={v => setChannels(s => ({ ...s, sound: v }))} />
          <SwitchRow label="бейдж на иконке"    sub="число непрочитанных" value={channels.badge} onChange={v => setChannels(s => ({ ...s, badge: v }))} last />
        </GlassCard>

        <SectionLabel>тихие часы</SectionLabel>
        <GlassCard padding={0}>
          <SwitchRow label="не беспокоить ночью" sub={quiet.enabled ? `${quiet.from}–${quiet.to}` : 'выключено'}
            value={quiet.enabled} onChange={v => setQuiet(q => ({ ...q, enabled: v }))} last={!quiet.enabled} />
          {quiet.enabled && (
            <div style={{ display: 'flex', gap: 10, padding: '12px 16px' }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 4 }}>с</div>
                <FormInput type="time" value={quiet.from} onChange={v => setQuiet(q => ({ ...q, from: v }))} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 4 }}>до</div>
                <FormInput type="time" value={quiet.to} onChange={v => setQuiet(q => ({ ...q, to: v }))} />
              </div>
            </div>
          )}
        </GlassCard>

        <div style={{ marginTop: 18 }}>
          <GradientButton full size="lg" onClick={() => toast.show('настройки сохранены', { kind: 'success' })}>
            сохранить
          </GradientButton>
        </div>
      </div>
    </div>
  );
}

// ─── Shared row with switch ─────────────────────────────────────────────────
function NyaSwitch({ value, onChange }) {
  return (
    <button onClick={() => onChange(!value)} style={{
      position: 'relative', width: 44, height: 26, borderRadius: 9999, border: 0,
      background: value ? 'linear-gradient(135deg, var(--accent-a), var(--accent-b))' : 'rgba(255,255,255,.12)',
      boxShadow: value ? '0 0 10px var(--glow-soft)' : 'none',
      cursor: 'pointer', padding: 0,
      transition: 'background .2s',
      flexShrink: 0,
    }}>
      <span style={{
        position: 'absolute', top: 3, left: value ? 21 : 3,
        width: 20, height: 20, borderRadius: '50%', background: '#fff',
        boxShadow: '0 1px 3px rgba(0,0,0,.3)',
        transition: 'left .18s',
      }}/>
    </button>
  );
}

function SwitchRow({ label, sub, value, onChange, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 16px',
      borderBottom: last ? 'none' : '1px solid rgba(200,155,240,.10)',
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</div>
        {sub && <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{sub}</div>}
      </div>
      <NyaSwitch value={value} onChange={onChange} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 3. Members — list with roles + invite by username
// ─────────────────────────────────────────────────────────────────────────────
const ROLE_OPTS = [
  { id: 'owner',  label: 'владелец',   sub: 'все права' },
  { id: 'editor', label: 'редактор',   sub: 'добавляет, оплачивает' },
  { id: 'viewer', label: 'наблюдатель',sub: 'только просмотр' },
];

function MembersScreen({ goBack, tweaks }) {
  const toast = useToast();
  const tgEnv = React.useMemo(() => {
    const tg = window.Telegram && window.Telegram.WebApp;
    return tg && tg.initData ? { inTelegram: true, initData: tg.initData, tg } : { inTelegram: false };
  }, []);

  const [members, setMembers] = React.useState([]);
  const [myRole, setMyRole] = React.useState('viewer');
  const [loading, setLoading] = React.useState(true);
  const [inviteOpen, setInviteOpen] = React.useState(false);
  const [inviteRole, setInviteRole] = React.useState('viewer');
  const [inviteResult, setInviteResult] = React.useState(null); // {code, link, role, expires_at}
  const [confirmRemove, setConfirmRemove] = React.useState(null);

  const fetchMembers = React.useCallback(async () => {
    if (!tgEnv.inTelegram) { setLoading(false); return; }
    try {
      const r = await fetch('/api/workspace/members', {
        headers: { Authorization: 'tma ' + tgEnv.initData },
      });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const data = await r.json();
      // Backend caches each member's photo_url every time they hit the
      // API; current user's photo also comes through initData as a freshness
      // backstop in case they haven't opened the WebApp since the photo
      // changed.
      const myTg = window.Telegram?.WebApp?.initDataUnsafe?.user || {};
      setMembers((data.members || []).map(m => ({
        id: String(m.user_id),
        name: m.name || ('id ' + m.user_id),
        username: m.name || ('id' + m.user_id),
        role: m.role,
        is_me: m.is_me,
        photo: (m.is_me ? (myTg.photo_url || m.photo_url) : m.photo_url) || null,
      })));
      setMyRole(data.my_role || 'viewer');
    } catch (e) {
      console.error('members fetch failed', e);
      toast.show('не удалось загрузить участников');
    } finally {
      setLoading(false);
    }
  }, [tgEnv]);

  React.useEffect(() => { fetchMembers(); }, [fetchMembers]);

  const createInvite = async () => {
    if (!tgEnv.inTelegram) {
      setInviteResult({ code: 'DEMO0000', link: null, role: inviteRole, expires_at: null });
      return;
    }
    try {
      const r = await fetch('/api/workspace/invites', {
        method: 'POST',
        headers: { Authorization: 'tma ' + tgEnv.initData, 'Content-Type': 'application/json' },
        body: JSON.stringify({ role: inviteRole, expires_in_days: 7 }),
      });
      if (!r.ok) {
        const txt = await r.text();
        throw new Error(txt || ('HTTP ' + r.status));
      }
      const data = await r.json();
      setInviteResult(data);
    } catch (e) {
      console.error('invite create failed', e);
      toast.show('не удалось создать приглашение');
    }
  };

  const remove = async (id) => {
    setConfirmRemove(null);
    if (!tgEnv.inTelegram) {
      setMembers(prev => prev.filter(m => m.id !== id));
      toast.show('участник удалён');
      return;
    }
    try {
      const r = await fetch('/api/workspace/members/' + id, {
        method: 'DELETE',
        headers: { Authorization: 'tma ' + tgEnv.initData },
      });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      toast.show('участник удалён');
      await fetchMembers();
    } catch (e) {
      console.error('remove failed', e);
      toast.show('не получилось удалить');
    }
  };

  const changeRole = async (id, role) => {
    if (!tgEnv.inTelegram) {
      setMembers(prev => prev.map(m => m.id === id ? { ...m, role } : m));
      toast.show('роль обновлена', { kind: 'success' });
      return;
    }
    try {
      const r = await fetch('/api/workspace/members/' + id, {
        method: 'PUT',
        headers: { Authorization: 'tma ' + tgEnv.initData, 'Content-Type': 'application/json' },
        body: JSON.stringify({ role }),
      });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      toast.show('роль обновлена', { kind: 'success' });
      await fetchMembers();
    } catch (e) {
      console.error('role change failed', e);
      toast.show('не получилось');
    }
  };

  const closeInviteModal = () => {
    setInviteOpen(false);
    setInviteResult(null);
    setInviteRole('viewer');
  };

  const copyLink = () => {
    if (!inviteResult) return;
    const text = inviteResult.link || inviteResult.code;
    try {
      navigator.clipboard.writeText(text);
      toast.show('ссылка скопирована', { kind: 'success' });
    } catch (_) {
      toast.show(text);
    }
  };

  const isOwner = myRole === 'owner';

  return (
    <div style={{ padding: '0 16px 100px', position: 'relative' }}>
      <DecorLayer density={tweaks.decor * 0.3} seed="members" palette={tweaks.palette} />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <SubHeader goBack={goBack} title="участники"
          action={isOwner ? <GradientButton size="sm" icon={I.plus(14)} onClick={() => setInviteOpen(true)}>пригласить</GradientButton> : null}
        />

        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 12, lineHeight: 1.5 }}>
          поделись полочкой с близкими. они увидят твои предзаказы и смогут помогать с оплатой.
        </div>

        {loading ? (
          <div style={{ textAlign: 'center', padding: 40, color: 'var(--text-dim)', fontSize: 13 }}>загружаем…</div>
        ) : members.length === 0 ? (
          <div style={{ textAlign: 'center', padding: 40, color: 'var(--text-dim)', fontSize: 13 }}>
            пока никого нет
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {members.map(m => (
              <MemberCard key={m.id} member={m}
                canManage={isOwner && !m.is_me && m.role !== 'owner'}
                onRoleChange={(role) => changeRole(m.id, role)}
                onRemove={() => setConfirmRemove(m)}
              />
            ))}
          </div>
        )}
      </div>

      {/* Invite modal */}
      <Modal
        open={inviteOpen} onClose={closeInviteModal} title={inviteResult ? 'код приглашения' : 'пригласить'}
        footer={
          inviteResult ? (
            <div style={{ display: 'flex', gap: 8 }}>
              <GhostButton full onClick={closeInviteModal}>закрыть</GhostButton>
              <GradientButton full onClick={copyLink}>скопировать</GradientButton>
            </div>
          ) : (
            <div style={{ display: 'flex', gap: 8 }}>
              <GhostButton full onClick={closeInviteModal}>отмена</GhostButton>
              <GradientButton full onClick={createInvite}>создать код</GradientButton>
            </div>
          )
        }
      >
        {inviteResult ? (
          <div>
            <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 12, lineHeight: 1.5 }}>
              отправь эту ссылку — приглашённый откроет бот и автоматически попадёт в воркспейс.
            </div>
            <div style={{
              padding: 14, borderRadius: 12,
              background: 'rgba(255,255,255,.04)', border: '1px solid var(--card-border)',
              fontFamily: 'monospace', fontSize: 12, wordBreak: 'break-all',
              color: 'var(--text)',
            }}>
              {inviteResult.link || inviteResult.code}
            </div>
            <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-dim)' }}>
              роль: <b>{inviteResult.role}</b>
              {inviteResult.expires_at && (<> · истекает {new Date(inviteResult.expires_at).toLocaleDateString('ru-RU')}</>)}
            </div>
          </div>
        ) : (
          <FormField label="роль">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {ROLE_OPTS.filter(r => r.id !== 'owner').map(r => {
                const on = inviteRole === r.id;
                return (
                  <button key={r.id} onClick={() => setInviteRole(r.id)} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '12px 14px', borderRadius: 14,
                    background: on ? 'rgba(255,158,205,.10)' : 'rgba(255,255,255,.04)',
                    border: '1px solid ' + (on ? 'var(--accent-a)' : 'var(--card-border)'),
                    color: 'var(--text)', textAlign: 'left', cursor: 'pointer',
                    boxShadow: on ? '0 0 10px var(--glow-soft)' : 'none',
                  }}>
                    <span style={{
                      width: 18, height: 18, borderRadius: '50%',
                      border: '1.5px solid ' + (on ? 'var(--accent-a)' : 'var(--card-border)'),
                      background: on ? 'var(--accent-a)' : 'transparent',
                      flexShrink: 0,
                    }}/>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.label}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{r.sub}</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </FormField>
        )}
      </Modal>

      <ConfirmDialog
        open={!!confirmRemove}
        title={`удалить ${confirmRemove?.name}?`}
        message="у участника пропадёт доступ к твоей полочке. это можно отменить, пригласив снова."
        confirmLabel="удалить" danger
        onConfirm={() => remove(confirmRemove.id)}
        onCancel={() => setConfirmRemove(null)}
      />
    </div>
  );
}

function MemberCard({ member, onRoleChange, onRemove, canManage = true }) {
  const [rolePickerOpen, setRolePickerOpen] = React.useState(false);
  const role = ROLE_OPTS.find(r => r.id === member.role);
  let h = 0; for (const c of member.name) h = (h + c.charCodeAt(0) * 7) % 360;
  return (
    <GlassCard padding={12} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <TgAvatar user={member} size={44} glow={false}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'Comfortaa, sans-serif', fontWeight: 600, fontSize: 14 }}>{member.name}{member.is_me ? ' · ты' : ''}</div>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{role?.label}</div>
      </div>
      {canManage && (
        <button onClick={() => setRolePickerOpen(true)} style={{
          padding: '6px 10px', borderRadius: 9999,
          background: 'rgba(255,255,255,.06)',
          border: '1px solid var(--card-border)',
          color: 'var(--text)', cursor: 'pointer',
          fontSize: 11, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>{role?.label} {I.chevDown(12)}</button>
      )}
      {canManage && member.role !== 'owner' && (
        <button onClick={onRemove} style={{
          width: 32, height: 32, borderRadius: '50%', border: 0,
          background: 'rgba(255,138,168,.12)',
          color: '#ff8aa8',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', padding: 0, flexShrink: 0,
        }}>{I.close(16)}</button>
      )}
      <Modal open={rolePickerOpen} onClose={() => setRolePickerOpen(false)} title="роль">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {ROLE_OPTS.map(r => {
            const on = member.role === r.id;
            return (
              <button key={r.id} onClick={() => { onRoleChange(r.id); setRolePickerOpen(false); }} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '12px 14px', borderRadius: 14,
                background: on ? 'rgba(255,158,205,.10)' : 'rgba(255,255,255,.04)',
                border: '1px solid ' + (on ? 'var(--accent-a)' : 'var(--card-border)'),
                color: 'var(--text)', textAlign: 'left', cursor: 'pointer',
                boxShadow: on ? '0 0 10px var(--glow-soft)' : 'none',
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.label}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{r.sub}</div>
                </div>
                {on && <span style={{ color: 'var(--accent-a)' }}>{I.check(16)}</span>}
              </button>
            );
          })}
        </div>
      </Modal>
    </GlassCard>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 4. About — version, credits, links
// ─────────────────────────────────────────────────────────────────────────────
function AboutScreen({ goBack, tweaks }) {
  const toast = useToast();
  return (
    <div style={{ padding: '0 16px 100px', position: 'relative' }}>
      <DecorLayer density={tweaks.decor * 0.4} seed="about" palette={tweaks.palette} includeMoon />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <SubHeader goBack={goBack} title="о приложении" />

        {/* hero */}
        <div style={{
          padding: '20px 0 24px',
          display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
        }}>
          <GhostKitten size={120} />
          <h2 style={{
            margin: '18px 0 6px',
            fontFamily: 'Comfortaa, sans-serif', fontWeight: 700,
            fontSize: 28, letterSpacing: '-.01em',
            background: 'linear-gradient(135deg, #fff, var(--accent-a) 70%, var(--accent-b))',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          }}>NyaShelf</h2>
          <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>
            трекер предзаказов аниме-фигурок
          </div>
          <div style={{
            marginTop: 12, display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 11px', borderRadius: 9999,
            background: 'rgba(255,255,255,.06)',
            border: '1px solid var(--card-border)',
            fontSize: 11, fontWeight: 600, color: 'var(--text-dim)',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#6fdb9c', boxShadow: '0 0 6px #6fdb9caa' }}/>
            версия 1.0.0
          </div>
        </div>

        {/* description */}
        <GlassCard padding={14} style={{ marginBottom: 14 }}>
          <p style={{ margin: 0, fontSize: 13, lineHeight: 1.6, color: 'var(--text)', textWrap: 'pretty' }}>
            личная полочка для предзаказов с nin-nin-game и других магазинов.
            следи за датами оплаты, ценами и релизами — без таблиц и заметок в телефоне.
          </p>
        </GlassCard>

        <SectionLabel>ресурсы</SectionLabel>
        <GlassCard padding={0}>
          <AboutLink label="канал бота"    sub="@nyashelf_bot"             onClick={() => toast.show('открываю telegram…')} />
          <AboutLink label="политика"      sub="как храним данные"          onClick={() => toast.show('открываю политику…')} />
          <AboutLink label="условия"       sub="terms of service"          onClick={() => toast.show('открываю условия…')} />
          <AboutLink label="поддержка"     sub="@nyashelf_support"          onClick={() => toast.show('открываю чат поддержки…')} last />
        </GlassCard>

        <SectionLabel>сделано с</SectionLabel>
        <GlassCard padding={14}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }}>
            {[
              { name: 'telegram mini app', desc: 'платформа' },
              { name: 'react',             desc: 'интерфейс' },
              { name: 'nin-nin-game',      desc: 'источник данных' },
              { name: 'comfortaa+quicksand', desc: 'шрифты' },
            ].map(c => (
              <div key={c.name} style={{
                padding: '10px 12px', borderRadius: 12,
                background: 'rgba(255,255,255,.04)',
                border: '1px solid var(--card-border)',
              }}>
                <div style={{ fontSize: 12.5, fontWeight: 600 }}>{c.name}</div>
                <div style={{ fontSize: 10.5, color: 'var(--text-dim)', marginTop: 2 }}>{c.desc}</div>
              </div>
            ))}
          </div>
        </GlassCard>

        <div style={{
          textAlign: 'center', marginTop: 24,
          fontSize: 11, color: 'var(--text-dim)',
        }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            сделано с <Heart size={11} color="var(--accent-a)" opacity={.9}/> для коллекционеров
          </div>
          <div style={{ marginTop: 6 }}>© 2026 NyaShelf · all rights reserved</div>
        </div>
      </div>
    </div>
  );
}

function AboutLink({ label, sub, onClick, last }) {
  return (
    <div onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '14px 16px', cursor: 'pointer',
      borderBottom: last ? 'none' : '1px solid rgba(200,155,240,.10)',
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</div>
        {sub && <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{sub}</div>}
      </div>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-dim)"
           strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M7 17 L 17 7"/><path d="M8 7 H 17 V 16"/>
      </svg>
    </div>
  );
}

Object.assign(window, { ProfileScreen, NotifSettingsScreen, MembersScreen, AboutScreen });