// Settings modal — account, plan, appearance, data, about
function Settings({ open, onClose, tier, dark, setDark, onUpgrade, user, onSignOut }) {
  const S = window.SOL;
  if (!open) return null;
  const section = (title, children) => (
    <div style={{ marginBottom: 28 }}>
      <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase',
        color: S.ink3, marginBottom: 10 }}>{title}</div>
      <div style={{ background: S.cream2, borderRadius: 14, overflow: 'hidden',
        border: `1px solid ${S.line}` }}>{children}</div>
    </div>
  );
  const row = (label, value, onClick, last) => (
    <button onClick={onClick} style={{
      width: '100%', padding: '14px 16px', border: 'none',
      borderBottom: last ? 'none' : `1px solid ${S.line}`,
      background: 'transparent', cursor: onClick ? 'pointer' : 'default',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: S.sans, fontSize: 14, color: S.ink, textAlign: 'left',
    }}>
      <span>{label}</span>
      <span style={{ color: S.ink3, fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>{value}</span>
    </button>
  );
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(28,26,23,0.4)', zIndex: 200,
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20,
      animation: 'sol-fade-in 0.2s ease',
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        background: S.cream, borderRadius: 22, width: '100%', maxWidth: 540, maxHeight: '85vh',
        overflowY: 'auto', padding: 28,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <div style={{ fontFamily: S.serif, fontSize: 32, color: S.ink, letterSpacing: -0.5 }}>Settings</div>
          <button onClick={onClose} style={{
            width: 32, height: 32, borderRadius: 10, border: 'none', background: S.paper, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.Icon name="close" size={16} color={S.ink2}/></button>
        </div>

        {section('Account', <>
          <div style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${S.line}` }}>
            <div style={{
              width: 44, height: 44, borderRadius: '50%',
              background: 'radial-gradient(circle at 30% 30%, #F8D596, #E89B3C)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: S.serif, fontSize: 20, color: S.ink,
          }}>{(user?.display_name || user?.email || 'G')[0].toUpperCase()}</div>
            <div>
              <div style={{ fontFamily: S.sans, fontSize: 14, fontWeight: 500, color: S.ink }}>{user?.display_name || user?.email?.split('@')[0] || 'Guest'}</div>
              <div style={{ fontFamily: S.sans, fontSize: 12, color: S.ink3 }}>{user?.email || ''}</div>
            </div>
          </div>
          {row('Plan', <span style={{
            fontFamily: S.mono, fontSize: 10, padding: '3px 7px', borderRadius: 4,
            background: tier === 'plus' ? S.ink : S.cream, color: tier === 'plus' ? S.cream : S.ink2, letterSpacing: 0.6,
          }}>{tier === 'plus' ? 'PLUS' : 'FREE'}</span>, tier === 'free' ? onUpgrade : null, tier === 'plus')}
          {tier === 'free' && row('Upgrade to Plus', <window.Icon name="chevRight" size={14} color={S.ink3}/>, onUpgrade, true)}
        </>)}

        {section('Appearance', <>
          {row('Dark mode', <>
            <div onClick={(e) => { e.stopPropagation(); setDark(!dark); }} style={{
              width: 40, height: 22, borderRadius: 12, background: dark ? S.amber : S.line2,
              position: 'relative', cursor: 'pointer', transition: 'background 0.2s',
            }}>
              <div style={{
                position: 'absolute', top: 2, left: dark ? 20 : 2, width: 18, height: 18,
                borderRadius: '50%', background: S.paper, transition: 'left 0.2s',
                boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
              }}/>
            </div>
          </>, null, true)}
        </>)}

        {section('Data', <>
          {row('Export chats', <window.Icon name="chevRight" size={14} color={S.ink3}/>, () => {})}
          {row('Clear all chats', <span style={{ color: S.ember }}>Delete</span>, () => {}, true)}
        </>)}

        {section('About', <>
          {row('Privacy', <window.Icon name="chevRight" size={14} color={S.ink3}/>, () => window.open('/privacy', '_blank'))}
          {row('Terms', <window.Icon name="chevRight" size={14} color={S.ink3}/>, () => window.open('/tos', '_blank'))}
          {row('Version', '1.0.0 (web)', null, true)}
        </>)}

        <button onClick={onClose} style={{
          width: '100%', padding: 14, marginTop: 8, border: `1px solid ${S.line2}`, borderRadius: 12,
          background: 'transparent', color: S.ember, fontFamily: S.sans, fontSize: 14, fontWeight: 500, cursor: 'pointer',
        }} onClick={onSignOut || onClose}>Sign out</button>
      </div>
    </div>
  );
}
window.Settings = Settings;