// Model picker — bottom sheet with cards
function ModelPicker({ open, onClose, current, tier, onPick, onUpgrade }) {
  const S = window.SOL;
  if (!open) return null;
  const models = [
    {
      id: 'solus', name: 'Solus X5', tier: 'Free',
      tagline: 'Your everyday model \u2014 quick, warm, and endlessly helpful for the small stuff.',
      features: ['Writing, ideas, answers', 'Image uploads', 'Light on its feet'],
    },
    {
      id: 'apollo', name: 'Apollo 1', tier: 'Plus',
      tagline: 'Intelligence, unbounded \u2014 no hedge, no refusal, no second-guessing.',
      features: ['Unbounded reasoning', 'Image + video uploads', 'Direct answers, always'],
    },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 25, contain: 'strict' }}>
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0, background: 'rgba(28,26,23,0.38)',
        opacity: 0, animation: 'sol-fade-in 0.18s ease forwards',
      }}/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: S.paper, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '14px 16px 34px',
        transform: 'translateY(100%)',
        animation: 'sol-slide-up 0.24s cubic-bezier(0.2,0.8,0.2,1) forwards',
        boxShadow: '0 -10px 40px rgba(28,26,23,0.16)',
        willChange: 'transform',
      }}>
        <div style={{
          width: 36, height: 4, borderRadius: 2, background: S.line2,
          margin: '0 auto 14px',
        }}/>
        <div style={{
          fontFamily: S.serif, fontSize: 26, letterSpacing: -0.5, color: S.ink,
          marginBottom: 2,
        }}>Choose a model</div>
        <div style={{ fontFamily: S.sans, fontSize: 13, color: S.ink3, marginBottom: 14 }}>
          Switch any time — your chat carries over.
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {models.map(m => {
            const selected = current === m.id;
            const locked = m.id === 'apollo' && tier === 'free';
            return (
              <button key={m.id}
                onClick={() => locked ? onUpgrade() : onPick(m.id)}
                style={{
                  textAlign: 'left', cursor: 'pointer',
                  padding: '16px 16px 18px', borderRadius: 20,
                  background: m.id === 'apollo' ? S.ink : S.cream,
                  color: m.id === 'apollo' ? S.cream : S.ink,
                  border: selected ? `2px solid ${S.amber}` : `1px solid ${m.id === 'apollo' ? 'transparent' : S.line2}`,
                  position: 'relative', overflow: 'hidden',
                }}>
                {m.id === 'apollo' && (
                  <div style={{
                    position: 'absolute', top: -60, right: -60, width: 180, height: 180,
                    borderRadius: '50%',
                    background: 'radial-gradient(circle, rgba(232,155,60,0.4) 0%, rgba(232,155,60,0) 65%)',
                  }}/>
                )}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative' }}>
                  <SunMark size={26} variant={m.id}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontFamily: S.sans, fontSize: 16, fontWeight: 600, letterSpacing: -0.2 }}>
                        {m.name}
                      </span>
                      <span style={{
                        fontFamily: S.mono, fontSize: 9, letterSpacing: 0.6,
                        padding: '2px 6px', borderRadius: 4,
                        background: m.id === 'apollo' ? S.amber : S.cream2,
                        color: m.id === 'apollo' ? S.ink : S.ink2,
                      }}>{m.tier.toUpperCase()}</span>
                    </div>
                    <div style={{
                      fontFamily: S.sans, fontSize: 13, marginTop: 2,
                      color: m.id === 'apollo' ? 'rgba(245,239,228,0.7)' : S.ink3,
                    }}>{m.tagline}</div>
                  </div>
                  {selected && (
                    <div style={{
                      width: 26, height: 26, borderRadius: '50%', background: S.amber,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <Icon name="check" size={15} color={S.ink} strokeWidth={2.2}/>
                    </div>
                  )}
                  {locked && (
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: 4, padding: '5px 10px',
                      borderRadius: 999, background: S.amber, color: S.ink,
                      fontFamily: S.sans, fontSize: 12, fontWeight: 600,
                    }}>
                      <Icon name="lock" size={12} color={S.ink} strokeWidth={2}/>
                      Upgrade
                    </div>
                  )}
                </div>
                <div style={{
                  marginTop: 12, display: 'flex', flexDirection: 'column', gap: 4,
                  position: 'relative',
                }}>
                  {m.features.map((f, i) => (
                    <div key={i} style={{
                      fontFamily: S.sans, fontSize: 12.5,
                      color: m.id === 'apollo' ? 'rgba(245,239,228,0.8)' : S.ink2,
                      display: 'flex', alignItems: 'center', gap: 6,
                    }}>
                      <div style={{
                        width: 4, height: 4, borderRadius: '50%',
                        background: m.id === 'apollo' ? S.amber : S.amberDeep,
                      }}/>
                      <span>{f}</span>
                    </div>
                  ))}
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.ModelPicker = ModelPicker;