const ChildSelector = () => {
  const { children, selectedChildId, setSelectedChildId } = useSession();
  const [open, setOpen] = React.useState(false);

  if (!children || children.length <= 1) return null;

  const selected = children.find((c) => c.id === selectedChildId) || children[0];

  return (
    <div style={{ position:'relative' }}>
      <button onClick={()=> setOpen((x)=> !x)} style={{
        width:'100%', display:'flex', alignItems:'center', gap: 10, padding:'10px 12px',
        borderRadius: 10, border:'1px solid var(--border)', background:'var(--surface)',
        cursor:'pointer', fontSize: 13, color:'var(--fg)', textAlign:'left'
      }}>
        <Avatar emoji={selected.avatar} color={selected.color} size={24}/>
        <div style={{ flex:1, minWidth: 0 }}>
          <div className="mono" style={{ fontSize: 10, color:'var(--fg-subtle)', textTransform:'uppercase', letterSpacing:'.06em' }}>Смотрим</div>
          <div style={{ fontWeight: 500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{selected.name}</div>
        </div>
        <IconArrow size={12} style={{ transform: 'rotate(90deg)' }}/>
      </button>
      {open && (
        <div style={{
          position:'absolute', top:'calc(100% + 4px)', left:0, right:0, zIndex: 30,
          background:'var(--surface)', border:'1px solid var(--border)', borderRadius: 10,
          boxShadow:'var(--shadow-md)', padding: 4, display:'flex', flexDirection:'column', gap: 2
        }}>
          {children.map((c) => (
            <button key={c.id} onClick={()=> { setSelectedChildId(c.id); setOpen(false); }} style={{
              display:'flex', alignItems:'center', gap: 10, padding:'8px 10px', borderRadius: 8,
              background: c.id === selected.id ? 'var(--surface-2)' : 'transparent',
              border:'none', cursor:'pointer', fontSize: 13, textAlign:'left', color:'var(--fg)'
            }}>
              <Avatar emoji={c.avatar} color={c.color} size={22}/>
              <span style={{ flex:1 }}>{c.name}</span>
              {c.id === selected.id && <IconCheck size={12}/>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ChildSelector });