// onboarding.jsx — participant picker, settings sheet
const ASF_PEOPLE = ['Josue', 'Nerlin', 'Nolan', 'Derik', 'Lester', 'Libney', 'William', 'Joseph', 'Noah'];
const ASF_PROFILE_OPTIONS = [...ASF_PEOPLE, 'Other'];

function LensPicker({ onPick }) {
  const c = useTheme();
  const [sel, setSel] = React.useState(null);
  const canContinue = !!sel;
  return (
    <div style={{ minHeight: 874, display: 'flex', flexDirection: 'column', padding: '92px 24px 40px', background: c.bg }}>
      <h1 style={{ fontFamily: c.headingStack, fontSize: 30, fontWeight: 800, color: c.text, lineHeight: 1.12, margin: '0 0 8px' }}>{c.t('who_here')}</h1>
      <p style={{ fontSize: 14.5, color: c.textMuted, margin: '0 0 24px', lineHeight: 1.5 }}>{c.t('who_sub')}</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 11, flex: 1, alignContent: 'start' }}>
        {ASF_PROFILE_OPTIONS.map(name => {
          const active = sel === name;
          return (
            <button key={name} onClick={() => setSel(name)} style={{
              width: '100%', minHeight: 86, textAlign: 'left', cursor: 'pointer', borderRadius: 18, padding: '16px',
              border: active ? `2px solid ${c.accent}` : `2px solid transparent`,
              background: c.surface, boxShadow: c.dark ? `inset 0 0 0 1px ${c.border}` : '0 2px 12px rgba(0,0,0,0.05)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 10,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <div style={{ width: 34, height: 34, borderRadius: 13, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: active ? c.accent : c.accentSoft, color: active ? c.accentInk : c.accent, fontWeight: 800 }}>
                  {name === 'Other' ? '+' : name.charAt(0)}
                </div>
                <div style={{ width: 22, height: 22, borderRadius: 99, border: active ? 'none' : `2px solid ${c.border}`, background: active ? c.accent : 'transparent', color: c.accentInk, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {active && <Icon name="check" size={14} />}
                </div>
              </div>
              <div style={{ fontFamily: c.headingStack, fontSize: 20, fontWeight: 800, color: c.text }}>{name}</div>
            </button>
          );
        })}
      </div>
      <button disabled={!canContinue} onClick={() => onPick(sel)} style={{
        marginTop: 16, border: 'none', cursor: canContinue ? 'pointer' : 'default', borderRadius: 15,
        background: canContinue ? c.accent : c.border, color: canContinue ? c.accentInk : c.textMuted,
        fontFamily: 'inherit', fontWeight: 700, fontSize: 16, padding: '16px',
      }}>{c.t('continue_btn')}</button>
      <button onClick={() => onPick('Josue')} style={{ marginTop: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: c.textMuted, fontFamily: 'inherit', fontWeight: 600, fontSize: 14, padding: '8px' }}>{c.t('skip')}</button>
    </div>
  );
}

function SettingsSheet({ open, onClose, lang, setLang, profileName, setProfileName, setLens }) {
  const c = useTheme();
  const profileOptions = ASF_PROFILE_OPTIONS.includes(profileName) || !profileName ? ASF_PROFILE_OPTIONS : [profileName, ...ASF_PROFILE_OPTIONS];
  return (
    <Sheet open={open} onClose={onClose} title={c.t('settings')}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div>
          <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.textMuted, marginBottom: 9 }}>{c.t('language')}</div>
          <div style={{ display: 'flex', gap: 9 }}>
            <Chip active={lang === 'en'} onClick={() => setLang('en')}>English</Chip>
            <Chip active={lang === 'es'} onClick={() => setLang('es')}>Español</Chip>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.textMuted, marginBottom: 9 }}>{c.t('i_am')}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
            {profileOptions.map(name => <Chip key={name} active={profileName === name} onClick={() => { setProfileName(name); setLens('jy'); }}>{name}</Chip>)}
          </div>
        </div>
        <button onClick={onClose} style={{ border: 'none', cursor: 'pointer', background: c.accent, color: c.accentInk, fontFamily: 'inherit', fontWeight: 700, fontSize: 15.5, padding: '15px', borderRadius: 14 }}>{c.t('continue_btn')}</button>
      </div>
    </Sheet>
  );
}

Object.assign(window, { LensPicker, SettingsSheet });